• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

Asp.netMVCVueAxios无刷新请求数据和响应数据

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
转载)ASP.NETMVC多语言切换发布时间:2022-07-10
下一篇:
Asp.net菜单控件发布时间:2022-07-10
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap