ASP.NET MVC Ajax.ActionLink 簡單用法 - xishuai－IT工程師數位筆記本

文章出處

ASP.NET MVC 項目中，如何使用類似于 iframe 的效果呢？或者說 Ajax 局部刷新，比如下面操作：

我們想要的效果是，點擊 About 鏈接，頁面不刷新（地址欄不變），然后下面的內容進行更新，其實實現這個效果，很簡單，只需要使用 Ajax.ActionLink 即可。

1. 安裝 Microsoft.jQuery.Unobtrusive.Ajax 程序包

Install-Package Microsoft.jQuery.Unobtrusive.Ajax

2. 引用 JS 文件：

@Scripts.Render("~/bundles/jquery")
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>

3. web.config 增加配置：

<appSettings>
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

4. 編寫 Action：

public ActionResult About()
{
    ViewBag.Message = "Your application description page.";

    if (Request.IsAjaxRequest())
    {
        return PartialView();//Ajax.ActionLink
    }
    else
    {
        return View();
    }
}

5. 編寫 View：

@Ajax.ActionLink("About", "About", "Home", null, new AjaxOptions { UpdateTargetId = "body-content" }, new { })
<div id="body-content">
    @RenderBody()
</div>