私が持って.csHtml使用していますJavaScript関数と-razorファイル@Url.ContentAJAX URLのためのC＃関数の内部を。
その関数を.js自分のビューから参照されるファイルに移動したいと思います。
問題は、JavaScriptが@シンボルを「認識」せず、C＃コードを解析しないことです。「@」記号を使用してビューからファイル
を参照する方法はあり.jsますか？
回答:
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ファイルにサーバー側のタグを一切必要とせずに、マークアップとスクリプトを完全に分離できます。
さて、私はそれを行うかみそりエンジンをnugetで見つけました！意味は@構文を解決します！
名前はRazorJSです。
Nugetパッケージ
2016更新：
パッケージは5年間更新されておらず、プロジェクトサイトリンクは無効です。このライブラリの使用を推奨しなくなりました。
この問題に取り組む1つの方法は次のとおりです。
ビューにJavaScript関数を含む部分ビューを追加します。
これにより、@シンボルを使用でき、すべてのjavascript関数がビューから分離されます。
次の2つのオプションがあります。
例えば：
var MyCompany =
{
MyProject: {
MyVariable:""
}
};そして、あなたの見解で、それを設定してください：
MyCompany.MyProject.MyVariable = @....カップリングのためにどれも良いことではないのではないかと思うかもしれませんが、それは本当です。jsとビューをカップリングしています。これが、スクリプトが実行されている場所を知らないようにする必要がある理由です。これは、ファイルの最適化されていない編成の症状です。
とにかく、ビューエンジンを作成し、かみそりに対してjsファイルを実行して結果を返す3番目のオプションがあります。これはすっきりしていますが、速度が非常に遅いため、お勧めしません。
得るために@あなたの.jsに変数を使用すると、グローバル変数を使用しているの.jsファイルを利用しているMVCのビューからその変数の値を設定する必要がありますファイル。
JavaScriptファイル：
var myValue;
function myFunc() {
alert(myValue);
}MVCビューファイル：
<script language="text/javascript">
myValue = @myValueFromModel;
</script>ビューによって値が設定された後で、関数の呼び出しが発生することを確認してください。
おそらくこれは正しいアプローチではありません。懸念の分離を検討しています。あなたは持っている必要がありdata injector、あなたの上JavaScriptのクラスとのデータがあり、ほとんどのケースですJSON。
scriptフォルダにJSファイルを作成し、この参照をView
<script src="@Url.Content("~/Scripts/yourJsFile.js")" type="text/javascript"></script>さて、JavaScriptあなたの中でリテラルクラスを考えてくださいyourJsFile.js：
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>最近、このトピックについてブログに投稿しました：部分的なRazorビューを使用した外部JavaScriptファイルの生成。
私の解決策はExternalJavaScriptFileAttribute、部分的なRazorビューをそのままレンダリングし、周囲の<script>タグなしでそれを返すカスタム属性（）を使用することです。これにより、有効な外部JavaScriptファイルになります。
私は通常、モデルプロパティへのアクセスを必要とするJSを関数でラップし、ビューで@somethingを渡します。例えば
<script type="text/javascript">
function MyFunction(somethingPresentInTheView) {
alert(somethingPresentInTheView);
}
</script>ビューで私は（ほんの一例）を介して関数呼び出しを追加します：
<input type='button' onclick="MyFunction('@Model.PropertyNeeded')" />私はあなたがそのJSコードをビューに置く必要があることに行き詰まっていると思います。Razorパーサーは、私の知る限り、.jsファイルを調べないため、使用@するものは何も機能しません。PLus、お気づきのように、Javascript自体は、この@文字が理由もなく、たとえば文字列にぶら下がっているのが嫌いです。