我在我的_Layout.cshtml中定义了这个部分
@RenderSection("Scripts", false)
我可以很容易地从视图中使用它:
@section Scripts {
@*Stuff comes here*@
}
我正在努力解决的问题是如何从局部视图将一些内容注入到这个部分中。
让我们假设这是我的视图页面:
@section Scripts {
<script>
//code comes here
</script>
}
<div>
poo bar poo
</div>
<div>
@Html.Partial("_myPartial")
</div>
我需要在脚本部分中从_myPartial partial视图中注入一些内容。
我该怎么做呢?
当前回答
OP的目标是将内联脚本定义到他的Partial View中，我假设这个脚本仅特定于该Partial View，并将该块包含到他的脚本部分中。
我明白他想要局部视图是独立的。这个想法类似于使用Angular时的组件。
我的方法是将脚本原样保存在Partial View中。现在的问题是，当调用Partial View时，它可能会在所有其他脚本(通常被添加到布局页面的底部)之前执行脚本。在这种情况下，您只需让Partial View脚本等待其他脚本。有几种方法可以做到这一点。我之前用过的最简单的方法是在body上使用事件。
在我的布局中，我会在底部有这样的东西:
// global scripts
<script src="js/jquery.min.js"></script>
// view scripts
@RenderSection("scripts", false)
// then finally trigger partial view scripts
<script>
(function(){
document.querySelector('body').dispatchEvent(new Event('scriptsLoaded'));
})();
</script>
然后在我的局部视图(在底部):
<script>
(function(){
document.querySelector('body').addEventListener('scriptsLoaded', function() {
// .. do your thing here
});
})();
</script>
另一种解决方案是使用堆栈来推送所有脚本，并在最后调用每个脚本。其他解决方案，如前所述，是RequireJS/AMD模式，它也非常有效。
其他回答
遵循不引人注目的原则，“_myPartial”并不完全需要将内容直接注入脚本部分。您可以将这些部分视图脚本添加到单独的.js文件中，并从父视图中将它们引用到@scripts部分。
假设您有一个称为_contact的部分视图。Cshtml，您的联系人可以是合法的(姓名)或物理主体(名，姓)。你的视图应该关心被渲染的内容，这可以用javascript实现。所以延迟渲染和JS内部视图可能需要。
我认为唯一可以忽略它的方法是，当我们创建一种不引人注目的方式来处理这种UI关注点时。
还要注意MVC 6将有一个所谓的视图组件，甚至MVC未来也有一些类似的东西，Telerik也支持这样的东西…
OP的目标是将内联脚本定义到他的Partial View中，我假设这个脚本仅特定于该Partial View，并将该块包含到他的脚本部分中。
我明白他想要局部视图是独立的。这个想法类似于使用Angular时的组件。
我的方法是将脚本原样保存在Partial View中。现在的问题是，当调用Partial View时，它可能会在所有其他脚本(通常被添加到布局页面的底部)之前执行脚本。在这种情况下，您只需让Partial View脚本等待其他脚本。有几种方法可以做到这一点。我之前用过的最简单的方法是在body上使用事件。
在我的布局中，我会在底部有这样的东西:
// global scripts
<script src="js/jquery.min.js"></script>
// view scripts
@RenderSection("scripts", false)
// then finally trigger partial view scripts
<script>
(function(){
document.querySelector('body').dispatchEvent(new Event('scriptsLoaded'));
})();
</script>
然后在我的局部视图(在底部):
<script>
(function(){
document.querySelector('body').addEventListener('scriptsLoaded', function() {
// .. do your thing here
});
})();
</script>
另一种解决方案是使用堆栈来推送所有脚本，并在最后调用每个脚本。其他解决方案，如前所述，是RequireJS/AMD模式，它也非常有效。
我解决这个完全不同的路线(因为我很着急，不想实现一个新的HtmlHelper):
我用一个大的if-else语句包装了我的Partial View:
@if ((bool)ViewData["ShouldRenderScripts"] == true){
// Scripts
}else{
// Html
}
然后，我用自定义ViewData调用了两次Partial:
@Html.Partial("MyPartialView", Model,
new ViewDataDictionary { { "ShouldRenderScripts", false } })
@section scripts{
@Html.Partial("MyPartialView", Model,
new ViewDataDictionary { { "ShouldRenderScripts", true } })
}
普路托的想法比较好:
CustomWebViewPage.cs:
public abstract class CustomWebViewPage<TModel> : WebViewPage<TModel> {
public IHtmlString PartialWithScripts(string partialViewName, object model) {
return Html.Partial(partialViewName: partialViewName, model: model, viewData: new ViewDataDictionary { ["view"] = this, ["html"] = Html });
}
public void RenderScriptsInBasePage(HelperResult scripts) {
var parentView = ViewBag.view as WebPageBase;
var parentHtml = ViewBag.html as HtmlHelper;
parentView.DefineSection("scripts", () => {
parentHtml.ViewContext.Writer.Write(scripts.ToHtmlString());
});
}
}
观点\ web . config:
<pages pageBaseType="Web.Helpers.CustomWebViewPage">
观点:
@PartialWithScripts("_BackendSearchForm")
部分(_BackendSearchForm.cshtml):
@{ RenderScriptsInBasePage(scripts()); }
@helper scripts() {
<script>
//code will be rendered in a "scripts" section of the Layout page
</script>
}
布局页面:
@RenderSection("scripts", required: false)
