web-dev-qa-db-ja.com

asp.net-mvc：jsファイルのカミソリ「@」記号

Ajax URLに.csHtml C＃関数を使用するjavascript関数を含む@Url.Content- razorファイルがあります。
ビューから参照される.jsファイルにその関数を移動したい。

問題は、javascriptが@シンボルを「認識」せず、C＃コードを解析しないことです。
「@」記号を使用して、ビューから.jsファイルを参照する方法はありますか？

c#javascriptasp.net-mvcasp.net-mvc-3razor
87
gdoron

HTML5 data-*属性を使用できます。 divなどのDOM要素がクリックされたときに何らかのアクションを実行するとします。そう：

<div id="foo" data-url="@Url.Content("~/foobar")">Click me</div>

そして、別のjavascriptファイルでDOMを控えめに作業できます：

$('#foo').click(function() {
    var url = $(this).data('url');
    // do something with this url
});

これにより、javascriptファイルにサーバー側タグを必要とせずに、マークアップとスクリプトを純粋に分離できます。

87
Darin Dimitrov

まあ私はちょうどそれを行うナゲットでかみそりエンジンを見つけました！意味解決@構文！
その名前はRazorJSです。

Nuget パッケージ

2016アップデート：
パッケージは5年間更新されておらず、プロジェクトのサイトリンクは無効です。このライブラリを使用することはもうお勧めしません。

18
gdoron

片道問題に取り組むには：

JavaScript関数を含む部分ビューをビューに追加します。
この方法で@シンボルとすべてのjavascript関数は、ビューから分離されています。

10
gdoron

次の2つのオプションがあります。

  • 関数でparameterとして値を使用し、ビューで接続します
  • 名前空間を作成し（JSでは悪い習慣と見なされるパブリックレベル変数の代わりに）、この値をページの上部に設定してから、jsで使用します

例えば：

 var MyCompany = 
 {
   MyProject: {
                  MyVariable:""
               }
  };

次に、ビューで設定します。

MyCompany.MyProject.MyVariable = @....

更新

カップリングのせいでどれも良いものではないのではないかと思うかもしれません。これが、スクリプトが実行されている場所に気付かないようにする必要があるため、スクリプトがファイルの最適でない編成の兆候である理由です。

とにかく、ビューエンジンを作成し、かみそりに対してjsファイルを実行し、結果を送り返す3番目のオプションがあります。これはきれいですが、ずっと遅いのでお勧めしません。

9
Aliostad

@変数を.jsファイルに取得するには、グローバル変数を使用し、その.jsファイルを使用しているmvcビューからその変数の値を設定する必要があります。

JavaScriptファイル：

var myValue;

function myFunc() {
  alert(myValue);
}

MVCビューファイル：

<script language="text/javascript">
    myValue = @myValueFromModel;
</script>

関数による呼び出しは、値がビューによって設定された後に発生することを確認してください。

7
Joel Etherton

最近、このトピックについてブログに書きました： 部分的なRazorビューを使用した外部JavaScriptファイルの生成 。

私の解決策は、カスタム属性（ExternalJavaScriptFileAttribute）を使用することです。この属性は、部分的なRazorビューをそのままレンダリングし、それを周囲の<script>タグなしで返します。これにより、有効な外部JavaScriptファイルになります。

4
Marius Schulz

おそらくこれは正しいアプローチではありません。関心の分離を検討する。 JavaScriptクラスにdata injectorが必要です。ほとんどの場合、データはJSONです。

scriptフォルダーにJSファイルを作成し、この参照をViewに追加します

<script src="@Url.Content("~/Scripts/yourJsFile.js")" type="text/javascript"></script>

yourJsFile.jsのJavaScriptリテラルクラスを考えてみましょう。

var contentSetter = {
    allData: {},
    loadData: function (data) {
        contentSetter.allData = eval('(' + data + ')');
    },
    setContentA: function () {
        $("#contentA").html(allData.contentAData);
    },
    setContentB: function () {
        $("#contentB").html(allData.contentAData);
    }
};

クラスも宣言します

public class ContentData
{
    public string ContentDataA { get; set }
    public string ContentDataB { get; set }
}

さて、あなたのActionからこれをしてください：

public ActionResult Index() {
    var contentData = new ContentData();
    contentData.ContentDataA = "Hello";
    contentData.ContentDataB = "World";
    ViewData.Add("contentData", contentData);
}

そしてあなたの見解から：

<div id="contentA"></div>
<div id="contentB"></div>

<script type="text/javascript">
    contentSetter.loadData('@Json.Encode((ContentData) ViewData["contentData"])');
    contentSetter.setContentA();
    contentSetter.setContentB();
</script>
4
Abdul Munim

私は通常、モデルプロパティへのアクセスを必要とするJSを関数でラップし、@ somethingをビューに渡します。例えば

<script type="text/javascript">
function MyFunction(somethingPresentInTheView) {
  alert(somethingPresentInTheView);
}
</script>

ビューで関数呼び出しを追加します（単なる例）：

<input type='button' onclick="MyFunction('@Model.PropertyNeeded')" />
2
BigMike

ビューにそのJSコードを配置する必要があると思われます。私の知る限り、Razorパーサーは.jsファイルを参照しないため、@は機能しません。 PLus、あなたが見つけたように、Javascript自体はこの@文字は、理由もなく、たとえば文字列でぶらぶらしています。

1
Jason Evans