分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

ASP.NET MVC中如何以ajax的方式在View和Action中传递数据

发布时间:2023-09-06 01:56责任编辑:熊小新关键词:.NETMVC

前言:写这篇随笔的时候,在url上漏写了斜线,找了好久错误,整个人都很不好。#我是猪系列

背景:之前介绍过一篇如何构建 MVC&AJax&JSon示例,这一篇单独讲解如何在View和Action间传递并处理数据。

1,前台HTML代码:

1 ????<div>2 ????????<button type="button" id="btn">从视图向控制器中传递数据</button>3 ????????<p id="info"></p>4 ????</div>
View Code

2,前台JS代码:

 1 ????????$("#btn").click(function() { 2 ????????????$.ajax({ 3 ????????????????async:true, 4 ????????????????type: "POST", 5 ????????????????url: "/AjaxTest/AjaxBackData", 6 ????????????????cache: false, 7 ????????????????data: { 8 ????????????????????Name: "SharpL", City: "北京", Age: 18 9 ????????????????},10 ????????????????success: function (result) {11 ????????????????????$("#info").text(result);12 ????????????????}13 ????????????});14 ????????});
View Code

JS代码讲解:注意url: "/AjaxTest/AjaxBackData",AjaxTest前的‘/‘千万不能漏掉,博主已经开始怀疑人生了。

     data: {Name: "SharpL", City: "北京", Age: 18},数据就是这样以匿名对象的方式传递过去的。

或者JS代码这样来写:

 1 ????$(function () { 2 ????????$("#btn").click(function () { 3 ????????????var data = ""; 4 ????????????data += "&Name=" +encodeURI("SharpL"); 5 ????????????data += "&Age=" + encodeURI(18); 6 ????????????data += "&City=" + encodeURI("北京"); 7 ????????????$.ajax({ 8 ????????????????async:true, 9 ????????????????type: "POST",10 ????????????????url: "/AjaxTest/AjaxBackData",11 ????????????????cache: false,12 ????????????????data: data,13 ????????????????success: function (result) {14 ????????????????????$("#info").text(result);15 ????????????????}16 ????????????});17 ????????});18 ????});
View Code

或者JS代码这样来写:

 1 ????$(function () { 2 ????????$("#btn1").click(function () { 3 ????????????$.ajax({ 4 ????????????????type: "POST", 5 ????????????????url: "/TestAjax/Test?City=北京&Name=SharpL&Age=18", 6 ????????????????cache: false, 7 ????????????????data: null, 8 ????????????????success: function (result) { 9 ????????????????????if (result) {10 ????????????????????????$("#pDisplay").text("返回信息为 " + result.Message + "\n" + "随机数为" + result.RandomNum);11 ????????????????????}12 ????????????????}13 ????????????????});14 ????????});15 ????})
View Code

三者的结果完全相同。

3,后台代码如下:

1 ????????public ActionResult AjaxBackData(STU stu)2 ????????{3 ????????????string name = stu.Name;4 ????????????int age = stu.Age;5 ????????????string city = stu.City;6 ????????????string tmp=string.Format("{0}年龄{1}岁,来自{2}",name,age,city);7 ????????????return Content(tmp);8 ????????}
View Code

注意Action的参数为STU,直接获取以ajax方式传递过来的数据。

或者后台代码如下:(项目中所使用的经典方式)

1 ????????public ActionResult AjaxBackData()2 ????????{3 ????????????var stu = new STU();4 ????????????this.UpdateModel(stu);5 ????????????string tmp=string.Format("{0}年龄{1}岁,来自{2}",stu.Name,stu.Age,stu.City);6 ????????????return Content(tmp);7 ????????}
View Code

或者后台代码如下:(以显示ContentResult的方式返回)前两种方式返回Content,其返回值仍然是ContentResult。

1 ????????????var actionResult = default(ContentResult);2 ????????????var stu =new Stu();3 ????????????this.UpdateModel(stu);4 ????????????actionResult=new ContentResult(){5 ????????????????Content=string.Format("{0}{1}岁,来自{2}",stu.Name,stu.Age,stu.City)6 ????????????};7 ????????????return actionResult;
View Code

Content只能够返回Content,当需要返回多项数据时,返回Json(),代码如下:

1 ????????public ActionResult Test()2 ????????{3 ????????????var stu = new Stu();4 ????????????this.UpdateModel(stu);5 ????????????var tmp= string.Format("{0}{1}岁,来自{2}", stu.Name, stu.Age, stu.City);6 ????????????Random r=new Random();7 ????????????int t=r.Next(1,10);8 ????????????return Json(new { Message = tmp, RandomNum = t });9 ????????}
View Code

2.2同时修改对于返回json格式的数据的前台Ajax接收的代码,修改如下:

1 ????????????????success: function (result) {2 ????????????????????if (result) {3 ????????????????????????$("#pDisplay").text("返回信息为 " + result.Message + "\n" + "随机数为" + result.RandomNum);4 ????????????????????}5 ????????????????}
View Code

类似的,可以将Json修改为显式返回JsonResult对象,代码如下:

 1 ????????public ActionResult Test() 2 ????????{ 3 ????????????var actionResult = default(JsonResult); 4 ????????????var stu = new Stu(); 5 ????????????this.UpdateModel(stu); 6 ????????????var tmp= string.Format("{0}{1}岁,来自{2}", stu.Name, stu.Age, stu.City); 7 ????????????Random r=new Random(); 8 ????????????int t=r.Next(1,10); 9 ????????????actionResult = new JsonResult()10 ????????????{11 ????????????????Data = new { Message = tmp, RandomNum = t }12 ????????????};13 ????????????return actionResult;14 ????????}
View Code



出处:http://www.cnblogs.com/SharpL/p/4681596.html

ASP.NET MVC中如何以ajax的方式在View和Action中传递数据

原文地址:https://www.cnblogs.com/mq0036/p/9082508.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved