如何构建 MVC&AJax&JSon示例
背景:
博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax。
步骤:
1,添加控制器(HomeController)和动作方法(Index),并为Index动作方法添加视图(Index.cshtml),视图中HTML如下:
输入你的姓名: <input type="text" id="txtName"/><br/> 输入你的年龄: <input type="text" id="txtAge" /><br /> <button type="button" id="btn1">提交</button> <button type="button" id="btn2">清空</button> <p id="display"></p>
视图中包含两个文本框,分别用来输入名字和年龄,包含连个按钮,分别用来提交信息和清空文本框的内容,同时包含一个段落,用来显示Ajax返回的数据信息。
2,在Home控制器中添加另外一个动作方(AddUsers),用来接收并处理视图传递过来的数据,并返回执行结果给视图,代码如下:
1 public ActionResult AddUsers() 2 { 3 var my = new MyModel(); 4 string result = string.Empty; 5 if(Request.IsAjaxRequest()) 6 { 7 this.UpdateModel(my); 8 string name = my.Name; 9 int age = my.Age; 10 if (age < 18) result = name+"的文章好烂啊"; 11 else result = name+",记得烂也要写"; 12 } 13 return Content(result); 14 }
如代码所示:直接用Content返回一个字符串。
或者是返回一个 ContentResult()对象,与上面的代码类似(可以折叠了),代码如下:

1 public ActionResult DoWithUsers() 2 { 3 var actionResult = default(ContentResult); 4 var my = new MyModel(); 5 try 6 { 7 this.UpdateModel(my); 8 string name = my.Name; 9 int age = my.Age; 10 string temp = ""; 11 if (age < 18) temp = "的文章好烂啊"; 12 else temp = ",记得烂也要写"; 13 actionResult = new ContentResult() 14 { 15 Content = name + temp 16 }; 17 } 18 catch(Exception ex) 19 { 20 return null; 21 } 22 return actionResult; 23 }
3,修改Jquery&Ajax代码:
1 $(document).ready(function () { 2 $("#btn1").click(function () { 3 var data = ""; 4 var name = $("#txtName").val(); 5 var age = $("#txtAge").val(); 6 data += "&Name=" + encodeURI(name); 7 data += "&Age=" + encodeURI(age); 8 $.ajax({ 9 async: true, 10 cache: false, 11 timeout: 60 * 60 * 1000, 12 data: data, 13 type: "GET", 14 datatype: "JSON", 15 url: "/Ajax/AddUsers", 16 success:function(result) 17 { 18 $("#display").text(result); 19 }, 20 error: function (result) { 21 $("#display").html("error"); 22 }, 23 }) 24 });
4,运行效果如图:
以上,最简单的ASP.NET MVC4&JQuery&AJax示例完成了。
以Json方式发送Action处理后的结果:
更多的情况下,不止是返回一个字符串,而是以Json的方式返回结果。
5,修改Action如下:
1 public ActionResult DoWithUsers() 2 { 3 var my = new MyModel(); 4 try 5 { 6 this.UpdateModel(my); 7 string name = my.Name; 8 int age = my.Age; 9 string temp = ""; 10 if (age < 18) temp = "的文章好烂啊"; 11 else temp = ",记得烂也要写"; 12 JavaScriptSerializer jss = new JavaScriptSerializer(); 13 return Json(jss.Serialize(new { Name = name, Message = temp }), JsonRequestBehavior.AllowGet); 14 } 15 catch(Exception ex) 16 { 17 return null; 18 } 19 }
说明:JSon方法返回一个JSonResult,而JSonResult同样是继承自ActionResult的。
6,修改AJax部分,代码如下:
1 success:function(result) 2 { 3 result = JSON.parse(result); 4 $("#display").text(result.Name + result.Message); 5 },
运行效果一致。
以上,最简单的ASP.NET MVC4&JQuery&AJax&JSon示例完成。
出处:http://www.cnblogs.com/SharpL/p/4641040.html
关注我】。(●'◡'●)
如果,您希望更容易地发现我的新博客,不妨点击一下绿色通道的【因为,我的写作热情也离不开您的肯定与支持,感谢您的阅读,我是【Jack_孟】!
本文来自博客园,作者:jack_Meng,转载请注明原文链接:https://www.cnblogs.com/mq0036/p/9082493.html
【免责声明】本文来自源于网络,如涉及版权或侵权问题,请及时联系我们,我们将第一时间删除或更改!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器