ASP.NET MVC中 Jquery AJAX 获取数据利用MVC模型绑定实现输出
2012-08-29 10:39
1126 查看
在日常项目中我们经常使用ajax ,无论是webform 还是mvc ,jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。jquery ajax 为我们实现ajax提供了一些非常方便的实现ajax的方法。我们利用ajax返回到前台的json字符串,需要我们自己去处理解析,很多时候我们需要自己手动的去拼html 字符串 很麻烦,那么有没有简单的方法呢,在MVC中,提供了一种机制模型绑定。
在ASP.net MVC中,使用了一种称之为“模型绑定”的机制,将模型对象与HTTP请求的数据通过Action方法的参数进行映射绑定,无论从简单的数据或者到复杂的数据结构,应付模型绑定的一切工作,MVC框架都能游刃有余。在ajax的应用中,我们如何利用这个特性呢,我们可以把数据通过模型绑定 把数据绑定到视图,然后再获取视图输出的字符串,直接输出即可。
我们首先定义一个ApplicationController 继承 Controller 。在ApplicationController中定义如下:
我们只需要传入视图名称,和实体数据,就可以输出我们定义好格式的字符串。
定义控制器 继承 ApplicationController
Details 方法中 我们返回一个JsonResult,调用了RenderPartialViewToString 方法。
Details 视图中定义:
客户端js写法(必须引入jquery文件):
运行结果:
直接上代码:
点我下载
在ASP.net MVC中,使用了一种称之为“模型绑定”的机制,将模型对象与HTTP请求的数据通过Action方法的参数进行映射绑定,无论从简单的数据或者到复杂的数据结构,应付模型绑定的一切工作,MVC框架都能游刃有余。在ajax的应用中,我们如何利用这个特性呢,我们可以把数据通过模型绑定 把数据绑定到视图,然后再获取视图输出的字符串,直接输出即可。
我们首先定义一个ApplicationController 继承 Controller 。在ApplicationController中定义如下:
public class ApplicationController : Controller { protected string RenderPartialViewToString(string viewName, object model) { if (string.IsNullOrEmpty(viewName)) viewName = ControllerContext.RouteData.GetRequiredString("action"); ViewData.Model = model; using (var sw = new StringWriter()) { ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName); var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw); viewResult.View.Render(viewContext, sw); return sw.GetStringBuilder().ToString(); } } }
我们只需要传入视图名称,和实体数据,就可以输出我们定义好格式的字符串。
定义控制器 继承 ApplicationController
public class HomeController : ApplicationController { private static Users _usrs = new Users(); public ActionResult Index() { return View(_usrs._usrList); } public ActionResult Create() { return View(); } [HttpPost] public ActionResult Create(UserModel item) { _usrs.Create(item); return View(); } public ActionResult Edit(string id) { return View(_usrs.GetUser(id)); } [HttpPost] public ActionResult Edit(UserModel um) { _usrs.Update(um); return View(); } public ActionResult About() { return View(); } public ViewResult Delete(string id) { return View(_usrs.GetUser(id)); } [HttpPost] public RedirectToRouteResult Delete(string id, FormCollection collection) { _usrs.Remove(id); return RedirectToAction("Index"); } public JsonResult Details(string id) { UserModel user = _usrs.GetUser(id); var m = new { Status = 1, Message = "Ok", Content = RenderPartialViewToString("Details", user) }; return Json(m); } }
Details 方法中 我们返回一个JsonResult,调用了RenderPartialViewToString 方法。
Details 视图中定义:
<h2>Details</h2> <fieldset> <legend>Fields</legend> <div class="display-label">UserName</div> <div class="display-field">@Model.UserName</div> <div class="display-label">FirstName</div> <div class="display-field">@Model.FirstName</div> <div class="display-label">LastName</div> <div class="display-field">@Model.LastName</div> <div class="display-label">City</div> <div class="display-field">@Model.City</div> </fieldset> <p> @Html.ActionLink("Edit", "Edit", new { id=@Model.UserName }) | @Html.ActionLink("Back to List", "Index") </p>
客户端js写法(必须引入jquery文件):
<script language="javascript" type="text/javascript"> function showDetails(id) { $.post("/Home/Details?id=" + id, function (data) { if (data.Status <= 0) { alert(data.Message); return; } $("#detailsinfo").html(data.Content); }); } </script>
运行结果:
直接上代码:
点我下载
相关文章推荐
- ASP.NET MVC中 Jquery AJAX 获取数据利用MVC模型绑定实现输出
- ASP.NET Web API实践系列07,获取数据, 使用Ninject实现依赖倒置,使用Knockout实现页面元素和视图模型的双向绑定
- 利用反射实现ASP.NET控件和数据实体之间的双向绑定,并且在客户端自动验证输入的内容是否合法
- Asp.net MVC 中利用jquery datatables 实现数据分页显示功能
- ASP.NET MVC学习三-数据传递之模型绑定
- asp.net 利用jquery ajax 和json获取数据
- 关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例
- asp.net mvc 中利用jquery datatables 实现数据分页显示
- 关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例
- asp.net 站内搜索功能的实现及利用datatable绑定数据并进行分页
- ASP.NET MVC 5 (二)动态输出、辅助器方法、模型绑定与添加验证
- ASP.NET MVC保持表单数据状态的方法:input辅助器+模型绑定
- 如何在ASP.NET MVC中实现提交若干个某模型的数据(某Model的List或ICollection,大小不定)
- asp.net mvc 中输出利用FCKeditor保存在数据库中数据
- Asp.net mvc 3.0入门教程之五——从控制器访问模型数据
- 为ASP.NET MVC应用创建Entity Framework数据模型(1/10)
- ASP.NET 2.0 中实现模板中的数据绑定系列(2)
- Asp.Net MVC页面静态化功能实现一:利用IHttpModule和ResultFilter
- ASP.NET MVC 模型绑定的 6 个建议
- Asp.Net MVC页面静态化功能实现一:利用IHttpModule,摒弃ResultFilter