Use View model in Javascript

Question

Scenario:

A partial view has a model, I need to use the value from the model in the javascript which is in seperate .js file.

Currently, I'm using javascript inline so that the value in the model can be used, but what if, the javascript is moved to a seperate file. In this case how do I get those values.

Code

@model IEnumerable<BookSpec.DomainEntities.ContactModel.ContactDataModel>
<label for="SpecFinder">Contact</label>
<select id="SpecFinder" name="state">
@foreach (var name in Model)
{
    <option value="@name.GroupID">@name.GroupName</option>
}
</select>

<script type="text/javascript">
    $(document).ready(function () {
        $("#SpecFinder").change(function(){
            getData(this.value,'@Model.ProductID');
        });
    })
</script>

This is my current example code looks like, and I want to completely move the inline javascript to a seperate file. How can I do it, I also need the values from the model.

@StephenMuecke, Thanks for the response, It's ok for one or two, in some case, I need to use like all the properties in a model, In that case, this would not be feasible right? but this is what I thought initially. — Ranjith Varatharajan
– Ranjith Varatharajan, Commented Jul 16, 2018 at 10:07

Karan · Accepted Answer · 2018-07-16 10:33:50Z

2

Declare global javascript variable model on view as below. Then you can use it anywhere.

<script type="text/javascript">
    var model = @Html.Raw(Json.Encode(Model));
</script>

I will recommend to use above solution. But if you still want to not include any script in partial view then you can render the model inside any hidden div. And access its text and convert it to object using JSON.parse as below. Code like below is not a good practice and like patch work.

HTML

<div id="model" style="display:none;">
    @Html.Raw(Json.Encode(Model))
</div>

Script

var model = JSON.parse($("#model").text());

edited Jul 16, 2018 at 10:33

answered Jul 16, 2018 at 10:05

Karan

12.7k3 gold badges31 silver badges45 bronze badges

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

4 Comments

Ranjith Varatharajan Over a year ago

Thanks @Karan, Is there any way not to use javascript in the partial view?

Zeeshan Adil Over a year ago

@RanjithVaradan I think Karan asked you to declare that globally (where your partial view will be incorporated) so your JS will be able to access it cause of it being in global scope. you can also assign the model object to a window object

piraces Over a year ago

@ZeeshanAdil I think assigning the model object to a window object is a bad idea, since using global variables like this is discouraged.

Zeeshan Adil Over a year ago

@rpfc I agree with you on this. global variables should generally be avoided.

piraces · Accepted Answer · 2018-07-16 10:36:29Z

0

I think @Karan response is a good option. But if you want no inline Javascript, you could assign your model to a hidden HTML input and then retrive the value in whatever other external JS file you want.

With something like Html.Hidden, for example:

@Html.Hidden("myModel", new Microsoft.Web.Mvc.MvcSerializer().Serialize(model, SerializationMode.Signed));

You can choose another serialization mode in the SerializationMode enum.

(Code not tried, but should be close)

edited Jul 16, 2018 at 10:36

answered Jul 16, 2018 at 10:18

piraces

1,3482 gold badges21 silver badges42 bronze badges

2 Comments

user3559349 Over a year ago

You cannot assign a complex object to a hidden input (unless you were to serialize it)

piraces Over a year ago

Thank you @StephenMuecke. The complex object must be serialized (answer edited).

Collectives™ on Stack Overflow

Use View model in Javascript

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related