我在我的 asp.net mvc Web 应用程序中使用 grid-stack 来实现拖/放功能。
我有一个“添加小部件”按钮......
<button class="btn btn-white btn-primary" id="addwidget" type="submit">Add Widget</button>
我还有一堆 MVC5 部分页面(Razor),每个“小部件”一个文件。当我单击“添加小部件”按钮时,我想在页面上插入一个小部件。现在这是按钮的点击事件的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。
我试图将生成的部分 View 基本上放入字符串中,以便我可以在 addWidget 函数中使用该 html 字符串。如果我对partialView进行硬编码,则该方法有效并且添加了小部件。
有什么想法吗?谢谢!
最佳答案
您可以考虑根据需要通过操作方法异步获取部分 View 内容。单击添加按钮时,对操作方法进行 ajax 调用,该方法将返回 html 标记,您可以根据需要将其注入(inject)到 DOM。
public ActionResult GetWidget()
{
return PartialView("~/Views/Widgets/_MyImportLatest.cshtml")
}
现在,在您的点击事件中,调用此操作方法并将响应注入(inject)回 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);
});
});
关于javascript - 如何将部分 View 中生成的 HTML 插入到 javascript 代码中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38625699/