Question

我有部分视图，需要页面底部的一些javascript。

主页：

...some html...
<div>
@Html.Partial("_myPartial")
</div>

....more html....

//required JS at BOTTOM -  THIS should also come from above partial
@RenderSection("scripts", required: false)

我的部分观点：

<div id="Slider">
    <img src="http://placehold.it/1000x400&text=[img 1]" />
    <img src="http://placehold.it/1000x400&text=[img 2]" />
    <img src="http://placehold.it/1000x400&text=[img 3]" />
    <img src="http://placehold.it/1000x400&text=[img 4]" />
</div>


@section scripts
{
 <script type="text/javascript">
  $(window).load(function () {
    $('#Slider').orbit();
  });
  </script>
}

但这不起作用 - 脚本部分不包括在内。

我用谷歌搜索，这不受支持......好吧......

......你将如何处理这种情况？

建议是用脚本制作另一部分内容并包括这个.... 不漂亮！

那里有更好的方法吗？

谢谢！

Answer 1

查看呈现页面的来源。你的脚本在定义jQuery之前出现的问题是什么？

你的默认_Layout.cshtml可能有......

<!DOCTYPE html>
<html lang="en">
...
@RenderBody()
...
@Scripts.Render("~/bundles/scripts")
@RenderSection("scripts", required:false)
...
</html>

你需要告诉MVC将你的脚本放在脚本包之后。在你的DoStuff.cshtml中，

...
@using (Html.BeginForm()){ //this bit is in the body of the page 
    @Html.TextBoxFor(m=>m.NewSalary)
    <input type="submit" data-confirmprompt='are you sure?' />
}
...

@section scripts{ //this bit will end up in the scripts section
<script type="text/javascript">
    //http://blogs.msdn.com/b/stuartleeks/archive/2010/12/16/using-asp-net-mvc-and-jquery-to-create-confirmation-prompts.aspx
    //cunning script so you can say 

    $(document).ready(function () {
        $('*[data-confirmprompt]').click(function (event) {
            var promptText = $(this).attr('data-confirmprompt');
            if (!confirm(promptText)) {
                event.preventDefault();
            }
        });
    });
</script>
}

Answer 2

您可以将其包含在部分内容中，然后执行，省略$(window).load：

<div id="Slider">
    <img src="http://placehold.it/1000x400&text=[img 1]" />
    <img src="http://placehold.it/1000x400&text=[img 2]" />
    <img src="http://placehold.it/1000x400&text=[img 3]" />
    <img src="http://placehold.it/1000x400&text=[img 4]" />
</div>


 <script type="text/javascript">
    $('#Slider').orbit();
  </script>

使用RenderSection无效工作从部分视图注入cshtml中的javascript

2 个答案: