如何在MVC4的局部视图中添加脚本?

时间:2013-01-01 20:48:54

标签: asp.net asp.net-mvc razor asp.net-mvc-4 razor-2

这是我在部分视图中的代码

@model Contoso.MvcApplication.Models.Exercises.AbsoluteArithmetic

@using(Html.BeginForm())
{
<div>
    <span style="width: 110px; float:left; text-align:center; font-size:2.5em;">@Model.Number1</span>
    <span style="width: 110px; float:left; text-align:center; font-size:2.5em;">+</span>
    <span style="width: 110px; float:left; text-align:center; font-size:2.5em;">@Model.Number2</span>
    <span style="width: 110px; float:left; text-align:center; font-size:2.5em;">=</span>
    <span>
            @Html.EditorFor(model => model.Result)
            @Html.ValidationMessageFor(model => model.Result)
    </span>
</div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

请注意我的代码底部,我有一个@section,我意识到如果我在那里设置断点,它就不会运行。如果我在_Layout.cshtml中移动该行,则效果很好,但这不是主意。

如何在部分剃刀视图中告诉MVC4我想添加该库?

9 个答案:

答案 0 :(得分:12)

你可以使用 {。1}用于.js文件,@Scripts.Render("~/Scripts/my-script.js")用于css文件。

Nb:它适用于特定的捆绑包更多详细信息 - “http://www.asp.net/mvc/overview/performance/bundling-and-minification

它适用于剃刀中的任何子页面,包括部分视图。 有关这些帮助者的更多信息,请访问谷歌

答案 1 :(得分:8)

您无法从局部渲染布局部分。将节定义移动到父页面或布局。

答案 2 :(得分:5)

查看我的答案How to render a Section in a Partial View,它允许您在任何视图/局部视图中定义脚本和样式。它还负责重复包含。

我个人认为部分不是样式的好方法,而且包含

答案 3 :(得分:4)

此问题没有通用解决方案,但您可以采用以下最简单的方法:

1)您可以创建一组扩展方法,如下所示:

  

https://stackoverflow.com/a/6671766/5208058

2)只需将您的javascript代码移动到单独的局部视图中,然后在主视图上渲染2个部分视图。一个用于主要局部视图,另一个用于脚本,如下所示:

{
    // markup and razor code for Main View here

    @Html.Partial("Main_PartialView")
}

@section Scripts
{
    @Html.Partial("JavaScript_PartialView")
}

希望它有所帮助。

答案 4 :(得分:4)

您可以直接在局部视图html的末尾添加脚本,而不使用脚本部分(因为脚本部分不会在部分视图中呈现)

<script language="javascript">
   // Your scripts here
   // ....
</script>

答案 5 :(得分:2)

这对我有用,允许我在同一个文件中为部分视图配置JavaScript和HTML以便于阅读

在视图中使用部分视图称为&#34; _MyPartialView.cshtml &#34;

<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">
}

答案 6 :(得分:0)

此Stackoverflow页面提供了此问题的完整解决方案:Using sections in Editor/Display templates

TL; DR:只需将Forloop.HtmlHelpers nuget包https://www.nuget.org/packages/Forloop.HtmlHelpers/添加到您的项目中,以允许您从ASP.NET MVC中的Razor部分视图和模板运行Javascript。我亲自将它用于我的MVC 5项目。

答案 7 :(得分:0)

如果只想在某些局部视图中包含特定脚本,并且避免不必要地在整个应用程序中传播它们,则可以执行以下操作:

BundleConfig.cs中定义一个指向空javascript文件的捆绑包:

 bundles.Add(new ScriptBundle("~/bundles/empty").Include(
                    "~/Scripts/empty.js"
            ));

_Layout.cshtml的开头部分,添加以下变量:

@{
        ViewBag.AdditionalBundle = String.IsNullOrEmpty(ViewBag.AdditionalBundle) ? "~/bundles/empty" : ViewBag.AdditionalBundle;
    }

_Layout.cshtml的底部,呈现所需的所有其他包:

@Scripts.Render("~/bundles/lib")
    @Scripts.Render(@ViewBag.AdditionalBundle);
    @RenderSection("scripts", required: false)

最后,在需要任何特定脚本的局部视图中,只需将相应的包添加到变量中即可:

ViewBag.AdditionalBundle = "~/bundles/mySpecificBundle";

部分视图在_Layout.cshtml之前呈现,因此您需要在文件顶部进行验证。它是这样的:如果任何局部视图为ViewBag.AdditionalBundle分配了一个值,则使用它。否则,渲染一个空脚本。

答案 8 :(得分:0)

Noob技巧:在已加载的文件中定义一个函数,并在部分视图加载时调用该函数。

1。有一个单独的js文件,您可以通过通常的捆绑软件加载该文件:

BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/CustomScripts").Include(
    "~/Scripts/Custom/partial-view.js"
));
  1. 像在布局中其他捆绑软件一样加载自定义脚本捆绑软件

_Layout.cshtml

@Scripts.Render("~/bundles/CustomScripts");
  1. 在自定义js文件中定义一个函数,在我们的示例中为OnPartialViewLoad函数:

partial-view.js

function OnPartialViewLoad() {
    // ... your onLoad work
}
  1. 在部分视图的末尾添加document.ready()函数,然后调用onLoaded函数。

partialView.cshtml

<script type="text/javascript">
    $(document).ready(function(){
        OnPartialViewLoad();
    });
</script>