使用HTML剃刀重新加載部分視圖

Question

我的模型中有這個簡單的用戶列表。 如果單擊一個用戶，我想將該用戶設置為選定的用戶並刷新部分視圖。 我的代碼如下：

<div id="myPartialView">
@if (@Model.ChosenUser != null)
{
    @Model.ChosenUser.UserName
}                        

<ul>    
    @foreach (var u in Model.Users)
    {
        <li>
            <a href='@Url.Action("ChooseUser", "Controller", new { userId = u.UserId })'>@u.UserName</a>

        </li>
    }
</ul>

該控制器方法返回一個Ok（）; 我當前的代碼將我重定向到一個空白頁面，我必須返回並刷新頁面以查看模型更改。

我的問題是，如何在剃刀操作后僅刷新部分視圖？

Answer 1

您將需要在此處使用Ajax.ActionLink ：

@foreach (var u in Model.Users)
{
    <li>
        @Ajax.ActionLink(u.UserName, // <-- Text to display
             "Choose User", // <-- Action Name
             "Controller", // <-- Controller Name
             new AjaxOptions
             {
                 UpdateTargetId="myPartialView", // <-- DOM element ID to update
                 InsertionMode = InsertionMode.Replace, // <-- Replace the content of DOM element
                 HttpMethod = "GET" // <-- HTTP method  
             })
   </li>
}

helper方法將使用指定的值呈現創建錨標記元素所需的html，並且您需要確保已在主布局中添加了腳本，以使ajax不會顯得過於突出。

為此，您可以在這里查看哪些腳本是必備組件：

如何使用Ajax.ActionLink？

並且您的操作方法應該返回與您的部分視圖所期望的類型相同的模型，並且模型中填充了數據。

請參考以下文章，以詳細了解Ajax Action Link：

http://www.c-sharpcorner.com/UploadFile/abhikumarvatsa/ajax-actionlink-and-html-actionlink-in-mvc/