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无刷新请求数据和响应数据的更多相关文章

  1. ASP.NET MVC使用jQuery无刷新上传

    昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...

  2. Asp.net页面无刷新请求实现

    Asp.net页面无刷新请求实现 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&qu ...

  3. ASP.NET MVC 实现AJAX跨域请求方法《1》

    ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...

  4. [转]ASP.NET MVC学习系列(二)-WebAPI请求 传参

    [转]ASP.NET MVC学习系列(二)-WebAPI请求 传参 本文转自:http://www.cnblogs.com/babycool/p/3922738.html ASP.NET MVC学习系 ...

  5. ASP.NET MVC 实现 AJAX 跨域请求

    ASP.NET MVC 实现AJAX跨域请求的两种方法 和大家分享下Ajax 跨域的经验,之前也找了好多资料,但是都不行,后来看到个可行的修改了并测试下 果然OK了   希望对大家有所帮助! 通常发送 ...

  6. 纯js异步无刷新请求(只支持IE)

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

  7. 纯js异步无刷新请求(只支持IE)【原】

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

  8. ASP.NET MVC+Vue.js实现联系人管理

    接触了一天vue.js,简单浏览了一本关于vue的电子书,就开始动手使用ASP.NET MVC和Vue.js开发一个联系人管理的小程序. 先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么 ...

  9. ASP.NET MVC学习系列(二)-WebAPI请求

    继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现 ...

随机推荐

  1. 记录21.07.20 —— js语言回顾

    js语言回顾 1.语法 a并没有声明,也可以输出,不会报错. 添加一条语句 则需要声明,称之为严谨语法 2.数组 2.1数组遍历三种方法 for-in与for-of forEach forEach调用 ...

  2. MIPS Pwn赛题学习

    MIPS Pwn writeup Mplogin 静态分析   mips pwn入门题. mips pwn查找gadget使用IDA mipsrop这个插件,兼容IDA 6.x和IDA 7.x,在ID ...

  3. 爱了,字节跳动大神最佳整理:582页Android NDK七大模块学习宝典,理论与实践

    前言 时至今日,短视频App可谓是如日中天,一片兴兴向荣.随着短视频的兴起,音视频开发也越来越受到重视,而且薪资水涨船高,以一线城市为例,音视频工程开发的薪资比Android应用层开发高出40%. 但 ...

  4. ceph介绍和安装

    目录 1.Ceph简介 2.Ceph的特点 3.Ceph的缺点 4.架构与组件 4.1.组件介绍 4.2.存储过程 5.部署 5.1 设置主机名.配置时间同步 5.2 配置添加清华源 5.3 初始化c ...

  5. Notes about BSD

    FreeBSD: mainly for web server; OpenBSD: mainly for security concerned server;

  6. CentOS7 快速安装配置mysql8.0

    因为这个项目是两台CentOS7虚拟机,一台当作 MySQL服务器,所以需要配置3306端口公开 参考教学视频:Java2020体系课 22周课 5-2~3 两节课 yum search mysql- ...

  7. 模拟退火 Simulated annealing

    模拟退火 Simulated annealing 看看有空把图片完善一下好了 模拟退火算法的一些背景 既然要说模拟退火算法,就应该说一下模拟退火算法的背景,模拟退火算法是局部搜索算法的一种扩展,该算法 ...

  8. 算法入门 - 基于动态数组的栈和队列(Java版本)

    之前我们学习了动态数组的实现,接下来我们用它来实现两种数据结构--栈和队列.首先,我们先来看一下栈. 什么是栈? 栈是计算机的一种数据结构,它可以临时存储数据.那么它跟数组有何区别呢? 我们知道,在数 ...

  9. 两个线程交叉打印一个打印A一个打印B 循环打印?

    public static Object obj1 = new Object(); public static void printAB(){ Thread t1 = new Thread(() -& ...

  10. 经典树与图论(最小生成树、哈夫曼树、最短路径问题---Dijkstra算法)

    参考网址: https://www.jianshu.com/p/cb5af6b5096d 算法导论--最小生成树 最小生成树:在连通网的所有生成树中,所有边的代价和最小的生成树,称为最小生成树. im ...