在ASP.NET MVC中使用jQuery渲染部分视图


223

如何使用jquery渲染部分视图?

我们可以这样渲染部分视图:

<% Html.RenderPartial("UserDetails"); %>

我们如何使用jquery做同样的事情?


您也可以在下面的文章中查看。tugberkugurlu.com/archive/…它采用了不同的方法并增强了方法。
tugberk 2011年

愚蠢的问题。UserDetails是否作为cshtml页面的一部分视图:UserDetails.cshtml?我正在尝试加载部分视图。通常我会使用:@ Html.Partial(“〜/ Views / PartialViews / FirstPartialViewTwo.cshtml”)
George Geschwend

1
@GeorgeGeschwend,这里没有什么愚蠢的,直到有人可以回应为止。UserDetails(UserDetails.cshtml)是用户控制器内部的局部视图。就像标记答案的注释一样,最好使用Url.Action而不是对视图的完整路径进行硬编码。
普拉萨德

Answers:


286

您不能仅使用jQuery呈现部分视图。但是,您可以调用将为您呈现部分视图的方法(操作),并使用jQuery / AJAX将其添加到页面中。在下面,我们有一个按钮单击处理程序,该处理程序从按钮上的data属性加载操作的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);         
    });
});

用户控制器具有名为Details的操作,该操作执行以下操作:

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>

User是控制器名称,details是中的操作名称@Url.Action()。UserDetails部分视图

<div id="detailsDiv">
    <!-- ...content... -->
</div>

我对您提供的这个示例代码的要求一直很差。我按原样复制,只是更改了应该执行的Controller操作。我不确定“用户”是什么意思。
chobo2

1
我只使用了一些“可能”的控制器和动作名称,因为您没有包含我们可以通过的任何代码。只需将“ details”替换为您的操作,并将“ user”替换为您的控制器名称。
tvanfosson

1
再次感谢您的出色回答,tvanfosson。

任何想法这将如何与剃刀?尝试$ .get(“ @ Url.Action(\” Manifest \“,\” Upload \“,新的{id =” + key +“})”,函数(数据){$(“ <div />”) .replaceWith(data);});
Patrick Lee Scott

1
@Zapnologica-如果您要重新加载整个表,则可能需要重新应用该插件,因为它最初连接到的DOM元素已被替换。最好将它连接到以JSON返回数据的方法datatables.net/examples/data_sources/server_side.html
tvanfosson 2014年

152

我已经使用ajax加载来做到这一点:

$('#user_content').load('@Url.Action("UserDetails","User")');

46
通常,我认为您最好使用Url.Action帮助程序,而不要硬编码路径。如果您的网站在子目录中而不是在根目录中,则这将中断。使用帮助程序可以解决该问题,并允许您添加具有动态设置值的参数。
tvanfosson

18
您可以执行$('#user_content')。load('@ Url.Content(“〜/ User / UserDetails”)')来解决该问题-如果我需要将javascript放在querystring参数上,则我经常使用此方法网址末尾
肖森(Shawson)2012年

在这个答案中,UserDetails是动作的名称,而不是局部视图,对吗?
Maxim V. Pavlov 2012年

4
@Prasad:的url应该总是使用进行评估@Url.Action("ActionName","ControllerName", new { area = "AreaName" } ),而不是做Handcoding
Imad Alazani 2013年

3
@PKKG。@ Url.Action()仅在Razor中求值。如果OP希望将其代码放在单独的js文件中并对其进行引用,则此方法将无效。
迈克尔

60

@tvanfosson对他的回答感到震惊。

但是,我建议对js进行改进,并进行少量的控制器检查。

当我们使用 @Url辅助程序调用动作时,我们将收到格式化的html。最好更新内容(.html)而不是实际元素(.replaceWith)。

有关更多信息:jQuery的replaceWith()和html()有什么区别?

$.get( '@Url.Action("details","user", new { id = Model.ID } )', function(data) {
    $('#detailsDiv').html(data);
}); 

这在树中特别有用,树中的内容可以更改多次。

在控制器上,我们可以根据请求者重用该动作:

public ActionResult Details( int id )
{
    var model = GetFooModel();
    if (Request.IsAjaxRequest())
    {
        return PartialView( "UserDetails", model );
    }
    return View(model);
}

11

您可以尝试的另一件事(基于tvanfosson的答案)是:

<div class="renderaction fade-in" 
    data-actionurl="@Url.Action("details","user", new { id = Model.ID } )"></div>

然后在页面的脚本部分中:

<script type="text/javascript">
    $(function () {
        $(".renderaction").each(function (i, n) {
            var $n = $(n),
                url = $n.attr('data-actionurl'),
                $this = $(this);

            $.get(url, function (data) {
                $this.html(data);
            });
        });
    });

</script>

这将使用ajax渲染您的@ Html.RenderAction。

为了使所有这些都变得怪异,您可以使用以下CSS添加淡入效果:

/* 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;
}

男人我爱MVC :-)


你们为什么要行使职能?这个怎么运作?您是否遇到过类似的操作:data-actionurl =“ @ Url.Action(” details“,” user“,new {id = Model.ID} data-actionurl =” Another Action “?
user3818229 2015年

不,每个函数都会循环所有具有data-actionurl属性的html元素,并通过为action方法调用ajax请求来填充它。有多个<div class="renderaction fade-in" ...></div>要素。
彼得

9

您需要在Controller上创建一个Action,该Action返回“ UserDetails”局部视图或控件的渲染结果。然后,只需使用jQuery的Http Get或Post来调用Action即可显示要呈现的html。


如何设置时间间隔以刷新此jQuery函数中的更新数据
Neeraj Mehta

5

使用标准的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);
        }

0

我是这样做的。

$(document).ready(function(){
    $("#yourid").click(function(){
        $(this).load('@Url.Action("Details")');
    });
});

详细方法:

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }

0

如果需要引用动态生成的值,还可以在@ 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);
    }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.