Update: I've updated the sample to MVC Preview 3 bits. While this post is a great "overview" post, you should definately check out the latest sample as it's more streamlined.
The ASP.NET MVC pattern tends to lead itself into a more simplified and "true" HTTP experience by re-introducing patterns that have been lost, or at least, not followed in many years. One such pattern is the Post, Redirect, Get (PRG) pattern in which it is "to help avoid duplicate form submissions and allow web applications to behave more intuitively with browser bookmarks and the reload button" (Wikipedia).
A normal ASP.NET Web Form Lifecycle has the following pattern
- HTTP GET of "Create.aspx"
- HTTP POST of "Create.aspx"
- Validation Fails, "Create.aspx" is Re-Rendered
- HTTP POST of "Create.aspx"
- Item is created, "Create.aspx" is Re-Rendered with confirmation message
The major problems with this Postback pattern, is that hitting the Refresh button of your browser in steps 3 or 5 will re-post your submitted data. Step 5 is more of a problem as it could possibly re-submit that created information. Granted, there are steps that you can take to approach this problem, but this is how default ASP.NET Web Forms are treated.
Taking this same approach within ASP.NET MVC, can be achieved in the same manner by rendering a your "Create" view from your POST action. For example:
- HTTP GET of "/products/create", "Create" view is rendered
- HTTP POST to "/products/submit"
- Validation Fails, "Create" view is rendered
- HTTP POST to "/products/submit"
- Item is created, "Confirm" view is rendered
As you'll notice, the same problems we had with ASP.NET Web Forms exists with ASP.NET MVC. The really nice option, is that ASP.NET MVC gives you a lot more "freedom" of how the workflow is processed. If we strictly follow the PRG pattern within ASP.NET MVC, it would look something like
- HTTP GET of "/products/create", "Create" view is rendered
- HTTP POST to "/products/submit"
- Validation Fails, redirect to "/products/create", "Create" view is rendered
- HTTP POST to "/products/submit"
- Item is created, redirect to "/products/confirm", "Confirm" view is rendered
As you'll notice, where we previously could have had issues in step 3 or 5 before, we no longer have issues. If a user presses the Refresh button in either of those steps, they'll not get the lovely "Would you like to resubmit the form data" confirmation as featured below - instead, the page just reloads.
To implement this, you'll need 1 controller, 3 action methods, and 2 views. Follow the steps below to achieve this pattern:
1: using System.Web.Mvc;
2:
3: public class ProductsController : Controller
4: {
5: public ActionResult Create() { ... }
6: public ActionResult Submit() { ... }
7: public ActionResult Confirm() { ... }
8: }
When you implement your Create action, you have to keep in mind that validation may fail and you may need to re-display the form. TempData is best suited for this scenario, and is implemented as such.
1: public ActionResult Create()
2: {
3: if (TempData["ErrorMessage"] != null)
4: {
5: ViewData["ErrorMessage"] = TempData["ErrorMessage"];
6: ViewData["Name"] = TempData["Name"];
7: ViewData["Price"] = TempData["Price"];
8: ViewData["Quantity"] = TempData["Quantity"];
9: }
10: return RenderView();
11: }
Next you'll implement your Submit action. This will perform some validation of the user input data, and if successful will save the info and redirect to the Confirm action. If it is not successful, we'll store the form data into the TempData and redirect to the action Create. This way we mimic maintaining the view's state even if it fails.
1: public ActionResult Submit()
2: {
3: string error = null;
4: string name = Request.Form["Name"];
5: if (string.IsNullOrEmpty(name))
6: {
7: error = "Name is empty. ";
8: }
9: decimal price;
10: if (!decimal.TryParse(Request.Form["Price"], out price))
11: {
12: error += "Price is invalid. ";
13: }
14: int quantity;
15: if (!int.TryParse(Request.Form["Quantity"], out quantity))
16: {
17: error += "Quantity is invalid.";
18: }
19:
20: if (!string.IsNullOrEmpty(error))
21: {
22: TempData["ErrorMessage"] = error;
23: TempData["Name"] = Request.Form["Name"];
24: TempData["Price"] = Request.Form["Price"];
25: TempData["Quantity"] = Request.Form["Quantity"];
26: return RedirectToAction("Create");
27: }
28: else
29: {
30: return RedirectToAction("Confirm");
31: }
32: }
Something very interesting to note in the above example, is that even though I've pulled all values out of the form into local variables, should either Price or Quantity fail in parsing and I set the TempData to the local variables...I would have lost the user input. So, it's always a smart idea to retrieve the data from the form directly into the TempData. Finally, the Confirm action needs to be implemented.
1: public ActionResult Confirm()
2: {
3: return RenderView();
4: }
Now, it's time to create our views:
~/Views/Products/Create.aspx
1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Create.aspx.cs" Inherits="Views_Products_Create" %>
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head runat="server">
4: <title>Create Product</title>
5: </head>
6: <body>
7: <% using (Html.Form<ProductsController>(c => c.Submit())) { %>
8: <% if (!string.IsNullOrEmpty((string) ViewData["ErrorMessage"])) { %>
9: <div style="color:Red;">
10: <%= ViewData["ErrorMessage"] %>
11: </div>
12: <% } %>
13: Name: <%= Html.TextBox("Name", ViewData["Name"]) %><br />
14: Price: <%= Html.TextBox("Price", ViewData["Price"]) %><br />
15: Quantity: <%= Html.TextBox("Quantity", ViewData["Quantity"]) %><br />
16: <%= Html.SubmitButton("submitButton", "Save") %>
17: <% } %>
18: </body>
19: </html>
~/Views/Products/Confirm.aspx
1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Confirm.aspx.cs" Inherits="Views_Products_Confirm" %>
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head id="Head1" runat="server">
4: <title>Confirm Create Product</title>
5: </head>
6: <body>
7: Thanks for creating your product.
8: <%= Html.ActionLink<ProductsController>(c => c.Create(), "Click here") %> to create a new one.
9: </body>
10: </html>
And that's it. As you can see from the Create view, when writing our textboxes, we give them a default value from the ViewData. You can download the sample application with this pattern running here. Please let me know of any suggestions or issues.
Currently rated 4.5 by 4 people
- Currently 4.5/5 Stars.
- 1
- 2
- 3
- 4
- 5