web-dev-qa-db-ja.com

JavaScriptファイルのモデルプロパティにアクセスしますか？

外部JavaScriptファイルのモデルプロパティにアクセスすることはできますか？

例えば「somescript.js」ファイル内

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

私の見解

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

これは機能していないようですが、JavaScriptタグ内のビューにJavaScriptを直接配置すると、機能しますか？つまり、次のように外部スクリプトファイルを読み込む代わりに、コードを常にページに配置する必要があります。

@model MyModel;

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

これを回避する方法はありますか？

c#javascriptasp.net-mvc-3modelrazor
16
BlueChippy

JSファイルにMVC/Razorコードを実装する方法はありません。

HTML（.cshtmlファイル）に変数データを設定する必要があります。これは概念的には問題がなく、懸念事項の分離（サーバー生成HTMLとクライアントスクリプトコード）に違反しないため、これらの変数の値はサーバーの問題。

この（部分的ですがニース）回避策を見てください： MVCフレームワークのJavaScriptファイル内でインラインC＃を使用

9
Ofer Zelig

この問題には、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>
11
arserbin3

あなたができることは、かみそりタグを変数として渡すことです。

かみそりファイル>

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

jSファイルで>

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

私が行ったのは、メソッド呼び出しパターンを使用して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());

また、モジュールの内部で外部ファイルにラップして、さらに衝突防止にすることもできます。例：

$(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
    }; 

  })();
1
Mike

JavaScriptModelを試してください（ http://jsm.codeplex.com ）：

次のコードをコントローラーアクションに追加するだけです。

this.AddJavaScriptVariable("Currency", Currency);

これで、JavaScriptで変数「Currency」にアクセスできます。

この変数が穴のサイトで使用できる場合は、フィルターに入れます。フィルターからJavaScriptModelを使用する方法の例は、ドキュメントにあります。

1
acuntex

私は同じ問題を抱えており、これを行いました：

見る。

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

外部js.

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

いつでもRazorJsを試すことができます。 jsファイルでモデルを使用できないことはほぼ解決します RazorJs

0
ElvisLives