[RESOLVED]Submitting a form within a partial view

Hi, I’m creating a form in a partial view like this:

@using (Html.BeginForm("SubmitNewQuote", "Quotes"))
{
    // Form fields go here!!    
}

At the bottom of my form I have this button:

<input class="k-button" type="submit" value="Create" name="createNewQuoteButton" />

My controller action goes like this:

[HttpPost]
public ActionResult SubmitNewQuote(FormCollection value)
{
    // Validate the form and check if it can be saved or not....
    // TODO

    if (   FORM IS VALID   )
    {
        // TODO - Save the new quote and redirect to the list of quotes

        return RedirectToAction("SomeActionName");
    }
    else
    {
        // WHAT DO I DO HERE ???
    }
}

What I basically want to do is validate the input fields and if they are invalid then return to the form and display an error message.  From what I can tell submitting a form expects me to redirect to a completely new URL which will in effect reload the
whole page?  If this is the case then I will need to redirect to itself and reload all of the data that the user has entered so far.  I’m probably missing an area of understanding here!!

Another idea is to do away with the form submit and use JQuery/Ajax to post back to the server.  Here’s what I tried…  My form now looks like this:

<form id="newQuoteFields">

    // Input fields go here


    @(Html.Kendo().Button()
        .Name("AddNewQuote")
        .Content("Add Quote")
        .Events(e => e.Click("addNewQuoteButtonClicked"))
    )
</form>

I then have a JavaScript function as follows:

function addNewQuoteButtonClicked() {
    var myForm = $('#newQuoteFields');
    $.ajax({
        url: "@Url.Action("SubmitNewQuote", "Quotes")",
        type: "POST",
        data: myForm.serialize(),
        success: function (data) {
            var json = JSON.parse(data);

            alert(json["DataIsValid"]);
        }
}) }

The corresponding action which is getting called with ajax is as follows:

public JsonResult SubmitNewQuote(FormCollection value)
{
    dynamic jsonResult = new JObject();
    jsonResult.DataIsValid = true;  // validate the form here
    jsonResult.AnyOtherInfo = "blah blah blah";

    return Json(jsonResult);
}

My hope is that I can then use the success part of my Ajax call to decide what to do based on the Json returned from the action.  For example, if the Json indicates that the form is invalid I can use JQuery to show a hidden DIV containing an error message.
 Also, if it is valid and the new quote has been saved I can redirect to another page etc.

Am I overcomplicating somethign simple?  I’m pretty new to all this…  Just worth noting that in this Ajax example above the "data" I get back after the ajax call to SubmitNewQuote is empty and not the Json I was expecting ?!?

A browser request, either a get via an anchor, or post via a form is expecting a new page to be returned. There is no builtin support for partial. So in a post action you just return the the same view when there are errors. If you are using validation then
the errors will appear.

If you want partial page updates, then ajax must be used, as in your example. You ajax call can return Json or html (partial view). In you case you are using ajax, but while jQuery will not encode JSON, it does decode Json on an ajax request. Remove the decode
step.

Leave a Reply