微軟為開發(fā) MVC 提供了很多簡便的寫法。實現(xiàn)一個MVC AJAX傳值查詢的功能。邏輯很簡單，就是在頁面通過提交查詢，然后后臺返回JSON，通過js處理成table顯示在頁面。實現(xiàn)效果如圖：
實現(xiàn)效果
參考文檔：https://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxextensions.beginform(v=vs.118).aspx#M:System.Web.Mvc.Ajax.AjaxExtensions.BeginForm%28System.Web.Mvc.AjaxHelper,System.Web.Mvc.Ajax.AjaxOptions%29
頁面代碼
@Styles.Render("~/bundles/tablecss")
@Scripts.Render("~/bundles/tablejs")
<script type="text/javascript">
function showTable(data) {
var divid = $("#message");
readQuery(divid, data);
}
</script>
<div>
@using (Ajax.BeginForm("test1", "Query", new AjaxOptions(){
HttpMethod = "Post",
LoadingElementId = "loading",
UpdateTargetId = "message",
OnSuccess = "showTable"
}))
{
<div>
<input type="text" id="id"name="id" value="ceshi" />
<input type="submit" id="Query" value="Query"/>
</div>
}
</div>
<div id="loading" style="display: none">
<div class ="cover"></div>
<div class ="coffee_cup">loading</div>
<div ></div>
</div>
<div id="message"></div>
.NET MVC 使用Ajax.BeginForm 來提交AJAX。除了熟悉的 aciton，和controller參數(shù)外，在AjaxOptions()實現(xiàn)比較常用的幾個參數(shù)
| Parameter name | Description |
|---|---|
HttpMethod |
請求類型 post 或者get |
LoadingElementId |
在提交完成前需要顯示的html id，完成后自動隱藏 |
UpdateTargetId |
提交完成需要更新的html id |
OnSuccess |
處理返回數(shù)據(jù)的js function |
完整的說明請參考：https://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions(v=vs.118).aspx
需要注意的是使用 Ajax.BeginForm 必須要引入js：jquery.unobtrusive-ajax.min.js
服務端
后臺在接受數(shù)據(jù)時是根據(jù)標簽的 name來獲取
后臺處理
分析頁面
在瀏覽器中查看元素，系統(tǒng)在生成html代碼時，自動實現(xiàn)了多個 data-ajax- *的屬性，方便jquery.unobtrusive-ajax.min.js抓取屬性處理。
圖片.png
同理可以處理 AJAX.ActionLink
