ASP.NET MVC中 Jquery AJAX 获取数据利用MVC模型绑定实现输出

在日常项目中我们经常使用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中定义如下：

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>

　　运行结果：