【.NET框架】—— MVC5 與jQuery庫（四）

1.1.MVC5引入jQuery庫

①直接在項目的script文件夾中拖拽引入；

<script src="~/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="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/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="請單擊" />
    }
</div>
<div id="div2">
    要修改的東西
</div>

public ActionResult About()
{
    ViewBag.Message = "";

    return View();
}

[HttpPost]
public String About(string name)
{
    return name;
}