zoukankan      html  css  js  c++  java
  • 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; }
        }
    }
    View Code

    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 Code

    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));
                }
            }
        });
    View Code

    展示效果

    不知道为什么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);
                }
            }
  • 相关阅读:
    OpenCV 环境搭建( Win7 32位 / VS2010 / OpenCV2.4.8 )
    OpenCV 简介
    计算机视觉简介
    使用 sigaction 函数实现可靠信号
    可靠信号机制
    信号机制的两个思考
    信号的接收和处理
    【angular5项目积累总结】列表多选样式框(1)
    数组相关方法积累(vueag等特别常用)
    Angular 4+ 修仙之路
  • 原文地址:https://www.cnblogs.com/liessay/p/12199000.html
Copyright © 2011-2022 走看看