使用 html razor 重新加载部分视图
Reload partial view using html razor
我的模型中有这个简单的用户列表。
如果我们单击一个用户,我想将该用户设置为所选用户并刷新局部视图。
我的代码如下所示:
<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>
控制器方法returns一个Ok();
我当前的代码将我重定向到一个空页面,我必须返回并刷新页面才能看到模型更改。
我的问题是,如何在剃须刀操作后仅刷新此部分视图?
您需要在此处使用 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>
}
辅助方法将渲染 html 需要创建具有指定值的锚标记元素,并且您需要确保在主布局中添加了脚本以保持不显眼 ajax .
为此你可以在这里查看,需要哪些脚本是先决条件:
How to use Ajax.ActionLink?
并且您的操作方法应该返回您的局部视图期望模型中填充的数据类型相同的模型。
请参考以下post详细了解Ajax操作Link:
http://www.c-sharpcorner.com/UploadFile/abhikumarvatsa/ajax-actionlink-and-html-actionlink-in-mvc/
我的模型中有这个简单的用户列表。 如果我们单击一个用户,我想将该用户设置为所选用户并刷新局部视图。 我的代码如下所示:
<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>
控制器方法returns一个Ok(); 我当前的代码将我重定向到一个空页面,我必须返回并刷新页面才能看到模型更改。
我的问题是,如何在剃须刀操作后仅刷新此部分视图?
您需要在此处使用 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>
}
辅助方法将渲染 html 需要创建具有指定值的锚标记元素,并且您需要确保在主布局中添加了脚本以保持不显眼 ajax .
为此你可以在这里查看,需要哪些脚本是先决条件:
How to use Ajax.ActionLink?
并且您的操作方法应该返回您的局部视图期望模型中填充的数据类型相同的模型。
请参考以下post详细了解Ajax操作Link:
http://www.c-sharpcorner.com/UploadFile/abhikumarvatsa/ajax-actionlink-and-html-actionlink-in-mvc/