Passing asp.net mvc model into Javascript function

Question

I am creating a web app in which, I want to pass model data into a Javascript function when user click a button,

Below is my code

<input type="button" id="btnNextAction" class="btn btn-primary" value="JSFunction" onclick="callJS('@Model.NextActionParam');" />

Javascript Function

function callJS(param) {

}

but the value of param is appears as projectName.Models.modelName.NextActionParam

model.NextActionParam is my model which contains some properties like name, id.etc

how can I get the model property with value in Javascript?

A Javascript function can’t possibly understand a .NET object if you don’t parse it in a way that JavaScript can understand (a literal object or a JSON string). — Davide Vitali
– Davide Vitali, Commented Mar 27, 2019 at 6:39

Alex · Accepted Answer · 2019-03-27 06:51:17Z

1

You need to convert Model.NextActionParam to JSON string with Json.Encode() method. Better way is put JSON inside <script> section and set some variable, then use it anywhere.

<script>
    var nextActionParam = @Html.Raw(Json.Encode(Model.NextActionParam));
</script>

<input type="button" id="btnNextAction" class="btn btn-primary" value="JSFunction"
onclick="callJS(nextActionParam)" />

edited Mar 27, 2019 at 6:51

answered Mar 27, 2019 at 6:39

Alex

1,4239 silver badges16 bronze badges

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

2 Comments

Ibrahim Shaikh Over a year ago

Tried this but getting error, Uncaught SyntaxError: Invalid or unexpected token

onclick="callJS('{"NextAction":null,"RegId":459405,"CurrId":0,"SurveyId":203,"SurveyType":0,"WatchParameters":"hFlkVcpTCCoI2lnA"}');" />

Alex Over a year ago

If pass JSON string in attribute you need to escape " char. So, better replace this code in <script> section.

Collectives™ on Stack Overflow

Passing asp.net mvc model into Javascript function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related