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

How does the rendered output look like? F12 and look in the inspector. — Marko
– Marko, Commented Sep 5, 2014 at 16:04

Jot Dhaliwal · Accepted Answer · 2014-09-05 18:50:45Z

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>

        }
    }

edited Sep 5, 2014 at 18:50

Jot Dhaliwal

1,5006 gold badges27 silver badges47 bronze badges

answered Sep 5, 2014 at 18:48

Caffeine addicted

3343 silver badges19 bronze badges

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

3 Comments

Francisco Goldenstein Over a year ago

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 Over a year ago

but brainsmain answer is not working for me @FranciscoGoldenstein ... Is userDied giving wrong way to solve the problem?

Francisco Goldenstein Over a year ago

@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.

Brian Mains · Accepted Answer · 2014-09-05 16:06:20Z

0

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).

answered Sep 5, 2014 at 16:06

Brian Mains

50.8k35 gold badges155 silver badges260 bronze badges

6 Comments

Brian Mains Over a year ago

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 Over a year ago

C# sample added above. Are you using that or VB?

Jot Dhaliwal Over a year ago

if i am applying updating code they are saying that cannot apply indexing to an expression of type "system.collections.generic.Ienumerable"

Brian Mains Over a year ago

You need to change your model to either a class, or make it a list then.

Jot Dhaliwal Over a year ago

how can i acheive that can you tell me please

|

Collectives™ on Stack Overflow

Access MVC model property in Javascript

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related