web-dev-qa-db-ja.com

ViewBagからJSONでjavascript変数を設定する方法は?

このインデックスアクションがあります。

public ActionResult Index()
{  
    var repo = (YammerClient) TempData["Repo"];
    var msgCol = repo.GetMessages(); 

    ViewBag.User = repo.GetUserInfo();
    return View(msgCol.messages);
}

GetMessagesはPOCOメッセージのリストを返し、GetUserInfoはユーザーの情報(ID、名前など)を含むPOCOを返します。

ユーザー情報のJSON表現でjavascript変数を埋めたいです。

だから私はビューでこのようなことをしたいでしょう:

...
<script>
    var userInfo = "@ViewBag.User.ToJson()"
</script>
...

私はそれが機能しないことを知っていますが、それを行う方法はありますか?ユーザー情報を取得するためだけにページがロードされたら、ajaxリクエストを行う必要はありません。

20
emzero

ビューでは、このようなことができます

@{
        var jss = new System.Web.Script.Serialization.JavaScriptSerializer();
        var userInfoJson = jss.Serialize(ViewBag.User);
}

javascriptでは、次のように使用できます

<script>


    //use Json.parse to convert string to Json
    var userInfo = JSON.parse('@Html.Raw(userInfoJson)');
</script>
44
sanjeev

このソリューションを単純なオブジェクトに使用していました。しかし、jsオブジェクトに配列を取得する際に問題が発生したため、ここで行ったことをそのままにします。

C#

@{
  using Newtonsoft.Json;
  ViewBag.AvailableToday = JsonConvert.SerializeObject(list);
}

js

var availableToday = JSON.parse('@Html.Raw(ViewBag.AvailableToday)');
6
KnuturO

クライアント側コード:

これは、.Net MVC Controllerへのajax呼び出しです。

var clientStuff;

$.ajax({
    type: 'GET',
    url: '@Url.Action("GetStuff", "ControllerName")',
    data: {},
    dataType: "json",
    cache: false,
    async: false,
    success: function (data) {
        clientStuff = data;
    },
    error: function(errorMsg) {
        alert(errorMsg);
    }
});

サーバー側コード:

コントローラ:

    public JsonResult GetStuff()
    {
        return Json(_manager.GetStuff(), JsonRequestBehavior.AllowGet);
    }

マネージャー:

    public IEnumerable<StuffViewModel> GetStuff()
    {
        return _unitofWork.GetStuff();
    }

作業単位:

    public IEnumerable<StuffViewModel> GetStuff()
    {
        var ds = context.Database.SqlQuery<StuffViewModel>("[dbo].[GetStuff]");
        return ds;
    }

作業単位は、sproc(私がやったように)、リポジトリコンテキスト、linqなどへのクエリになります。ここでは単純にするためにsprocを呼び出していますが、Entity FrameworkとLinqに単純性があると主張できます。 。

2
eilenberger