MVC アプリケーションの JavaScript ファイルから次のことを行うことは可能ですか?
$(function(){
alert(@ViewBag.someValue);
}
現在、エラーがスローされます:
未定義の XML 名 @ViewBag への参照
MVC アプリケーションの JavaScript ファイルから次のことを行うことは可能ですか?
$(function(){
alert(@ViewBag.someValue);
}
現在、エラーがスローされます:
未定義の XML 名 @ViewBag への参照
現在、これを行う方法はないと思います。Razor エンジンは Javascript ファイルを解析せず、Razor ビューのみを解析します。ただし、Razor ビュー内で変数を設定することで、目的を達成できます。
<script>
var someStringValue = '@(ViewBag.someStringValue)';
var someNumericValue = @(ViewBag.someNumericValue);
</script>
<!-- "someStringValue" and "someNumericValue" will be available in script -->
<script src="js/myscript.js"></script>
Joe がコメントで指摘しているように、上記の文字列値は、単一引用符が含まれていると壊れます。これを完全に鉄壁にしたい場合は、すべての一重引用符をエスケープされた一重引用符に置き換える必要があります。問題は、突然のスラッシュがすべて問題になることです。たとえば、文字列が " foo \' bar
" で、単一引用符を置き換えると、" foo \\' bar
" が表示され、同じ問題に戻ります。(これは連鎖エンコーディングの古くからの問題です。) これを処理する最善の方法は、バックスラッシュと引用符を特別なものとして扱い、それらがすべてエスケープされていることを確認することです。
@{
var safeStringValue = ViewBag.someStringValue
.Replace("\\", "\\\\")
.Replace("'", "\\'");
}
var someStringValue = '@(safeStringValue)';
JavaScript ファイルではありません。
JavaScript ファイルにクラスを含めることができ、ビューでそのクラスの新しいインスタンスをインスタンス化してViewBag
、クラス コンストラクターで値を渡すことができます。
または、それがクラスでない場合、他の唯一の方法はdata
、HTML 要素で属性を使用し、それらを View のプロパティに割り当てて、JS ファイルで取得することです。
次の入力があると仮定します。
<input type="text" id="myInput" data-myValue="@ViewBag.MyValue" />
次に、JS ファイルで次を使用して取得できます。
var myVal = $("#myInput").data("myValue");
HTMLで:
<input type="hidden" id="customInput" data-value = "@ViewBag.CustomValue" />
スクリプトで:
var customVal = $("#customInput").data("value");
これを行うには、JavaScriptファイルをサーバー側で前処理する必要があります。基本的に、それはある種のASP.NETビューになるscript
必要があり、ファイルを参照するタグは、基本的に、そのビューで応答するコントローラーアクションを参照します。
それはあなたが開けたくないワームの缶のように聞こえます。
JavaScriptはクライアント側であるため、値をクライアント側の要素に設定して、JavaScriptと相互作用させてみませんか。これはおそらく間接参照の追加のステップですが、JavaScriptビューを作成するよりもはるかに頭痛の種ではないように思えます。
このようなもの:
<script type="text/javascript">
var someValue = @ViewBag.someValue
</script>
次に、外部JavaScriptファイルはsomeValue
、そのドキュメントのスコープ内でJavaScript変数を参照できます。
あるいは:
<input type="hidden" id="someValue" value="@ViewBag.someValue" />
次に、その非表示の入力にアクセスできます。
JavaScriptファイルを実際にビューとして使用できるようにするための非常に巧妙な方法を考え出さない限り。それは確かに実行可能であり、あなたが抱えている問題を簡単に考えることはできません(ビューエンジンはJavaScriptとRazorについて非常に混乱するため、本当に醜いビューコードを除いて...たくさんの<text>
マークアップを期待してください)したがって、後でコードをサポートする必要がある人にはおそらく直感的ではありませんが、それを行うための巧妙な方法を見つけた場合は、かなりクールです。
ビューを作成し、それを部分ビューとして返します。
public class AssetsController : Controller
{
protected void SetMIME(string mimeType)
{
this.Response.AddHeader("Content-Type", mimeType);
this.Response.ContentType = mimeType;
}
// this will render a view as a Javascript file
public ActionResult GlobalJS()
{
this.SetMIME("text/javascript");
return PartialView();
}
}
次に、GlobalJS ビューで、次のような JavaScript コードを追加します (// を追加すると、ビジュアル スタジオ インテリセンスが Java スクリプトとして読み取るようになります)。
//<script>
$(document).ready(function () {
alert('@ViewBag.PropertyName');
});
//</script>
次に、最終的なビューで、このように JavaScript への参照を追加できます。
<script src="@Url.Action("GlobalJS", "Assets")"></script>
次に、最終的なView ControllerでViewBagsを作成/渡すことができ、JavaScriptでレンダリングされます。
public class MyFinalViewController : Controller
{
public ActionResult Index()
{
ViewBag.PropertyName = "My ViewBag value!";
return View();
}
}
それが役に立てば幸い。
これを行おうとすると、Visual Studio に組み込まれているエラー検出機能がおかしくなることに気付きました。
var intvar = @(ViewBag.someNumericValue);
@(ViewBag.someNumericValue) は何も評価されない可能性があるため、次の誤った JavaScript が生成される可能性があります。
var intvar = ;
someNemericValue が有効な数値データ型に設定されることが確実な場合は、次の手順を実行して Visual Studio の警告を回避できます。
var intvar = Number(@(ViewBag.someNumericValue));
これにより、次のサンプルが生成される場合があります。
var intvar = Number(25.4);
また、負の数に対しても機能します。項目がビューバッグにない場合、Number() は 0 に評価されます。
Visual Studio の警告はもうありません。ただし、値が数値で設定されていることを確認してください。そうしないと、JavaScript インジェクション攻撃や実行時エラーが発生する可能性があります。