Javascript 在ASP.NET MVC中使用jQuery呈现局部视图
如何使用jquery渲染局部视图 我们可以这样渲染局部视图:Javascript 在ASP.NET MVC中使用jQuery呈现局部视图,javascript,jquery,asp.net-mvc,renderpartial,Javascript,Jquery,Asp.net Mvc,Renderpartial,如何使用jquery渲染局部视图 我们可以这样渲染局部视图: <% Html.RenderPartial("UserDetails"); %> 我们如何使用jquery实现同样的功能?您需要在控制器上创建一个操作,返回“UserDetails”部分视图或控件的呈现结果。然后,只需使用Http Get或Post from jQuery调用该操作即可获得要显示的渲染html。您不能仅使用jQuery渲染局部视图。但是,您可以调用一个方法(操作),该方法将为您呈现部分视图,并使用jQ
<% Html.RenderPartial("UserDetails"); %>
我们如何使用jquery实现同样的功能?您需要在控制器上创建一个操作,返回“UserDetails”部分视图或控件的呈现结果。然后,只需使用Http Get或Post from jQuery调用该操作即可获得要显示的渲染html。您不能仅使用jQuery渲染局部视图。但是,您可以调用一个方法(操作),该方法将为您呈现部分视图,并使用jQuery/AJAX将其添加到页面中。在下面的示例中,我们有一个按钮单击处理程序,它从按钮上的数据属性加载操作的url,并发出GET请求,用更新的内容替换部分视图中包含的DIV
$('.js-reload-details').on('click', function(evt) {
evt.preventDefault();
evt.stopPropagation();
var $detailDiv = $('#detailsDiv'),
url = $(this).data('url');
$.get(url, function(data) {
$detailDiv.replaceWith(data);
});
});
其中,用户控制器具有名为“详细信息”的操作,该操作执行以下操作:
public ActionResult Details( int id )
{
var model = ...get user from db using id...
return PartialView( "UserDetails", model );
}
这是假设您的局部视图是一个id为detailsDiv
的容器,这样您就可以用调用结果的内容替换整个视图
父视图按钮
<button data-url='@Url.Action("details","user", new { id = Model.ID } )'
class="js-reload-details">Reload</button>
我已经使用ajax load实现了这一点:
$('#user_content').load('@Url.Action("UserDetails","User")');
@tvanfosson的回答让人震惊 不过,我建议在js中进行改进,并进行一次小型控制器检查 当我们使用
@Url
helper调用一个操作时,我们将收到一个格式化的html。最好是更新内容(.html
),而不是实际的元素(.replaceWith
)
更多关于:
这在树中特别有用,因为树中的内容可以多次更改
在控制器上,我们可以根据请求者重用操作:
public ActionResult Details( int id )
{
var model = GetFooModel();
if (Request.IsAjaxRequest())
{
return PartialView( "UserDetails", model );
}
return View(model);
}
你可以尝试的另一件事(基于tvanfosson的回答)是:
我爱mvc:-)我就是这样做的
$(document).ready(function(){
$("#yourid").click(function(){
$(this).load('@Url.Action("Details")');
});
});
详细信息方法:
public IActionResult Details()
{
return PartialView("Your Partial View");
}
使用标准Ajax调用实现相同的结果
$.ajax({
url: '@Url.Action("_SearchStudents")?NationalId=' + $('#NationalId').val(),
type: 'GET',
error: function (xhr) {
alert('Error: ' + xhr.statusText);
},
success: function (result) {
$('#divSearchResult').html(result);
}
});
public ActionResult _SearchStudents(string NationalId)
{
//.......
return PartialView("_SearchStudents", model);
}
如果需要引用动态生成的值,还可以在@URL.Action后面追加查询字符串参数,如下所示:
var id = $(this).attr('id');
var value = $(this).attr('value');
$('#user_content').load('@Url.Action("UserDetails","User")?Param1=' + id + "&Param2=" + value);
public ActionResult Details( int id, string value )
{
var model = GetFooModel();
if (Request.IsAjaxRequest())
{
return PartialView( "UserDetails", model );
}
return View(model);
}
我一直收到你给出的这个示例代码的错误请求。我按原样复制,只是更改了控制器应该执行的操作。我不确定“用户”是什么意思。我只是使用了一些“可能”的控制器和操作名称,因为您没有包含任何我们可以使用的代码。只需将“详细信息”替换为您的操作,“用户”替换为您的控制器名称。再次感谢tvanfosson的精彩回答。您知道如何使用Razor吗?已尝试$.get(@Url.Action(\“Manifest\”、\“Upload\”、新的{id=“+key+”})”、函数(data){$(“”).替换为(data);})@Zapnologica-如果重新加载整个表,可能需要重新应用插件,因为它最初连接的DOM元素已被替换。最好将它连接到一个以JSON形式返回数据的方法,通常我认为最好使用Url.Action帮助程序,而不是硬编码路径。如果您的网站位于子目录而不是根目录中,则会出现这种情况。使用helper修复了这个问题,并允许您添加具有动态设置值的参数。您可以执行$(“#user_content”).load(“@Url.content(“~/user/UserDetails”))来解决这个问题-如果我需要javascript在Url的末尾添加查询字符串参数,我通常会使用这个方法在这个答案中,
UserDetails
是一个动作的名称,不是局部视图,对吗?@Prasad:Url应该总是使用@Url.action(“动作名”、“控制器名”、新的{area=“arename”})来计算。
而不是手工编码。@PKKG@Action()仅在Razor中计算。如果OP想将代码放在一个单独的js文件中并引用它,这是行不通的。它采用了一种不同的方法并改进了方法。愚蠢的问题。UserDetails是cshtml页面的部分视图:UserDetails.cshtml?我正在尝试加载局部视图。通常我会使用:@Html.Partial(“~/Views/PartialViews/FirstPartialViewTwo.cshtml”)@GeorgeGeschwend,这里没有什么是愚蠢的,除非有人能做出回应。UserDetails(UserDetails.cshtml)是用户控制器内部的部分视图。在标记答案的注释中,最好使用Url.Action,而不是硬编码视图的完整路径。如何设置时间间隔以刷新此jQuery函数中的更新数据为什么要使用每个函数?它是如何工作的?u mena是否类似于:data actionurl=“@Url.Action”(“详细信息”,“用户”,new{id=Model.id}data actionurl=“另一个操作”?否,每个函数都会在所有具有data actionurl属性的html元素上循环,并通过调用对Action方法的ajax请求来填充它。因此有多个
元素。
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity: 0; /* make things invisible upon start */
-webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation: fadeIn ease-in 1;
-o-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
$(document).ready(function(){
$("#yourid").click(function(){
$(this).load('@Url.Action("Details")');
});
});
public IActionResult Details()
{
return PartialView("Your Partial View");
}
$.ajax({
url: '@Url.Action("_SearchStudents")?NationalId=' + $('#NationalId').val(),
type: 'GET',
error: function (xhr) {
alert('Error: ' + xhr.statusText);
},
success: function (result) {
$('#divSearchResult').html(result);
}
});
public ActionResult _SearchStudents(string NationalId)
{
//.......
return PartialView("_SearchStudents", model);
}
var id = $(this).attr('id');
var value = $(this).attr('value');
$('#user_content').load('@Url.Action("UserDetails","User")?Param1=' + id + "&Param2=" + value);
public ActionResult Details( int id, string value )
{
var model = GetFooModel();
if (Request.IsAjaxRequest())
{
return PartialView( "UserDetails", model );
}
return View(model);
}