asp.net – 在MVC5中使用java脚本代码

我有MVC5应用程序,在视图index.cshtml我需要使用
一些 java脚本代码,目前我把脚本代码放在视图中,它的工作正常.
我的问题是我应该把这段代码放在哪里(最好的做法),应该如何
我从这个角度来看,请举一个例子.

解决方法

我下面写的方法是我从你的意见中完全提取 JavaScript的方法.

>更好地维护(js问题 – >查看js文件而不是在视图中)
>模块化方法
>明确分离
>更好地通过设计理解

在HTML5中,使用data属性从Model中传递变量.
这有助于将MVC(您的viewmodel)的变量移植到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.2 JS Helper将数据转换为对象文字的功能

虽然建立在jQuery上,我已经写了2个小功能,可以帮助将querystring变量移入对象文字和后面.我使用这些在我的js文件中：

// @param (qs): a query string of key value pairs (without ?)
// @param (keyDelimiter): string : character between values and keys
// @param (valDelimiter): string : character between keys and values
// @return (obj): an object literal
// @example: key1=val1&key2=val2&key3=val3
convertQsToLiteral: function (qs,keyDelimiter,valDelimiter) {
    var arrParams,obj = {};

    if (qs && qs.length) {
        keyDelimiter = keyDelimiter || '&';
        valDelimiter = valDelimiter || '=';
        arrParams = qs.split(keyDelimiter);

        $.each(arrParams,function (i,pair) {
            var arrPair = pair.split(valDelimiter),key = arrPair[0],val = arrPair[1];
             obj[key] = val;
        });
    }
    return obj;
},// @param (literal): an object literal key value paired of one level deep
// @param (keyDelimiter): string  character between values and keys
// @param (valDelimiter): string : character between keys and values
// @return (string): array string representation
// @example: { key1: val1,key2: val2,key3: val3 }
convertLiteralToQs: function (literal,valDelimiter) {
    var arrQs = [],arrPairs,key;

    keyDelimiter = keyDelimiter || '&';
    valDelimiter = valDelimiter || '=';

    for (key in literal) {
        if (literal.hasOwnProperty(key)) {
            arrPairs = [];
            arrPairs.push(key,literal[key]);
            arrQs.push(arrPairs.join(valDelimiter));
        }
    }

    return arrQs.join(keyDelimiter);
},

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

考虑到这些功能,您可以将任何类似变量的查询字符串传递给对象文字.

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模块化设置来扩展和覆盖对象字面值

结合jQuery的$.extend()函数,您现在可以使用模块化方法覆盖JavaScript对象(考虑到所有的闭包js文件/模块看起来像这样)：

window.ProjectName = (function($,projectname){
    // default object literal
    var cfg = {
        // your default options
        idea: 'great'
    };

    // @param (options): something like the cfg object
    projectname.Module = function (options) {

        this.settings = $.extend(true,{},cfg,options); // deep copy
        this.init();

    };

    projectname.Module.prototype = {
        init: function(){
            this.idea = this.settings.idea;
            console.log(this.idea);
        }
    };

    return projectname;
}(window.jQuery,window.ProjectName));

1.5初始化js模块

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

2.1将脚本/ CSS添加到您的视图

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

>在baselayout中定义的部分(仅用于部分视图,直接包含在baselayout中)
> c#ClientResources(不是MVC中最好的方法,但仍然可行,可以将外部文件包含在部分视图中 – >视图中)
捆绑(良好或细化和模块化方法)

2.2.1 baselayout设置段

@RenderSection("AdditionalJS",false)

2.2.2使用部分视图

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

2.3.1 baselayout设置视图中的视图

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

2.3.2视图中的使用视图

ClientResources.RequireScript("/Design/js/projectname.module.js").AtHeader();

2.4.1用于脚本的BundleConfig设置

/// <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
/// https://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.4.2 baselayout设置

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

asp.net – 在MVC5中使用java脚本代码 – 放在哪里

解决方法

猜你在找的asp.Net相关文章