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

來源:互聯網
上載者:User

一、    提供後台資料的介面

後台主要提供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中展示出來即可、

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.