Access MVC model property in Javascript

Question

I have a follwing view page in MVC project

@foreach (var item in Model)
 {
 <tr>
 <td>
 @Html.DisplayFor(modelItem => item.ControlLabel)
 </td>
 <td>
 @Html.DisplayFor(modelItem => item.ControlType)
 </td>
 <td>
 @Html.DisplayFor(modelItem => item.ControlDatatype)
 </td>
 <td>
 @Html.DisplayFor(modelItem => item.MasterModule.ModuleName)
 </td>
 <td>
 @Html.DisplayFor(modelItem => item.Form.FormName)
 </td>
 <td>
 @Html.ActionLink("Edit", "Edit", new { id = item.ControlID }) |
 @Html.ActionLink("Details", "Details", new { id = item.ControlID }) |
 @Html.ActionLink("Delete", "Delete", new { id = item.ControlID })
 </td>
 </tr>
 }

i want to access ControlType in my javascript function, can i do this ? if yes then please guide me

• Marko: How does the rendered output look like? F12 and look in the inspector.
• Jot Dhaliwal: Sorry i m not getting you can you please explain?

Answer 1

@foreach (var item in Model)
 {
 <tr>
 <td>
 @Html.DisplayFor(modelItem => item.ControlLabel)
 </td>
 <td>
 @Html.DisplayFor(modelItem => item.ControlType)
 </td>
 <td>
 @Html.DisplayFor(modelItem => item.ControlDatatype)
 </td>
 <td>
 @Html.DisplayFor(modelItem => item.MasterModule.ModuleName)
 </td>
 <td>
 @Html.DisplayFor(modelItem => item.Form.FormName)
 </td>
 <td>
 @Html.ActionLink("Edit", "Edit", new { id = item.ControlID }) |
 @Html.ActionLink("Details", "Details", new { id = item.ControlID }) |
 @Html.ActionLink("Delete", "Delete", new { id = item.ControlID })
 </td>
 </tr>
 if (item.ControlType == "blah")
 {
 <script type="text/javascript">
 alert("a");
 </script>
 }
 }

• Francisco Goldenstein: You should separate your HTML and your JS code. If you do that, you can define a JS variable like @BrianMains suggested or define a data attribute in the form. Keep in mind that when you define JS variables, you should avoid defining global variables and instead you should define them in a namespace.
• Jot Dhaliwal: but brainsmain answer is not working for me @FranciscoGoldenstein ... Is userDied giving wrong way to solve the problem?
• Francisco Goldenstein: @userDies answer is not wrong but I don't like creating a conditional JS block in the HTML. HTML and JS should be separated. You can create a JS file and write all your JS code there. And you can set a data attribute in the form tag of the HTML or use a hidden field for ControlType. Always separate HTML and JS and take into account that you cannot use Razor syntax on JS file. Brian suggested you to create a JS variable in the HTML file. That is a common practice even though I don't like it. I prefer to define a hidden field or set a data attribute in the HTML and use it from JS.

Answer 2

Sure, by rendering. You can render anything out in client side javascript like:

<script>
 var controlType = "@(Model[0].ControlType)";
</script>

Or like:

<a href="#" onclick="doSomethingFIrst(@(Model[0].ControlType))">

Something like that; replace 0 with the index in the model's collection that you want. That is fine to do but you have to be careful because you are rendering here, so it has to be something that's usable by client-side javascript (primitive types) or serialized data (using JSON.NET or something like that).

• Brian Mains: Well again item is in your for loop; is this code in your for loop? If not, you need to do Model[0].COntrolType
• Brian Mains: C# sample added above. Are you using that or VB?
• Jot Dhaliwal: if i am applying updating code they are saying that cannot apply indexing to an expression of type "system.collections.generic.Ienumerable"
• Brian Mains: You need to change your model to either a class, or make it a list then.
• Jot Dhaliwal: how can i acheive that can you tell me please