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

Question

我在asp.net mvc Web应用程序中将网格堆栈用于拖放功能。

我有一个“添加小部件”按钮。

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

我也有一堆MVC5部分页面（Razor），每个“小部件”一个文件。 当我单击“添加小部件”按钮时，我想在页面上插入小部件。 现在，这里是按钮click事件的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);
        });

是的，那是Razor代码与js混合在一起的。 而且，不幸的是，您可能已经猜到它根本不喜欢partialView。

我试图从根本上将结果局部视图转换成字符串，以便可以在addWidget函数中使用该html字符串。 如果我对partialView进行硬编码，则可以正常工作并添加了小部件。

有任何想法吗？ 谢谢！

Answer 1

您可以考虑根据需要通过动作方法异步获取部分视图内容。 单击添加按钮后，对动作方法进行ajax调用，该方法将返回html标记，您可以根据需要将其注入DOM。

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

现在，在您的click事件中，调用此action方法，并将响应注入到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); 

         });


 });