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?

Answer 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)" />