在 ASP.NET MVC Core 3.1 中通过 jQuery 为部分视图附加 html 的问题

Posted 2023-05-08

【中文标题】在 ASP.NET MVC Core 3.1 中通过 jQuery 为部分视图附加 html 的问题

【英文标题】：Issue with appending html for partial view via jQuery in ASP.NET MVC Core 3.1

【发布时间】：2020-11-07 16:27:47

【问题描述】：

我似乎无法找到这个问题的答案，所以这里是：

我创建了一个 ASP.NET MVC Core 3.1 实体框架代码优先迁移应用程序。 在其中一个实体的 Create 视图中，我渲染了我创建的 Partial View：

        <div class="container" id="Things">
            <partial name="_CreateThingPartial" for="Things[0]" />
        </div>

这渲染得很好。

我想通过单击按钮在该容器中附加相同部分视图的另一个渲染。这是我当前的 jQuery：

var y = 0;

    $('#addThing').click(function () 
        y = y + 1;
        var newDiv = '<partial name="_CreateThingPartial" for="Things[' + y + ']" />';
        $('#Things').append(newDiv);
    );

但是有了这个，点击按钮什么也没做，我不知道为什么。

如果我只是在视图中添加该 html 行，如下所示：

        <div class="container" id="Things">
            <partial name="_CreateThingPartial" for="Things[0]" />
            <partial name="_CreateThingPartial" for="Things[1]" />
        </div>

效果很好。

如果我这样设置 newDiv：

var newDiv = '<input type="button" value=' + y + ' />';

效果很好！

所以这似乎只是通过 jQuery 使用局部视图的问题。

【参考方案1】：

<partial> 不是 HTML 标记。它是 .NET Core 定义的服务器端标签助手。

考虑您的Things 实体。它存储在数据库中。除非您在 .cshtml 文件中呈现所有实体，否则您不能在不向服务器发送额外请求的情况下将它们放在客户端。

<partial> 标签助手在在服务器渲染生成的 HTML 标记时执行，而 jQuery 在在客户端（例如浏览器）执行。这就是为什么你不能简单地将<partial> 放在你的 jQuery 中并获取你想要的数据。

可能的解决方案

以下代码 sn-ps 向您展示了如何处理此问题的想法。直接复制粘贴是不行的。您必须了解这个概念并进行一些谷歌搜索才能使其正常工作。

您可以在控制器中定义部分操作：

public ActionResult GetThingPartial (int id)

    /* get Thing[id] from database using EF Core */
    var videModel = Thing[id];
    return PartialView( "_CreateThingPartial", viewModel );

使用 jQuery 的 ajax 调用获取部分结果。

在您的 .cshtml 文件中：

var url = '@Url.Action("GetThingPartial", "YourControllerName")';

$.get(url, function(data) 
    /* append the data, which should be the partial HTML, to the corresponding <div> */
);

这篇文章也可能对解决你遇到的问题有所帮助：https://www.c-sharpcorner.com/uploadfile/manas1/sending-partialview-using-jquery-ajax-request-in-asp-net-mvc/

【讨论】：

谢谢 - 这确实有帮助....我最终使用 ajax 而不是 .get 来完成它，类似于您链接的文章中的内容。

很高兴听到这个消息！注意：$.get() 方法是$.ajax() 的简写。如果您在调用 ajax 调用时需要进行一些高级配置，请选择 $.ajax()。 $.get() 这里只是给出了如何处理前端部分的想法（因为 partial action 是这个解决方案的重点。）

【参考方案2】：

partial 不是 html 标记，但与 .net razor 模板如何呈现局部视图有关。所以页面上实际渲染的 HTML 不会是局部的，而是局部文件 _CreateThingPartial 的内容。

但是，当您使用 jQuery 修改页面时，它是在前端完成的，您的剃刀模板的后端逻辑将是未知的。因此，当您尝试添加一个名为 partial 的标签时，它不会被允许，因为在前端这不是一个有效的标签。

为了更好地了解 .net razor 模板如何呈现到前端，我建议您打开查看源代码或检查页面。

【讨论】：

哦，我明白了！谢谢你的解释！那么这是否意味着真的没有办法使用方便的 .net core html 标签助手来做到这一点呢？

标签助手在后端呈现，jquery 在前端执行，所以没有。如果你想在前端进行复杂的 dom 操作，我建议从前端框架开始渲染它，比如 Vue 或 React。但这也可能是矫枉过正，具体取决于网站的范围。