我在我的_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模式，它也非常有效。
其他回答
我能想到的第一个解决方案是使用ViewBag来存储必须呈现的值。
我从来没有试过，如果这个工作从一个局部的观点，但它应该在我看来。
这对我来说很有用，允许我在同一个文件中同时定位javascript和html的部分视图。帮助思维过程中看到html和相关部分在同一部分视图文件。
In View使用了分部视图，叫做_mypartialview。cshtml
<div>
@Html.Partial("_MyPartialView",< model for partial view>,
new ViewDataDictionary { { "Region", "HTMLSection" } } })
</div>
@section scripts{
@Html.Partial("_MyPartialView",<model for partial view>,
new ViewDataDictionary { { "Region", "ScriptSection" } })
}
在局部视图文件
@model SomeType
@{
var region = ViewData["Region"] as string;
}
@if (region == "HTMLSection")
{
}
@if (region == "ScriptSection")
{
<script type="text/javascript">
</script">
}
如果你确实有合法的需要从一个部分运行一些js，这里是你可以做到的，jQuery是必需的:
<script type="text/javascript">
function scriptToExecute()
{
//The script you want to execute when page is ready.
}
function runWhenReady()
{
if (window.$)
scriptToExecute();
else
setTimeout(runWhenReady, 100);
}
runWhenReady();
</script>
我刚刚在我的部分视图上添加了这段代码，解决了这个问题，虽然不是很干净，但它是有效的。你必须确保你渲染的对象的id。
<script>
$(document).ready(function () {
$("#Profile_ProfileID").selectmenu({ icons: { button: 'ui-icon-circle-arrow-s' } });
$("#TitleID_FK").selectmenu({ icons: { button: 'ui-icon-circle-arrow-s' } });
$("#CityID_FK").selectmenu({ icons: { button: 'ui-icon-circle-arrow-s' } });
$("#GenderID_FK").selectmenu({ icons: { button: 'ui-icon-circle-arrow-s' } });
$("#PackageID_FK").selectmenu({ icons: { button: 'ui-icon-circle-arrow-s' } });
});
</script>
我有一个类似的问题，我有一个母版页如下:
@section Scripts {
<script>
$(document).ready(function () {
...
});
</script>
}
...
@Html.Partial("_Charts", Model)
但是部分视图依赖于脚本部分中的一些JavaScript。我通过将部分视图编码为JSON来解决这个问题，将其加载到JavaScript变量中，然后使用它来填充一个div，因此:
@{
var partial = Html.Raw(Json.Encode(new { html = Html.Partial("_Charts", Model).ToString() }));
}
@section Scripts {
<script>
$(document).ready(function () {
...
var partial = @partial;
$('#partial').html(partial.html);
});
</script>
}
<div id="partial"></div>
