MVC4 razor accessing JsonResult data from my model in client side javascript

Question

I am working on an MVC4 razor project. I have a list of role objects that I store on my model as a jsonResult intended to be used in my client-side javascript.

//Model
public JsonResult JsonRoles { get; set; }

//Controller
var myroles = from r in myroles select new { r.Id, r.Description };
var myModel.JsonRoles = Json(myroles);


//Client side javascript
var data = '@(Model.JsonRoles)';
alert(data);

I tried to access this in javascript as below. When I alert I always get the string "System.Web.Mvc.JsonResult" but what I need is the json data. What am I doing wrong? Can someone please point me in the right direction

Ajay Singh Beniwal · Accepted Answer · 2012-07-11 13:50:12Z

6

I have used ViewData to solve your problem and im able to get the result on the similar lines you can resolve model property also

//Contoller Class 
 public ActionResult CreateRequest()
        {

            var data = new { Id = "one", Make = "Two" };


            ViewData["Data"] = Json(data);

            return View();

        }

//And client side is 

  <script type="text/javascript">
        var data = @Html.Raw(Json.Encode(ViewData["Data"]));
        alert(JSON.stringify(data.Data));
    </script>

answered Jul 11, 2012 at 13:50

Ajay Singh Beniwal

19k11 gold badges84 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

martin Over a year ago

Thanks Ajay. This solved my problem. I had tried Json.Encode and Html.Raw but not both together.

gardarvalur Over a year ago

Good answer, saved me a lot of trouble. However this didn´t work for me unless I used explicit expression @(Html.Raw(Json.Encode(ViewBag.Stuff))); but maybe that´s due to some other aspects of my code. Thanks :)

magritte · Accepted Answer · 2012-07-11 14:01:16Z

0

JsonResult tends to be used as the return type of an action method you intend on calling from Ajax.

You need to use the JavaScriptSerializer to serialize your "myroles" object. E.g.

JavaScriptSerializer serializer = new JavaScriptSerializer();
myModel.JsonRoles = serializer.Serialize(myroles);

Change the type of JsonRoles on your model to string.

public string JsonRoles { get; set; }

Finally, output in your view as e.g.:

var data = @Html.Raw(Model.JsonRoles);
alert(data.id);

answered Jul 11, 2012 at 14:01

magritte

7,71610 gold badges65 silver badges81 bronze badges

1 Comment

martin Over a year ago

HI Tony. Thanks for the answer. I had already attempted this but I was getting escape characters in Json making it invalid. I could remove the escape characters but I was trying to get a better solution that would not require me to do this elsewhere in my project. I went with Ajay's answer below as it got around this problem.

IAbstract · Accepted Answer · 2015-08-12 17:37:53Z

0

In linqpad, I was able to get the data back out via

var x= new System.Web.Mvc.JsonResult();
x.Data=new System.Web.Script.Serialization.JavaScriptSerializer().Serialize("testing, testing");
x.Data.Dump();

also checked with

var x= new System.Web.Mvc.JsonResult();
x.Data=new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(new{test="testing"});
x.Data.Dump();

Which may not be the correct solution for in a razor page. I expect

var data = "@{Model.JsonRoles.ExecuteResult(this.ControllerContext);}";

to be correct in a proper mvc app.

edited Aug 12, 2015 at 17:37

IAbstract

19.9k17 gold badges104 silver badges153 bronze badges

answered Jul 11, 2012 at 13:52

Maslow

18.9k22 gold badges113 silver badges198 bronze badges

Collectives™ on Stack Overflow

MVC4 razor accessing JsonResult data from my model in client side javascript

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related