Question

I am trying to use Ajax to allow a user to save information (display a save notification which then fades out) or to submit (redirect to a “your form has been submitted” page). In both cases, I require error checking (which I have done via Html.EnableClientValidation(). and it is working properly).

Currently, my form looks like this…

<% using (Ajax.BeginForm("Index", "Scenario", new AjaxOptions { 
   HttpMethod = "Post", OnBegin = "scenarioCheckForErrors", 
   OnSuccess = "scenarioSubmitSuccess" }, new { id = "scenarioForm" }))
{ %>
  <!-- My form goes here. -->
  <div class="submitButtons">
    <input type="submit" value="Save" name="submitButton" />
    <input type="submit" value="Submit" name="submitButton" />
  </div>
} %>

All the scenarioCheckForErrors does is changes some imagery if errors have been found during validation. scenarioSubmitSuccess is displaying the save notification.

Between all that, I am using my controller to actually handle the saving of the data and doing all that kind of “stuff.” Here is part of the method:

[HttpPost]
[Header("Setup Scenario")]
public ActionResult Index(string submitButton) {
  // Determine whether to just save or to save and submit.
  switch (submitButton)
  {
      case "Save":
          return Save(scenario);
      case "Submit":
          return Submit(scenario);
      default:
          // Should never be reached.
          return View();
  }
}

And the Save and the Submit methods…

/// <summary>
/// Save a the scenario.
/// </summary>
/// <param name="scenario"></param>
/// <returns></returns>
private ActionResult Save(Scenario scenario)
{
    if (ModelState.IsValid && TryUpdateModel(scenario, "Scenario"))
    {
        // Save the scenario.
    }

    return View(scenario);
}

/// <summary>
/// Submit the scenario.
/// </summary>
/// <param name="scenario"></param>
/// <returns></returns>
private ActionResult Submit(Scenario scenario)
{
    if (TryUpdateModel(scenario, "SaveScenario"))
    {
        // Call Save() method, and then...
        return Redirect("/Scenario/Done");
    }

    return View(scenario);
}

I am struggling with how to get the redirect to happen to the “Done” page, but to still allow the “You have successfully saved…” dialog to pop-up when the user saves. What am I not doing correctly?

Answer 1

Instead of redirecting from the view, you could redirect using javascript after you have shown “You have successfully saved”.