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)作为参数可以,暂时这么滴吧

原文地址:https://www.cnblogs.com/win32pro/p/12199000.html

时间: 2024-10-29 05:17:51

Asp.net MVC Vue Axios无刷新请求数据和响应数据的相关文章

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

昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说,把源代码一一照搬的复制.难道它不能移值至ASP.NET MVC应用程序吗?Insus.NET想了一下,源代码是html+ashx的,它一定能的. 网友发送能正常运行的代码给Insus.NET...... 重点的script文件:http://download.cnblogs.com/insus/M

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

Asp.net页面无刷新请求实现 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="omAjaxSubmit.aspx.cs" Inherits="OMDemo.demo.omAjaxSubmit" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&q

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

继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现数据调用. 继续使用上一文章中的示例,添加一个index.html页面,添加对jquery的引用. 一.无参数Get请求 一般的get请求我们可以使用jquery提供的$.get() 或者$.ajax({type:"get"}) 来实现: 请求的后台Action方法仍为上篇文章中的GetU

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

ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.Net MVC 框架里实现跨域的AJAX请求有几种方式可以实现,以下就介绍常用的两种方法. 1.     发送JSONP请求 客户端: jQuery对发送JSONP请求有很好的支持,客户端通过. ajax() 函数发送请求,其中需要制定 dataType 为"j

ASP.NET MVC 实现 AJAX 跨域请求

ASP.NET MVC 实现AJAX跨域请求的两种方法 和大家分享下Ajax 跨域的经验,之前也找了好多资料,但是都不行,后来看到个可行的修改了并测试下 果然OK了   希望对大家有所帮助! 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框架里实现跨域的AJAX请求有几种方式可以实现,以下就介绍常用的两种方法. 1.     发送JSONP请求

ASP.NET MVC 5 WEB API PUT请求

Jquery请求,使用JSON.stringify进行序列化,并且必须要指定传输格式contentType $.ajax({ url: '/api/sysUser?token='+token, type: 'PUT', data: JSON.stringify({ "userID":id, "userName": $('#inputUserName').val(), "cellphone": $('#inputCellPhone').val(),

解决vue axios跨域请求发送两次问题

问题: vue axios跨域请求,在Request Headers加Authorization传递Token时,发现统一请求触发了两次,第一次是Request Method: OPTIONS请求. 原因: 跨域请求时,浏览器会首先使用OPTIONS方法发起一个预请求,判断接口是否能够正常通讯.如果通讯异常,则不会发送真正的请求,如果测试通讯正常,则开始真正的请求. 解决方法: 后台:判断请求方式是OPTIONS,则不处理: 预请求 发送真正请求  PHP解决方法 class Common ex

asp.net MVC中控制器获取表单form提交的数据之实体类数据

第一次写记录文章,难免有不足之处:欢迎指出. 1.新建一个mvc项目如: 2.新建一个Test.cs 注意get,set方法不能简写 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 using System; using System.Collections.Generic; using System.Linq; usi

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

接触了一天vue.js,简单浏览了一本关于vue的电子书,就开始动手使用ASP.NET MVC和Vue.js开发一个联系人管理的小程序. 先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么样的功能. 上面截图可以看出,这是一个很简单的表格管理功能.我们先分析一下,上述有哪些功能需要实现: 1.默认先加载出所有的联系人信息,有信息的行后面的操作那一栏,显示"修改"."删除",没有信息的行后面的操作那一栏,显示"添加"(默认只添加一行需要