Asp.net 在MVC5中使用java脚本代码-放在哪里_Asp.net_Asp.net Mvc_Asp.net Mvc 3_Asp.net Mvc 4_Razor

Asp.net 在MVC5中使用java脚本代码-放在哪里

asp.net asp.net-mvc asp.net-mvc-3 asp.net-mvc-4 razor

Asp.net 在MVC5中使用java脚本代码-放在哪里,asp.net,asp.net-mvc,asp.net-mvc-3,asp.net-mvc-4,razor,Asp.net,Asp.net Mvc,Asp.net Mvc 3,Asp.net Mvc 4,Razor,我有MVC5应用程序，在视图index.cshtml中我需要使用一些java脚本代码，目前我把脚本代码放在视图中，它工作正常。我的问题是我应该把这段代码放在哪里（来自最佳实践）以及应该如何放我从视图中引用它？请提供一个示例。对此，您最好使用Razor@section 在布局中： <html> <head> <title>My Title</title> ..... @Ren

我有MVC5应用程序，在视图index.cshtml中我需要使用一些java脚本代码，目前我把脚本代码放在视图中，它工作正常。我的问题是我应该把这段代码放在哪里（来自最佳实践）以及应该如何放

我从视图中引用它？请提供一个示例。

对此，您最好使用Razor

@section

在布局中：

<html>
     <head>
          <title>My Title</title>
          .....
          @RenderSection("Scripts", false)
     </head>

     <body>
          @RenderBody
     </body>
</html>


我的头衔
.....
@RenderSection（“脚本”，false）
@渲染器

在你看来：

<div id="container">
      <h3>Welcome!</h3>
      ...
</div>

@section Scripts
{
    <script type="text/javascript">
        // your script goes here
    </script>
}


欢迎
...
@节脚本
{
//你的剧本在这里
}

有些人更喜欢将

@RenderSection（“Scripts”）

放在

标记之前。

如果您有HTML 5模板，那么将JavaScript代码放在哪里并不重要，如果您有XHTML模板，则应将代码放在

标记中

现在有了最佳实践，现在的最佳实践是将所有JS代码放在

结束标记之前。通过这种方式，您可以确保浏览器已解析html元素标记

在进入生产环境时，最好将所有JS连接到一个.JS文件中，然后将其缩小，这样，客户端浏览器只需要获取一个小的JS文件

缩小你的代码术语minify in frontend code（css/js）代表一个过程，在这个过程中，您可以修剪所有空格和换行符，并且函数范围变量可以替换为一个较短的名称，通常只是一个元音

function foo(someVar){
   return someVar;
}

当缩小被替换为：

function foo(e){return e}

在

MVC4

中，捆绑和缩小功能可以帮助您实现这一点。在

MVC5

中，我不太确定

进一步阅读：

我在下面写下的方法是完全从视图中提取JavaScript的方法

更好地维护（js问题->查看js文件而不是视图）
模块化方法
清晰分离
通过设计更好地理解

在HTML5中，使用

数据

属性传递

模型

中的变量。这对将变量从MVC（您的视图模型）移植到javascript有很大帮助。这还允许将javaScript存储在单独的文件中，就像在MVC环境中一样

1.1将c#绑定到HTML

<div class="news" data-js-params="websiteName=@LocationWebsiteHelper.CurrentLocationWebsiteName()&amp;languageName=@languageName&amp;page=0&amp;itemsPerPage=@Model.MaxNumberOfItems">

1.3将HTML数据转换为js对象文本

@RenderSection("AdditionalJS", false)

/// <summary>
/// Register the Javascript bundles
/// Separated in libJs, projectJs and polyfillJs
/// </summary>
/// <param name="bundles"></param>
private static void RegisterScripts(BundleCollection bundles)
{
    // usage for libraries
    bundles.Add(new ScriptBundle(
            "~/bundles/libJs").Include(
            "~/Design/js/lib/*.js"
    ));

    // project object
    bundles.Add(new ScriptBundle(
            "~/bundles/projectJs").Include(
            "~/Design/js/project.dev.js",
            "~/Design/js/classes/*.js",
            "~/Design/js/components/*.js"
    ));

    // usage for browser support
    bundles.Add(new ScriptBundle(
            "~/bundles/polyfillJs").Include(
            "~/Design/js/polyfills/*.js"
    ));
}

/// <summary>
/// Render scripts inside conditional comments
/// http://stackoverflow.com/questions/12865939/mvc4-bundling-minification-with-ie-conditional-comments
/// </summary>
/// <param name="ie"></param>
/// <param name="paths"></param>
/// <returns></returns>
public static IHtmlString RenderConditionalScripts(string ie, params string[] paths)
{
    var tag = string.Format("<!--[if {0}]>{1}<![endif]-->", ie, Scripts.Render(paths));
    return new MvcHtmlString(tag);
}

考虑到这些函数，您可以将任何类似查询字符串的变量传递到对象文本中

var dataParams = convertQsToLiteral($('.news').data('js-params')); // get data attr
var urlParams = convertQsToLiteral(window.location.search.substr(1)); // get url query string

1.4示例：扩展和覆盖对象文本的JS模块化设置

@RenderSection("AdditionalJS", false)

/// <summary>
/// Register the Javascript bundles
/// Separated in libJs, projectJs and polyfillJs
/// </summary>
/// <param name="bundles"></param>
private static void RegisterScripts(BundleCollection bundles)
{
    // usage for libraries
    bundles.Add(new ScriptBundle(
            "~/bundles/libJs").Include(
            "~/Design/js/lib/*.js"
    ));

    // project object
    bundles.Add(new ScriptBundle(
            "~/bundles/projectJs").Include(
            "~/Design/js/project.dev.js",
            "~/Design/js/classes/*.js",
            "~/Design/js/components/*.js"
    ));

    // usage for browser support
    bundles.Add(new ScriptBundle(
            "~/bundles/polyfillJs").Include(
            "~/Design/js/polyfills/*.js"
    ));
}

/// <summary>
/// Render scripts inside conditional comments
/// http://stackoverflow.com/questions/12865939/mvc4-bundling-minification-with-ie-conditional-comments
/// </summary>
/// <param name="ie"></param>
/// <param name="paths"></param>
/// <returns></returns>
public static IHtmlString RenderConditionalScripts(string ie, params string[] paths)
{
    var tag = string.Format("<!--[if {0}]>{1}<![endif]-->", ie, Scripts.Render(paths));
    return new MvcHtmlString(tag);
}

结合jQuery的

$.extend（）

函数，您现在可以用模块化方法覆盖javascript对象（考虑到js文件/模块的所有闭包，如下所示）：

1.5初始化js模块

var module = new ProjectName.Module({ idea: 'even better' });

2.1向视图中添加脚本/css

@RenderSection("AdditionalJS", false)

/// <summary>
/// Register the Javascript bundles
/// Separated in libJs, projectJs and polyfillJs
/// </summary>
/// <param name="bundles"></param>
private static void RegisterScripts(BundleCollection bundles)
{
    // usage for libraries
    bundles.Add(new ScriptBundle(
            "~/bundles/libJs").Include(
            "~/Design/js/lib/*.js"
    ));

    // project object
    bundles.Add(new ScriptBundle(
            "~/bundles/projectJs").Include(
            "~/Design/js/project.dev.js",
            "~/Design/js/classes/*.js",
            "~/Design/js/components/*.js"
    ));

    // usage for browser support
    bundles.Add(new ScriptBundle(
            "~/bundles/polyfillJs").Include(
            "~/Design/js/polyfills/*.js"
    ));
}

/// <summary>
/// Render scripts inside conditional comments
/// http://stackoverflow.com/questions/12865939/mvc4-bundling-minification-with-ie-conditional-comments
/// </summary>
/// <param name="ie"></param>
/// <param name="paths"></param>
/// <returns></returns>
public static IHtmlString RenderConditionalScripts(string ie, params string[] paths)
{
    var tag = string.Format("<!--[if {0}]>{1}<![endif]-->", ie, Scripts.Render(paths));
    return new MvcHtmlString(tag);
}

您有几个选项可用于将脚本附加到视图/页面/块：

在baselayout中定义的剖面（仅适用于局部视图，直接包含在baselayout中）
c#
```
ClientResources
```
（这不是MVC中最好的方法，但仍然可行，允许您将外部文件包含到局部视图->视图中）
捆绑（良好或小型化和模块化方法）

2.2.1节的基本布局设置

@RenderSection("AdditionalJS", false)

/// <summary>
/// Register the Javascript bundles
/// Separated in libJs, projectJs and polyfillJs
/// </summary>
/// <param name="bundles"></param>
private static void RegisterScripts(BundleCollection bundles)
{
    // usage for libraries
    bundles.Add(new ScriptBundle(
            "~/bundles/libJs").Include(
            "~/Design/js/lib/*.js"
    ));

    // project object
    bundles.Add(new ScriptBundle(
            "~/bundles/projectJs").Include(
            "~/Design/js/project.dev.js",
            "~/Design/js/classes/*.js",
            "~/Design/js/components/*.js"
    ));

    // usage for browser support
    bundles.Add(new ScriptBundle(
            "~/bundles/polyfillJs").Include(
            "~/Design/js/polyfills/*.js"
    ));
}

/// <summary>
/// Render scripts inside conditional comments
/// http://stackoverflow.com/questions/12865939/mvc4-bundling-minification-with-ie-conditional-comments
/// </summary>
/// <param name="ie"></param>
/// <param name="paths"></param>
/// <returns></returns>
public static IHtmlString RenderConditionalScripts(string ie, params string[] paths)
{
    var tag = string.Format("<!--[if {0}]>{1}<![endif]-->", ie, Scripts.Render(paths));
    return new MvcHtmlString(tag);
}

2.2.2使用局部视图

@section AdditionalJS { <script> var module = new ProjectName.Module({ idea: @Model.idea }); </script> }

@Html.Raw(Html.RequiredClientResources(RenderingTags.Header))

ClientResources.RequireScript("/Design/js/projectname.module.js").AtHeader();
2.3.2视图中的使用视图

@section AdditionalJS { <script> var module = new ProjectName.Module({ idea: @Model.idea }); </script> }

@Html.Raw(Html.RequiredClientResources(RenderingTags.Header))

ClientResources.RequireScript("/Design/js/projectname.module.js").AtHeader();
2.4.1脚本的BundleConfig设置

@RenderSection("AdditionalJS", false)

/// <summary> /// Register the Javascript bundles /// Separated in libJs, projectJs and polyfillJs /// </summary> /// <param name="bundles"></param> private static void RegisterScripts(BundleCollection bundles) { // usage for libraries bundles.Add(new ScriptBundle( "~/bundles/libJs").Include( "~/Design/js/lib/*.js" )); // project object bundles.Add(new ScriptBundle( "~/bundles/projectJs").Include( "~/Design/js/project.dev.js", "~/Design/js/classes/*.js", "~/Design/js/components/*.js" )); // usage for browser support bundles.Add(new ScriptBundle( "~/bundles/polyfillJs").Include( "~/Design/js/polyfills/*.js" )); } /// <summary> /// Render scripts inside conditional comments /// http://stackoverflow.com/questions/12865939/mvc4-bundling-minification-with-ie-conditional-comments /// </summary> /// <param name="ie"></param> /// <param name="paths"></param> /// <returns></returns> public static IHtmlString RenderConditionalScripts(string ie, params string[] paths) { var tag = string.Format("", ie, Scripts.Render(paths)); return new MvcHtmlString(tag); }

// ///注册Javascript包 ///在libJs、projectJs和polyfillJs中分离 /// /// 专用静态无效注册表脚本（BundleCollection捆绑包） { //图书馆的使用 bundles.Add（新脚本包）( “~/bundles/libJs”）。包括( “~/Design/js/lib/*.js” )); //项目对象 bundles.Add（新脚本包）( “~/bundles/projectJs”）。包括( “~/Design/js/project.dev.js”， “~/Design/js/classes/*.js”， “~/Design/js/components/*.js” )); //浏览器支持的用法 bundles.Add（新脚本包）( “~/bundles/polyfillJs”）。包括( “~/Design/js/polyfills/*.js” )); } /// ///在条件注释中呈现脚本 /// http://stackoverflow.com/questions/12865939/mvc4-bundling-minification-with-ie-conditional-comments /// /// /// /// 公共静态IHtmlString呈现条件脚本（字符串ie，参数字符串[]路径） { var tag=string.Format（“”，即Scripts.Render（路径））；返回新的MvcHtmlString（标记）； }
2.4.2基本布局设置

... <head> ... @BundleConfig.RenderConditionalScripts("lte IE 9", "~/bundles/polyfillJs") @Scripts.Render("~/bundles/libJs") <head> <body> ... @Scripts.Render("~/bundles/projectJs") </body>

。。。 ... @BundleConfig.renderConditionScript（“lte IE 9”，“~/bundles/polyfillJs”） @Scripts.Render（“~/bundles/libJs”） ... @Scripts.Render（“~/bundles/projectJs”）
谢谢，但是你说的缩小是什么意思，你能提供一个例子吗？@shopiaT我刚刚添加了一个缩小的例子，并在底部添加了一个链接，指向asp.NET MVC中的捆绑和缩小功能。请查看该链接以查看microsoft推荐的最佳实践。根据我所说的，脚本保留在“脚本”部分下的视图中，不是吗？此外，我不知道我是否理解我应该在布局中做什么这是我在那里的代码我应该修改它吗@ViewBag.Title-我的ASP.NET应用程序@Styles.Render（“~/Content/css”）@Scripts.Render（“~/bundles/modernizer”）感谢Tim的支持，你写了几种方法，我使用2.2.1和2.2.2，你知道为什么它不工作吗，i、没有调用脚本代码…我假设您不在部分视图中，并且已经做了一个技巧，将一个视图包含到另一个部分视图中。MVC不允许您为此使用
部分。“黑客”，