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>

運行結果：

直接上代碼：

 點我下載