分享web开发知识

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

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

如何构建ASP.NET MVC4&JQuery&AJax&JSon示例

发布时间:2023-09-06 01:58责任编辑:郭大石关键词:.NETMVC

背景:

  博客中将构建一个小示例,用于演示在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 + temp16 ????????????????}; ?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示例完成。

摘自:https://www.cnblogs.com/SharpL/p/4641040.html

如何构建ASP.NET MVC4&JQuery&AJax&JSon示例

原文地址:https://www.cnblogs.com/1906859953Lucas/p/9132687.html

知识推荐

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