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

Posted 2023-05-08

【中文标题】在 ASP.NET MVC 中使用 jQuery 渲染局部视图

【英文标题】：Render Partial View Using jQuery in ASP.NET MVC

【发布时间】：2010-12-06 21:47:36

【问题描述】：

如何使用 jquery 渲染局部视图？

我们可以像这样渲染局部视图：

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

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

【问题讨论】：

你也可以看看下面的文章。 tugberkugurlu.com/archive/… 它遵循不同的方法并增强了方式。

愚蠢的问题。 UserDetails 是作为 cshtml 页面的部分视图：UserDetails.cshtml？我正在尝试加载部分视图。通常我会使用：@Html.Partial("~/Views/PartialViews/FirstPartialViewTwo.cshtml")

@GeorgeGeschwend，在这里没有什么是愚蠢的，直到有人可以回应它。 UserDetails(UserDetails.cshtml) 是用户控制器内的部分视图。与标记答案的 cmets 一样，最好使用 Url.Action 而不是硬编码视图的完整路径。

【参考方案1】：

您不能仅使用 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);         
    );
);

用户控制器有一个名为 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 操作。我不确定“用户”是干什么用的。

我只是使用了一些“可能的”控制器和动作名称，因为您没有包含任何我们可以通过的代码。只需将“详细信息”替换为您的操作，将“用户”替换为您的控制器名称即可。

再次感谢 tvanfosson 的精彩回答。

知道这将如何与 Razor 一起使用吗？试过 $.get("@Url.Action(\"Manifest\",\"Upload\", new id = " + key + " )", function(data) $("") .replaceWith(data); );

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

【参考方案2】：

我使用 ajax 加载来做到这一点：

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

【讨论】：

一般来说，我认为你最好使用 Url.Action 助手而不是硬编码路径。如果您的网站位于子目录而不是根目录中，这将会中断。使用帮助程序可以解决该问题，并允许您添加具有动态设置值的参数。

你可以做 $('#user_content').load('@Url.Content("~/User/UserDetails")') 来解决这个问题 - 如果我需要，我经常使用这种方法javascript 在 url 末尾添加查询字符串参数

在这个答案中，UserDetails 是一个动作的名称，而不是部分视图，对吧？

@Prasad : Urls 应始终使用 @Url.Action("ActionName","ControllerName", new area = "AreaName" ) 进行评估，而不是使用 Handcoding。

@PKKG。 @Url.Action() 仅在 Razor 中进行评估。如果 OP 想要将他们的代码放在单独的 js 文件中并引用它，这不起作用。

【参考方案3】：

@tvanfosson 的回答令人震惊。

不过，我建议对 js 进行改进并进行小型控制器检查。

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

更多信息请访问：What's the difference between jQuery's replaceWith() and 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);

【参考方案4】：

您可以尝试的另一件事（基于 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"？跨度>

不，每个函数循环遍历所有具有 data-actionurl 属性的 html 元素，并通过调用 action 方法的 ajax 请求来填充它。这么多个<div class="renderaction fade-in" ...></div> 元素。

【参考方案5】：

您需要在控制器上创建一个操作，以返回“UserDetails”部分视图或控件的渲染结果。然后只需使用 jQuery 的 Http Get 或 Post 调用 Action 以获取要显示的渲染 html。

【讨论】：

如何在这个jQuery函数中设置刷新更新数据的时间间隔

【参考方案6】：

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

【参考方案7】：

如果您需要引用动态生成的值，您还可以在 @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);
    

【参考方案8】：

我是这样做的。

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

详细方法：

public IActionResult Details()
        

            return PartialView("Your Partial View");