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>