form submit and redirect to same page with no re render

Question

I have a huger web form in my MVC app. When I click my "save" button, the form is submitted and the values saved, and at the end I redirect to the same page/form. But it re renders the whole form, when it was already loaded and there is no need. How can I avoid that? I want the SAVE button to behave like: save all but continue where I was.

My controller code:

    [HttpPost]
    [ValidateInput(false)]
    public ActionResult FormCol(FormCollection collection)
    {
        ...
        if (Request.Form["DocumentId"] != null)
        {
        ...
        return RedirectToAction("FormCol", new { id = DocumentId });
    }

View:

<input type="hidden" value="@document.Id" name="DocumentId" />

Joe Brunscheon · Accepted Answer · 2014-02-05T23:45:30.810

3

You will need to post your form via Ajax / jquery:

$.ajax({
    url: '/someController/FormCol?variable1=' + $("#input1").val() + '&variable2=' + $("#input2").val(),
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        alert(data); //This is where you would do something based upon a successful save, such as alerting the user to their new document ID or something.
    },
    error: function () {
        alert("error"); //This is where you know that your save failed.
    }
});

And change your Controller action return Json:

    public JsonResult FormCol(string variable1, string variable2)
    {
        //do saving stuff here
        return Json(new  { id = DocumentId });
    }

edited Feb 05 '14 at 23:45

answered Feb 03 '14 at 23:20

Joe Brunscheon

1,949
20
21

Tried, but it does not fire my /Controller/Action. – AAlferez Feb 04 '14 at 15:11
In order to diagnose your problem further, could you show the HTML of the form that you are trying to submit, as well as any Javascript you are running on the page? – Joe Brunscheon Feb 04 '14 at 15:23
it was the data.success.Now there is other issue, check my updated code, when I do the request on the controller, it crashes saying it cant deserialize – AAlferez Feb 04 '14 at 15:26
Yes, I just realized that I had a copy/paste error in the Success callback on the ajax post. I removed that. So it's working for you now? – Joe Brunscheon Feb 04 '14 at 15:27
In the interest of getting this rolling, you should change your Controller action to accept all the parameters associated with the form, and modify your data in the post to pass those parameters. I will update my answer with an example of that. – Joe Brunscheon Feb 04 '14 at 15:32
That is not doable, my form is huge, when I mean huge I mean 30k lines of code.. because it creates fields based on a DB table – AAlferez Feb 04 '14 at 15:34
Here is an example of serializing the form data: http://stackoverflow.com/questions/1518417/how-to-send-a-model-in-jquery-ajax-post-request-to-mvc-controller-method. The form data would need to be passed as a json object that matches the controller action input parameter property for property in order for it to work. That means that all your form inputs need to be named appropriately for the parameters. – Joe Brunscheon Feb 04 '14 at 15:40
And here is an example of how to get your form data into a json object to be passed as the data parameter: http://www.developerdrive.com/2013/04/turning-a-form-element-into-json-and-submiting-it-via-jquery/ – Joe Brunscheon Feb 04 '14 at 15:43
Well it should work the way you wrote it. I checked the JSON obj and the DocumentId is what it cant deserialize or gives the error: Invalid JSON primitive: DocumentId. – AAlferez Feb 04 '14 at 16:58
Try specifying the json request behavior on the return from the ActionResult: http://stackoverflow.com/questions/8464677/why-is-jsonrequestbehavior-needed. – Joe Brunscheon Feb 04 '14 at 17:05
I have edited this answer to clean up a couple items. The return type on the controller action needs to be `JsonResult` instead of `ActionResult`. I moved the data to the querystring parameters. If you want to use the `data` field for your ajax post, you need to format the data as Json `data = { variable1: "value1", variable2: "value2" }`. – Joe Brunscheon Feb 05 '14 at 23:47

form submit and redirect to same page with no re render

1 Answers1