1.1.MVC5引入jQuery庫
①直接在專案的script檔案夾中拖拽引入；
<script src="https://www.cnblogs.com/yif0118/p/~/Scripts/jquery-1.10.2.min.js"></script>
②使用@Scripts.Render("~/bundles/jquery")注解方式，不限制版本，全域參考；
具體配置：
@Scripts.Render("~/bundles/jquery")
這個路徑是由MVC5為我們創建的一個虛擬路徑，具體路徑如下：
1.2.MVC5 Ajax.ActionLink引數詳解及實體
Ajax.ActionLink語法會生成一個a標簽，點擊a標簽會執行一個Ajax請求，
使用方式：
@Ajax.ActionLink(“顯示內容”,”方法”, “控制器名稱”, “引數資訊”, “屬性資訊”)
簡單使用：
<div id="div1"> @Ajax.ActionLink("請單擊", "About", "Home", new { id = 1, name = "世界你好" }, new AjaxOptions { HttpMethod = "get", UpdateTargetId = "div1" }) </div> //對應的Controller接收name值并顯示在界面上 public ActionResult About(string name) { ViewBag.Message = name; return View(); }
1.3.MVC5 Ajax.BeginForm引數詳解與實體
使用Ajax.BeginForm方法會生成一個form表單，最后以Ajax的方式提交表單資料；
使用方式：
@using(Ajax.BeginForm(“方法”,”控制器名稱”,引數,屬性資訊)){
--- 表單
}
實體：
<div> @using (Ajax.BeginForm("About", "Home", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "div1" })) { <input type="text" name="name1"/> <input type="submit" value="請單擊" /> } </div> //使用get方式進行ajax異步跳轉到about路由進行顯示 public ActionResult About(string name1) { ViewBag.Message = name1; return View(); }
1.4.MVC5 Ajax.ActionLink異步呼叫實體
之前實作的Ajax.ActionLink并沒有引入Ajax的相關包，所以不是異步的，這里我們需要實作一個異步的Ajax.ActionLink：
①需要引入相關的js包：
1 jquery-1.10.2.min.js 2 jquery.validate.min.js //驗證 3 jquery.validate.unobtrusive.min.js //驗證輔助包 4 jquery.unobtrusive-ajax.min.js //ajax輔助包 5 6 其中jquery.unobtrusive-ajax.min.js是默認不存在的，需要安裝對應的js包
②安裝Ajax插件
工具—— NuGet包管理器——程式包管理控制臺
輸入Install-Package Microsoft.jQuery.Unobtrusive.Ajax -version 3.0.0
之后看到script檔案夾中已經安裝了ajax對應的js包：
③引入對應的Ajax包，并撰寫路由方法About()，異步傳參回傳name引數并設定到div2中，實作異步設定值：
<script src=https://www.cnblogs.com/yif0118/p/"~/Scripts/jquery-3.3.1.js"></script> <script src=https://www.cnblogs.com/yif0118/p/"~/Scripts/jquery.validate.js"></script> <script src=https://www.cnblogs.com/yif0118/p/"~/Scripts/jquery.validate.unobtrusive.js"></script> <script src=https://www.cnblogs.com/yif0118/p/"~/Scripts/jquery.unobtrusive-ajax.js"></script> <p>Use this area to provide additional information.</p> <div id="div1"> @Ajax.ActionLink("請單擊", "About", "Home", new { id = 1, name = "世界你好" }, new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "div2" }) </div> <div id="div2"> </div> public ActionResult About() { ViewBag.Message = ""; return View(); } [HttpPost] public String About(string name) { return name; }
1.5.MVC5 Ajax.BeginForm異步呼叫的實體
Ajax.BeginForm與Ajax.ActionLink的實際操作型別，都需要引入四個js包，對于Controller部分的引數傳遞、回傳都是一致的，不同的是對于Ajax.BeginForm在View界面的代碼及顯示效果為form提交重繪效果不一致：
<div> @using (Ajax.BeginForm("About", "Home", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "div2" })) { <input type="text" name="name" /> <input type="submit" value=https://www.cnblogs.com/yif0118/p/"請單擊" /> } </div> <div id="div2"> 要修改的東西 </div> public ActionResult About() { ViewBag.Message = ""; return View(); } [HttpPost] public String About(string name) { return name; }
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/93.html
標籤：ASP.NET MVC