Get first value of Model's List in jQuery (document).ready using Razor?

Question

How can I get the value of the first item from the model's List? My ViewModel:

namespace TestWeb
{
 public class NavViewModel
 {
 public NavViewModel()
 {
 NavStepList = new List<NavStep>();
 }
 public List<NavStep> NavStepList { get; set; }
 }
}

In my View:

@using TestWeb
@model NavViewModel
<script>
 $(document).ready(function () {
 var Testvalue = @Model.NavStepList.First();
 });
</script>

I want the first value of NavStepList. However an error occurs when I call this function:

TestWeb is undefined

I already test with testing value assign to NavStepList but the error still occurs.

My NavStep Class Property:

public class NavStep{
 public int NavStepId { get; set; }
 public int SortId { get; set; }
 public string StepName { get; set; } 
 public string IdentifierKey { get; set; } 
 public bool IsAvailible { get; set; }
}

• Rory McCrossan: You're trying to coerce a class to a string. You need to retrieve the properties of the class and place them in separate JS variables.
• lwin: @RoryMcCrossan Please can you explain more detail?
• Rory McCrossan: I'd need to see the properties of your NavStep class to give you a definitive answer.
• Sanyami Vaidya: You can remove @using TestWeb line and then check.

Answer 1

You could convert your server side view model to a javascript variable using the following:

<script>
 $(document).ready(function () {
 var myModel = @Html.Raw(Json.Encode(Model.NavStepList.First()));
 });
</script>

and then you could access your model properties in javascript:

alert(myModel.NavStepId);
alert(myModel.SortId);
alert(myModel.StepName);
...

Answer 2

Here @Model ought to refer to NavViewModel directly. Also, as Rory said, trying to assign a class, NavStep to a javascript variable isn't going to work out. What you probably want is:

var navStepId = @Model.First().NavStepId;
var sortId = @Model.First().SortId;
var stepName = "@Model.First().StepName"; //wrap strings in "" so javascript recognizes them as such
var identifierKey = "@Model.First().IdentifierKey";
var isAvailable = "@(Model.First().IsAvailable)" === '@true'; //method to convert c# true to javascript true

• parvezalam khan: NavStepProperty model is not mention any where
• lwin: I want all property of NavStep.
• VB Did Nothing Wrong: It's just an example I made up, I don't know what's in the class NavStep. Presumably var TestValue ought to be pointing to one of it's properties, (e.g. NavStepProperty)
• VB Did Nothing Wrong: @Jze in that case you'll probably want a couple of javascript variables to assign each property to, var testvalue1 = ... ; var testvalue2 = ...; edit - have updated my answer since NavStep was included in question
• lwin: @ButtDrivenDevelopment Thanks.I appreciate your suggestion.

Answer 3

Case

The @NavViewModel model exists on server.
jQuery script are running on client (browser)

Problem
How to access server side object on client?

Solution : Serialize sever side object to client

As we can not directly access server-side objects on client We need to serialize the model (full/part).

var flatmodel = [@Html.Raw(Json.Encode(Model.NavStepList.First()))][0];

Now flatmodel is JavaScript variable and we can access property via flatmodel.

• lwin: Thanks,Can i use that json object in ajax.When i use this json object in ajax,IE suddenly crush." Illegal invocation" error message show in Chrome.
• Anil: how are you using this in ajax, can you please add that code part also, before also try to add processData: false to ajax call?
• Anil: @Jze Update in my answer can solve your problem, further you can refer stackoverflow.com/questions/17617263/… and stackoverflow.com/questions/28095567/…