如何将部分视图中的结果 HTML 插入到 javascript 代码中？

Question

我在 asp.net mvc web 应用程序中使用 grid-stack 实现 drag/drop 功能。

我有一个 "Add Widget" 按钮....

<button class="btn btn-white btn-primary" id="addwidget" type="submit">Add Widget</button>

我还有一堆 MVC5 部分页面 (Razor)，每个一个文件 "widget"。当我单击 "Add Widget" 按钮时，我想在页面上插入一个小部件。现在是按钮点击事件的js代码...

        $('#addwidget')
        .click(function () {
            var grid = $('.grid-stack').data('gridstack');
            var partialView = @Html.Partial("~/Views/Widgets/_MyImportLatest.cshtml").ToHtmlString();
            grid.addWidget($('<div class="ibox-content" style="height:160px;">' + partialView + '</div>'), 0, 0, 3, 2, true);
        });

是的，那是混合了 js 的 Razor 代码。而且，不幸的是，它根本不喜欢 partialView，正如您可能已经猜到的那样。

我试图基本上将生成的部分视图转换为一个字符串，以便我可以在 addWidget 函数中使用该 html 字符串。如果我对 partialView 进行硬编码，这将起作用并且添加了小部件。

有什么想法吗？谢谢！

Answer 1

您可以考虑根据需要通过action方法异步获取局部视图内容。单击添加按钮时，对将 return html 标记的操作方法进行 ajax 调用，您可以根据需要将其注入 DOM。

public ActionResult GetWidget()
{
  return PartialView("~/Views/Widgets/_MyImportLatest.cshtml")
}

现在在您的点击事件中，调用此操作方法并将响应注入 DOM。我不知道你的 addWidget 方法是做什么的。所以我评论了这一行并使用通用的 jQuery append 方法调用供您参考。

$('#addwidget').click(function () {

        var grid = $('.grid-stack').data('gridstack');
        $.get("/YourControllerName/GetWidget",function(htmlResponse){

            $("#YourContainerDiv").append(htmlResponse);
            // grid.addWidget($('<div>' + htmlResponse + '</div>'), 0, 0, 3, 2, true); 

         });


 });

如何将部分视图中的结果 HTML 插入到 javascript 代码中？

How to insert resulting HTML from a partial view into javascript code?

javascript

asp.net-mvc

jquery

razor

gridstack