How do I update a model value in JavaScript in a Razor view?

Question

I want to update model value in JavaScript as below but it is not working.

function updatePostID(val)
{
    @Model.addcomment.PostID = val;
}

in Razor view as shown below

foreach(var post in Model.Post)
{
    <br/>
    <b>Posted by :</b> @post.Username <br/>
    <span>@post.Content</span> <br/>
    if(Model.loginuser == Model.username)
    {
        @Html.TextAreaFor(model => model.addcomment.Content)
        <button type="submit" onclick="updatePostID('@post.PostID');">Add Comment </button>
    }
}

Can anyone tell me how to assign model value in JavaScript?

Solution 1

This should work

function updatePostID(val)
{
    document.getElementById('PostID').value = val;

    //and probably call document.forms[0].submit();
}

Then have a hidden field or other control for the PostID

@Html.Hidden("PostID", Model.addcomment.PostID)
//OR
@Html.HiddenFor(model => model.addcomment.PostID)

Solution 2

The model (@Model) only exists while the page is being constructed. Once the page is rendered in the browser, all that exists is HTML, JavaScript and CSS.

What you will want to do is put the PostID in a hidden field. As the PostID value is fixed, there actually is no need for JavaScript. A simple @HtmlHiddenFor will suffice.

However, you will want to change your foreach loop to a for loop. The final solution will look something like this:

for (int i = 0 ; i < Model.Post; i++)
{
    <br/>
    <b>Posted by :</b> @Model.Post[i].Username <br/>
    <span>@Model.Post[i].Content</span> <br/>
    if(Model.loginuser == Model.username)
    {
        @Html.HiddenFor(model => model.Post[i].PostID)
        @Html.TextAreaFor(model => model.addcomment.Content)
        <button type="submit">Add Comment</button>
    }
}

Solution 3

You could use jQuery and an Ajax call to post the specific update back to your server with Javascript.

It would look something like this:

function updatePostID(val, comment)
{

    var args = {};
    args.PostID = val;
    args.Comment = comment;

    $.ajax({
     type: "POST",
     url: controllerActionMethodUrlHere,
     contentType: "application/json; charset=utf-8",
     data: args,
     dataType: "json",
     success: function(msg) 
     {
        // Something afterwards here

     }
    });

}

Comments

[michaeld]

Hi Jason, i have modified with adding more code, here we have foreach loop so onclick of button should capture that post id to model value in javascript. I think for this case html hidden won't work. Also i am passing model to action method so "commentPostID" property cannot be accessed instead I want to update Model.addcomment.PostID with post id value.

[von v.]

It will work, just do a: <button type="submit" onclick="updatePostID('@Model.Post[i].PostID');">Add Comment </button>

[michaeld]

if i use hidden html extension in the foreach loop the html generated is <input id="addcomment_PostID" name="addcomment.PostID" type="hidden" value="" /> foreach post document.getElementById('addcomment_PostID').value = val; ,so which addcomment_PostID will get updated is point and not working. itried putting it outside the foreach and it worked . thanks.

[codingbiz]

It's not clear from your question how you want to access the PostID. If multiple are generated, it still depends on how you want to handle them - as array of controls or as individual. If the latter, then you'll need to use Html.Hidden("PostID_"[email protected]). You can pass this to the JavaScript function. But I can say I fully understand what you are trying to do. They won't turn up in your model as the id/name are now not known beforehand

[Topman]

It helped me. Thanks for sharing.