微軟MVC3框架下JqueryMobile Ajax的實現（以更新ListView為例）

一、    提供后台數據的接口

后台主要提供Json序列化后的數據。任何一個對象都可以序列化為Json字符串。在后台將對象序列化后字符串可以直接提交給前台反序列化成對象。

1、提供JSON的接口：

 

        /// <summary>
        /// 根據時間取得短醫囑
        /// </summary>
        /// <param name="date"></param>
        /// <returns>返回經過JSON序列化后的字符串</returns>
        private string GetShortAdviseByDay(string date)
        {
            List<DocAdvise> docAdvise = pDao.getDocAdviseByDate((List<DocAdvise>)Session["shortAd"], date, bDay);  //根據日期篩選醫囑記錄
            JavaScriptSerializer jss = new JavaScriptSerializer();    //新建序列化對象
            string result = jss.Serialize(docAdvise);    //將要返回的對象序列化為JSON字符串
            return result;

        }

2、在MVC的Control層調用 1 中函數，返回JSON結果字符串：

        /// <summary>
        /// 異步請求短醫囑
        /// </summary>
        /// <param name="date"></param>
        /// <returns></returns>
        public ActionResult ResponseShortAdvise(string date)
        {
            return Content(GetShortAdviseByDay( date));

        }

 

二、    前台Js和jquery的異步請求數據和Dom編程

1、前台的HTML代碼：

                  <ul id="emrListView" data-role="listview" data-inset="true" style="margin-top: 0px;">
                   <li><a href="#"><img  src="#" alt="病例內容1" /></a></li>
                   <li><a href="#"><img  src="#" alt="病例內容2" /></a></li> 
                  </ul>

2、Jquery 異步請求數據，Dom更新

主要實現的過程：

1)異步請求數據，返回了data數據；

2）將返回后的數據反序列化成listUrl對象；

3）將listUrl對象的數據添加到id為EmrGallery的listview中；

4）重新渲染ListView。這是一個很重要而往往比較容易漏掉的步驟，少了這一步，JqueryMobile更新后的樣式不能正確渲染。

 

function ReflashEMR(time) {
    //異步請求數據。其中ResponseShortAdvise為Control里面的函數；time為傳入的參數；data為返回的JSON數據
    $.post("../YdylAjax/ResponseShortAdvise", { "date": time }, function (data, status) {
        var listUrl = $.parseJSON(data);
        if (status == "success") {
            var objListView = document.getElementById("emrListView");
            objListView.innerHTML = "";    //清空ListView原本的內容
            //如果服務器返回記錄為空
            if (listUrl.length == 0) {
                $("#EmrGallery").append('<h4>提示：當前日期沒有數據</h4>');
                return;
            }
            var tempnum = 1;
            for (var i = listUrl.length - 1; i >= 0; i--) {
                $("#emrListView").append(' <li><a href="#"  data-transition="fade"><img src="http://www.cnblogs.com/Content/imges/DutyRoster.png" class="ui-li-icon"> <h3 >病歷 ' + tempnum + ' </h3><p >  醫生：' + listUrl[i].Doc + ' </p><p> ' + listUrl[i].Dep  + listUrl[i].Time + ' </p></a></li>');        //將ListView中新的li
                tempnum++;
            }
        }
        $("#emrListView").listview("refresh");  //這里是重新渲染JqueryMobile中ListView的樣式
    });

}

 

其實總的來說也不是很復雜。就是前台用jquery異步請求后台Control中經過JSON序列化后的字符串數據，請求成功數據后，把JSON字符反序列化為JS的對象，然后在HTML中展示出來即可、