Asp.net MVC Vue Axios无刷新请求数据和响应数据
Model层Region.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace WebApplication1.Models
{
public class Region
{
public int Id { get; set; }
public string City { get; set; }
}
}
Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using WebApplication1.Models; namespace WebApplication1.Controllers
{
public class DefaultController : Controller
{
//获取Json数据
[HttpPost]
public JsonResult GetJson(int id)
{
List<Region> regions = new List<Region>() {
new Region{ Id=0,City="山东省"},
new Region{ Id=1,City="济南市"},
new Region{ Id=2,City="历下区"},
new Region{ Id=3,City="市中区"},
new Region{ Id=4,City="天桥区"},
new Region{ Id=5,City="槐荫区"}
};
var json = from r in regions where r.Id == id select r;
return Json(json);
}
//显示主页
public ActionResult Index()
{
return View();
}
}
}
View
<script src="~/Scripts/vue.js"></script>
<script src="~/Scripts/axios.js"></script>
<h2>Index</h2>
<div id="app">
<hr />
<input type="number" v-model.number="id" />
<input type="button" v-on:click="fun()" value="查询" />
<table border="1">
<tr>
<th>编号</th>
<th>地区</th>
</tr>
<tr v-for="item in response">
<td>{{item.Id}}</td>
<td>{{item.City}}</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
response: null,
id: 0
}
},
methods: {
fun: function () {
axios.post("/Default/GetJson", { 'id': this.id })
.then(res => (this.response = res.data));
}
}
});
展示效果

不知道为什么Request["id"]获取不到view传过来的请求,用Form表单方式请求没有问题,网上找了一些也没找到怎么回事,GetJson(int id)作为参数可以,暂时这么滴吧
补充不能获取post的问题解决方式
methods: {
fun() {
var f = new FormData();//**这里
f.append('id', this.id);//**这里
axios.post("/Default/GetJson", f)
.then(res => (this.response = res.data));
console.log(this.response);
}
}
Asp.net MVC Vue Axios无刷新请求数据和响应数据的更多相关文章
- ASP.NET MVC使用jQuery无刷新上传
昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...
- Asp.net页面无刷新请求实现
Asp.net页面无刷新请求实现 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&qu ...
- ASP.NET MVC 实现AJAX跨域请求方法《1》
ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...
- [转]ASP.NET MVC学习系列(二)-WebAPI请求 传参
[转]ASP.NET MVC学习系列(二)-WebAPI请求 传参 本文转自:http://www.cnblogs.com/babycool/p/3922738.html ASP.NET MVC学习系 ...
- ASP.NET MVC 实现 AJAX 跨域请求
ASP.NET MVC 实现AJAX跨域请求的两种方法 和大家分享下Ajax 跨域的经验,之前也找了好多资料,但是都不行,后来看到个可行的修改了并测试下 果然OK了 希望对大家有所帮助! 通常发送 ...
- 纯js异步无刷新请求(只支持IE)
纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...
- 纯js异步无刷新请求(只支持IE)【原】
纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...
- ASP.NET MVC+Vue.js实现联系人管理
接触了一天vue.js,简单浏览了一本关于vue的电子书,就开始动手使用ASP.NET MVC和Vue.js开发一个联系人管理的小程序. 先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么 ...
- ASP.NET MVC学习系列(二)-WebAPI请求
继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现 ...
随机推荐
- netty系列之:中国加油
目录 简介 场景规划 启动Server 启动客户端 消息处理 消息处理中的陷阱 总结 简介 之前的系列文章中我们学到了netty的基本结构和工作原理,各位小伙伴一定按捺不住心中的喜悦,想要开始手写代码 ...
- LeetCode通关:哈希表六连,这个还真有点简单
精品刷题路线参考: https://github.com/youngyangyang04/leetcode-master https://github.com/chefyuan/algorithm-b ...
- 我是如何在一晚上拿到阿里巴巴Android研发offer的?
图文无关 开篇 我找工作时是2018年. 那一年,BAT大量缩招,就业形势严峻,互联网寒冬消息蔓延. 最终我经过激烈角逐拼下了几个大厂offer,回顾往事,觉得分享出来,也许对你能有所借鉴. 简历 这 ...
- Apache网页优化与安全
目录 一.Apache网页优化 1.1.概述 1.2.gzip介绍 1.3.Apache的压缩模块 二.网页压缩实验 2.1.检查是否安装mod_deflate模块 2.2.重新编译安装Apache添 ...
- LinuxDHCP配置
目录 一.DHCP服务 1.1.了解DHCP服务 1.2.使用DHCP的好处 1.3.DHCP的分配方式 1.4.DHCP的租约过程 客户机请求IP地址 重新登录 更新租约 1.5.使用DHCP动态配 ...
- 《手把手教你》系列技巧篇(十九)-java+ selenium自动化测试-元素定位大法之By css下卷(详细教程)
1.简介 按计划今天宏哥继续讲解css的定位元素的方法.但是今天最后一种宏哥介绍给大家,了解就可以了,因为实际中很少用. 2.常用定位方法(8种) (1)id(2)name(3)class name( ...
- MySQL索引篇之索引存储模型
本文重点介绍下索引的存储模型 二分查找 给定一个1~100的自然数,给你5次机会,你能猜中这个数字吗? 你会从多少开始猜? 为什么一定是50呢?这个就是二分查找的一种思想,也叫折半查找,每 ...
- python爬虫:了解JS加密爬取网易云音乐
python爬虫:了解JS加密爬取网易云音乐 前言 大家好,我是"持之以恒_liu",之所以起这个名字,就是希望我自己无论做什么事,只要一开始选择了,那么就要坚持到底,不管结果如何 ...
- 题解 P3643 [APIO2016]划艇
题解 一种思路很好想:\(f_{i,j}\) 表示前 \(i\) 所学校中,第 \(i\) 所学校参赛且派出 \(j\) 艘划艇的方案数.(转移就不列了.) 这种方式有一个致命点,就是 \(j\) 的 ...
- nodejs 更改项目端口号的 方法
我这里是 koa2 项目 1.项目目录 serverConf.js 这里面配置端口 代码如下: const ServerConf= { ServicePort: 3036 }; module.expo ...