set a value to model using jQuery

Question

How can I set a value to my model using jQuery?

I have an input field (which its id="comment") and I want the text in it to be inserted into @Model.Comment using jQuery.

something like: @Model.Comment = $("#comment").val();

score 49 · Answer 1 · answered Feb 10 '12 at 09:34

49

Far be it from me to disagree with Darin (he's answered half my questions on here!) but will put this up in case the OP or anyone else finds it useful.

By giving an Html attribute to a model value:

@Html.HiddenFor(x => x.Object.Id, new { id = "Id" } )

You can then set the value with Jquery like so

$("#Id").val(5); // or whatever value

answered Feb 10 '12 at 09:34

DevDave

6,700
12
65
99

simple and clever, nice! – J Benjamin Dec 06 '14 at 06:47
Great answer. Very helpful. – giparekh Jan 24 '17 at 12:12
3

I had issues where the model was returning to the controller with null values. I finally figured out that the `HiddenFor()` and inline JS **MUST** be included within the `BeginForm()` closing curly brace / closing form tag. – Lightfire228 Jul 05 '17 at 16:30
Although This is working for storing a value in the hidden field and restore from that, it can't change model values, $('#Id').val() return 5 for example but "@Model.Id" will have old value. – QMaster Jul 08 '18 at 07:02
@QMaster It can change the model value if implemented correctly. It worked for me. As long as the model has a property that the view references and you set the value derived from the hidden field's id, the model prop will be updated. – acousticplanet Dec 10 '20 at 03:11
@acousticplanet Thanks. I will check. – QMaster Dec 14 '20 at 12:20

score 4 · Accepted Answer · answered Dec 15 '11 at 13:24

How can I set a value to my model using jQuery?

This doesn't make any sense. jQuery runs on the client. The Model lives on the server. So by the time jQuery executes on the client, the server side code and the Model is long dead.

What you could do from the client is send an AJAX request to the server passing it the value of the input field so that the server can take respective actions and update the model:

$.ajax({
    url: '@Url.Action("foo")',
    type: 'POST',
    data: { comment: $("#comment").val() },
    function(result) {
        // TODO: process the server results
    }
});

Where on the server you will have a Foo controller action that will be invoked:

[HttpPost]
public ActionResult Foo(string comment)
{
    // TODO: do something with the value of the comment and return a result
    // to the client
    ...
}

Seems to me that Tyler's answer is the better choice. I routinely pass the model to a view and then from the view back to a controller method. — Ed DeGagne, Feb 25 '13 at 21:43
jQuery runs on the client, that's true. If I need to update only one filed of the model in the database at a given time, (Please see the way of Skype edit mode for the user profile) I would do a Ajax call with modified figure and update the value, but the respective field in the model has not updated yet. I need to update that in the client side without calling server again. I think this original question also a same type one. Please advise me. Thanks — Kushan Randima, Jul 01 '16 at 10:56

set a value to model using jQuery

2 Answers2

Linked