如何將部分視圖中的結果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); 

         });


 });