2016-07-28 41 views
0

我在我的asp.net mvc web應用程序中使用網格堆棧進行拖放功能。如何將部分視圖中的結果HTML插入到JavaScript代碼中?

我有一個「添加小工具」按鈕....

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

我也有一堆MVC5部分書頁(剃刀),一個文件的每個「小部件」。當我點擊「添加小工具」按鈕時,我想插入一個小工具到頁面上。現在這裏是按鈕的點擊事件的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這個工程和小部件被添加。

任何想法?謝謝!

回答

1

您可能會考慮根據需要異步通過操作方法獲取部分視圖內容。單擊添加按鈕時,對action方法進行ajax調用,該方法將返回html標記,並根據需要將其注入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); 

     }); 


}); 
+0

謝謝。我會試一試。這是addWidget的功能... https://github.com/troolee/gridstack.js/tree/master/doc#addwidgetel-xy-width-height-autoposition-minwidth-maxwidth-minheight-maxheight-id – WebDevGuy2

+1

很棒!非常感謝。 – WebDevGuy2

相關問題