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

一、    提供後台資料的介面

後台主要提供Json序列化後的資料。任何一個對象都可以序列化為Json字串。在後台將對象序列化後字串可以直接提交給前台還原序列化成對象。

1、提供JSON的介面：

 

 1         /// <summary> 2         /// 根據時間取得短醫囑 3         /// </summary> 4         /// <param name="date"></param> 5         /// <returns>返回經過JSON序列化後的字串</returns> 6         private string GetShortAdviseByDay(string date) 7         { 8             List<DocAdvise> docAdvise = pDao.getDocAdviseByDate((List<DocAdvise>)Session["shortAd"], date, bDay);  //根據日期篩選醫囑記錄 9             JavaScriptSerializer jss = new JavaScriptSerializer();    //建立序列化對象10             string result = jss.Serialize(docAdvise);    //將要返回的對象序列化為JSON字串11             return result;12 13         }

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

 1         /// <summary> 2         /// 非同步請求短醫囑 3         /// </summary> 4         /// <param name="date"></param> 5         /// <returns></returns> 6         public ActionResult ResponseShortAdvise(string date) 7         { 8             return Content(GetShortAdviseByDay( date)); 9 10         }

 

二、    前台Js和jquery的非同步請求資料和Dom編程

1、前台的HTML代碼：

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

2、Jquery 非同步請求資料，Dom更新

主要實現的過程：

1)非同步請求資料，返回了data資料；

2）將返回後的資料還原序列化成listUrl對象；

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

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

 

 1 function ReflashEMR(time) { 2     //非同步請求資料。其中ResponseShortAdvise為Control裡面的函數；time為傳入的參數；data為返回的JSON資料 3     $.post("../YdylAjax/ResponseShortAdvise", { "date": time }, function (data, status) { 4         var listUrl = $.parseJSON(data); 5         if (status == "success") { 6             var objListView = document.getElementById("emrListView"); 7             objListView.innerHTML = "";    //清空ListView原本的內容 8             //如果伺服器返回記錄為空白 9             if (listUrl.length == 0) {10                 $("#EmrGallery").append('<h4>提示：當前日期沒有資料</h4>');11                 return;12             }13             var tempnum = 1;14             for (var i = listUrl.length - 1; i >= 0; i--) {15                 $("#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中新的li16                 tempnum++;17             }18         }19         $("#emrListView").listview("refresh");  //這裡是重新渲染JqueryMobile中ListView的樣式20     });21 22 }

 

其實總的來說也不是很複雜。就是前台用jquery非同步請求後台Control中經過JSON序列化後的字串資料，請求成功資料後，把JSON字元還原序列化為JS的對象，然後在HTML中展示出來即可、