Update model with Ajax Post

Question

I'm trying to update the Model with a background Ajax Post, below is my existing code

Javascript (Jquery)

var url = '@Url.Action("UpdateValue", "MyController")';
$.post(url, $('form').serialize(), function (view) {
     //...
});

Controller

[HttpPost]
public ActionResult UpdateValue(MyViewModel model)
{
    model.FileName = "NewValue";
    return Json(new { success = true });
}

This code posts the existing model to controller and then I'm updating the field FileName, but this does not seem to retain the updated value ("NewValue"). How to make it update the existing model with new value?

where is your Jsonresultbehaviour.allowget in json return???? — Kartikeya Khosla
– Kartikeya Khosla, Commented Jul 29, 2014 at 14:55

Brian Mains · Accepted Answer · 2014-07-29 14:55:26Z

3

Setting model.FileName in the action doesn't do anything to the UI or the database. It depends on what you are trying to update, but if you are trying to update the UI, you would need to push the model back down to the client, and then reload the UI via client-JavaScript (since you are doing an AJAX post with JQuery).

answered Jul 29, 2014 at 14:55

Brian Mains

50.8k35 gold badges155 silver badges260 bronze badges

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

5 Comments

Nalaka526 Over a year ago

Actually I do not want to display anything on the UI, but to update the values in the model to save them by posting the whole model later..

Artur Kedzior Over a year ago

Read a bit about the concept of model binding.codeproject.com/Articles/710776/… .Your MyViewModel only exists during the POST call so as Brian Mains explained you have to reload the UI if you want to retain the new value.

Brian Mains Over a year ago

"to update the values in the model to save them by posting the whole model later" - don't understand this part, could you elaborate?

Nalaka526 Over a year ago

Here I'm uploading images to server with java-script code and on success image upload I need to add file names to some variable (with comma separated or something), and finally with a Save button I need to save all the file names to database. So I need to update the fileNames field (in Model) each time a file is uploaded. Did I make it clear?? :)

Brian Mains Over a year ago

I think so, but it's much more complicated than setting a model name. The model is stateless and not persisted, so once you leave the action, anything passed back from the action is sent to the client and the model is gone. So you'd want to update the names in the database, then pass the names to the client as JSON, and read the names and display them (if you need to; however, if they are in sync, then you don't have to worry).

Artur Kedzior · Accepted Answer · 2014-07-29 22:17:50Z

0

How about sending back the updated model:

[HttpPost]
public ActionResult UpdateValue(MyViewModel model)
{
    model.FileName = "NewValue";
    return Json(model);
}

Then in your $.post you can read the response and update your field.

As Brain Mains commented, you can't persist the model. Model is just nice way of accessing POSTed values.

Let's assume you are posting more values than FileName. So instead of doing this:

Request.Form["FileName"]; 
Request.Form["Id"]; 
Request.Form["Size"];

You just do this:

model.FileName
model.Id
model.Size

It's a lot cleaner and nicer to work with.

So If you follow the process of posting data:

User clicks a button > data is submitted via ajax > arrives to the asp.net engine > engine binds submitted data to the model > model is passed to controller > controller returns a result (and in this moment ... hackemate! ... the model is gone)

edited Jul 29, 2014 at 22:17

answered Jul 29, 2014 at 15:09

Artur Kedzior

4,2831 gold badge44 silver badges65 bronze badges

1 Comment

Nalaka526 Over a year ago

Can I update the Model values only without reloading/refreshing the page?

Collectives™ on Stack Overflow

Update model with Ajax Post

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related