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

Question

我好像找不到这个问题的答案，所以这里是：

我创建了一个 ASP.NET MVC Core 3.1 Entity Framework 代码优先迁移应用程序。 在其中一个实体的创建视图中，我渲染了一个我创建的局部视图：

        <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 使用局部视图的问题。

Answer 1

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

的内容

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

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

Answer 2

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

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

<partial> 标签助手在服务器 呈现结果 HTML 标记 时执行，而 jQuery 被执行 在客户端（例如浏览器）。这就是为什么您不能简单地将 <partial> 放入 jQuery 中并获取所需数据的原因。

可能的解决方案

以下代码片段向您展示了有关如何处理此问题的想法。直接复制粘贴是不行的。您必须理解这个概念并进行一些 google 搜索才能使其发挥作用。

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

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/