访问javascript文件中的Model属性

本文关键字：Model 属性 javascript 文件 访问 | 更新日期: 2023-09-27 18:10:25

是否可以在外部Javascript文件中访问Model属性?

。在"somescript.js"文件

var currency = '@Model.Currency';
alert(currency);

On my View

<script src="../../Scripts/somescript.js" type="text/javascript">

这似乎不工作，但是，如果我把javascript直接到视图内的脚本标签，然后它的工作?这意味着必须一直将代码放在页面中，而不是像这样加载外部脚本文件:

@model MyModel;
<script lang=, type=>
var currency = '@Model.Currency';
alert(currency);
</script>

有别的办法吗?

访问javascript文件中的Model属性

我使用数据属性和jQuery解决了这个问题。它使代码非常可读，并且不需要部分视图或通过ViewEngine运行静态javascript。JavaScript文件是完全静态的，将被正常缓存。

Index.cshtml: 

@model Namespace.ViewModels.HomeIndexViewModel
<h2>
    Index
</h2>
@section scripts
{
    <script id="Index.js" src="~/Path/To/Index.js"
        data-action-url="@Url.Action("GridData")"
        data-relative-url="@Url.Content("~/Content/Images/background.png")"
        data-sort-by="@Model.SortBy
        data-sort-order="@Model.SortOrder
        data-page="@ViewData["Page"]"
        data-rows="@ViewData["Rows"]"></script>
}

Index.js: 

jQuery(document).ready(function ($) {
    // import all the variables from the model
    var $vars = $('#Index''.js').data();
    alert($vars.page);
    alert($vars.actionUrl); // Note: hyphenated names become camelCased
});

_Layout。cshtml(可选，但是个好习惯):

<body>
    <!-- html content here. scripts go to bottom of body -->
    @Scripts.Render("~/bundles/js")
    @RenderSection("scripts", required: false)
</body>

没有办法在JS文件中实现MVC/Razor代码。

您应该在HTML(在.cshtml文件中)中设置变量数据，这在概念上是可以的，并且不会违反关注点分离(服务器生成的HTML与客户端脚本代码)，因为如果您考虑一下，这些变量值是服务器关注的。

看看这个(部分但很好)的解决方案:在MVC框架的Javascript文件中使用内联c#

你可以把razor标签作为一个变量传入。

In razor File>

var currency = '@Model.Currency';
doAlert(currency);
JS文件

>

function doAlert(curr){
   alert(curr);
}

我所做的是使用方法调用模式创建一个js对象，然后您可以从外部js文件调用它。由于js使用全局变量，我将其封装以确保不会与其他js库发生冲突。例子:在视图

 @section scripts{
        <script>
            var thisPage = {
                variableOne: '@Model.One',
                someAjaxUrl: function () { return '@Url.Action("ActionName", "ControllerName")'; }            
            };
        </script>
        @Scripts.Render("~/Scripts/PathToExternalScriptFile.js")   
    }

现在在外部页面中，你可以用一个受保护的范围来获取数据，以确保它不会与js中的其他全局变量冲突。

  console.log('VariableOne = ' + thisPage.variableOne);
  console.log('Some URL = ' + thisPage.someAjaxUrl());

也可以将其封装在外部文件中的Module中，甚至可以使其更具防碰撞性。例子:

$(function () {
    MyHelperModule.init(thisPage || {});
});
var MyHelperModule = (function () {
    var _helperName = 'MyHelperModule';
    // default values
    var _settings = { debug: false, timeout:10000, intervalRate:60000};    
    //initialize the module
    var _init = function (settings) {
        // combine/replace with (thisPage/settings) passed in
        _settings = $.extend(_settings, settings);
        // will only display if thisPage has a debug var set to true            
        _write('*** DEBUGGER ENABLED ***');             
        // do some setup stuff              
        // Example to set up interval
        setInterval(
            function () { _someCheck(); }
            , _settings.intervalRate
        );
        return this; // allow for chaining of calls to helper  
    };
    // sends info to console for module
    var _write = function (text, always) {
        if (always !== undefined && always === true || _settings.debug === true) {
            console.log(moment(new Date()).format() + ' ~ ' + _helperName + ': ' + text);
        }
    };
    // makes the request 
    var _someCheck = function () { 
        // if needed values are in settings
        if (typeof _settings.someAjaxUrl === 'function' 
            && _settings.variableOne !== undefined) { 
            $.ajax({
                dataType: 'json'
                , url: _settings.someAjaxUrl()
                , data: {
                    varOne: _settings.variableOne                    
                }
                , timeout: _settings.timeout
            }).done(function (data) {
                // do stuff
                _write('Done');
            }).fail(function (jqxhr, textStatus, error) {                
                _write('Fail: [' + jqxhr.status + ']', true);
            }).always(function () {
                _write('Always');
            });             
        } else {// if any of the page settings don't exist
            _write('The module settings do not hold all required variables....', true);            
        }
    };
    // Public calls
    return {
        init: _init
    }; 
  })();

试试JavaScriptModel (http://jsm.codeplex.com):

只需将以下代码添加到控制器动作中:

this.AddJavaScriptVariable("Currency", Currency);

现在你可以在JavaScript中访问变量"Currency"了。

如果该变量应该在孔站点上可用，则将其放在过滤器中。在文档中可以找到如何从过滤器中使用JavaScriptModel的示例。

你可以试试RazorJs。这很好地解决了无法在js文件中使用模型的问题RazorJs

我遇到了同样的问题，我这样做了:

视图。

`var model = @Html.Raw(Json.Encode(Model.myModel));
 myFunction(model);`

外部js。

`function myFunction(model){
   //do stuff
 }`

相关文章：