ASP.NET MVCでJavaScriptを使う際のTips

2017/12/01

アプリケーションのルートパスをJavaScriptに渡す

テスト環境と本番環境ではインストール先が異なり、サーバーにアップしたらajax用に記述しているApiのURLが見つからずに動かない、ということがないように。
<script>
var baseUrl = "@Url.Content("~")"; 
</script>
RazorのView(.cshtml)側で上記のように記述しておけば、外部参照している.jsファイルからでもbaseUrlを参照できます。

コントローラからJavaScriptに直接モデルを渡す

Controller

あまりよい例ではありませんが、こちらのモデルを流用。
public ActionResult Index()
{
    DDLViewModel model = new DDLViewModel("001", "003");
    return View(model);
}

View

@section scripts{
<script>
    var data = @Html.Raw(Json.Encode(Model));
</script>
}

実行後のHTMLソース

<script>
    var data = {"SelectCategoryId":"001","SelectGoodsId":"003","CategoryList":[{"Disabled":false,"Group":null,"Selected":false,"Text":"野菜","Value":"002"},{"Disabled":false,"Group":null,"Selected":false,"Text":"果物","Value":"001"}],"GoodsList":[{"Disabled":false,"Group":null,"Selected":false,"Text":"みかん","Value":"001"},{"Disabled":false,"Group":null,"Selected":false,"Text":"バナナ","Value":"002"},{"Disabled":false,"Group":null,"Selected":false,"Text":"いちご","Value":"003"},{"Disabled":false,"Group":null,"Selected":false,"Text":"りんご","Value":"004"},{"Disabled":false,"Group":null,"Selected":false,"Text":"ブドウ","Value":"005"}]};
</script>

IEで実行するとJavaScriptでブレークポイントが利く

VS2017ではChromeでも可能になったようですが、VS2015はIE以外とまらない。
OK キャンセル 確認 その他