Yet Another ASP.NET MVC CRUD Tutorial
- by Ricardo Peres
I know that I have not posted much on MVC, mostly because I don’t use it on my daily life, but since I find it so interesting, and since it is gaining such popularity, I will be talking about it much more. This time, it’s about the most basic of scenarios: CRUD. Although there are several ASP.NET MVC tutorials out there that cover ordinary CRUD operations, I couldn’t find any that would explain how we can have also AJAX, optimistic concurrency control and validation, using Entity Framework Code First, so I set out to write one! I won’t go into explaining what is MVC, Code First or optimistic concurrency control, or AJAX, I assume you are all familiar with these concepts by now. Let’s consider an hypothetical use case, products. For simplicity, we only want to be able to either view a single product or edit this product. First, we need our model: 1: public class Product
2: {
3: public Product()
4: {
5: this.Details = new HashSet<OrderDetail>();
6: }
7:
8: [Required]
9: [StringLength(50)]
10: public String Name
11: {
12: get;
13: set;
14: }
15:
16: [Key]
17: [ScaffoldColumn(false)]
18: [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
19: public Int32 ProductId
20: {
21: get;
22: set;
23: }
24:
25: [Required]
26: [Range(1, 100)]
27: public Decimal Price
28: {
29: get;
30: set;
31: }
32:
33: public virtual ISet<OrderDetail> Details
34: {
35: get;
36: protected set;
37: }
38:
39: [Timestamp]
40: [ScaffoldColumn(false)]
41: public Byte[] RowVersion
42: {
43: get;
44: set;
45: }
46: }
Keep in mind that this is a simple scenario. Let’s see what we have:
A class Product, that maps to a product record on the database;
A product has a required (RequiredAttribute) Name property which can contain up to 50 characters (StringLengthAttribute);
The product’s Price must be a decimal value between 1 and 100 (RangeAttribute);
It contains a set of order details, for each time that it has been ordered, which we will not talk about (Details);
The record’s primary key (mapped to property ProductId) comes from a SQL Server IDENTITY column generated by the database (KeyAttribute, DatabaseGeneratedAttribute);
The table uses a SQL Server ROWVERSION (previously known as TIMESTAMP) column for optimistic concurrency control mapped to property RowVersion (TimestampAttribute).
Then we will need a controller for viewing product details, which will located on folder ~/Controllers under the name ProductController:
1: public class ProductController : Controller
2: {
3: [HttpGet]
4: public ViewResult Get(Int32 id = 0)
5: {
6: if (id != 0)
7: {
8: using (ProductContext ctx = new ProductContext())
9: {
10: return (this.View("Single", ctx.Products.Find(id) ?? new Product()));
11: }
12: }
13: else
14: {
15: return (this.View("Single", new Product()));
16: }
17: }
18: }
If the requested product does not exist, or one was not requested at all, one with default values will be returned. I am using a view named Single to display the product’s details, more on that later.
As you can see, it delegates the loading of products to an Entity Framework context, which is defined as:
1: public class ProductContext: DbContext
2: {
3: public DbSet<Product> Products
4: {
5: get;
6: set;
7: }
8: }
Like I said before, I’ll keep it simple for now, only aggregate root Product is available.
The controller will use the standard routes defined by the Visual Studio ASP.NET MVC 3 template:
1: routes.MapRoute(
2: "Default", // Route name
3: "{controller}/{action}/{id}", // URL with parameters
4: new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
5: );
Next, we need a view for displaying the product details, let’s call it Single, and have it located under ~/Views/Product:
1: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Product>" %>
2: <!DOCTYPE html>
3:
4: <html>
5: <head runat="server">
6: <title>Product</title>
7: <script src="/Scripts/jquery-1.7.2.js" type="text/javascript"></script> 1: 2: <script src="/Scripts/jquery-ui-1.8.19.js" type="text/javascript"> 1: </script> 2: <script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"> 1: </script> 2: <script src="/Scripts/jquery.validate.js" type="text/javascript"> 1: </script> 2: <script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"> 1: </script> 2: <script type="text/javascript"> 3: function onFailure(error) 4: { 5: } 6: 7: function onComplete(ctx) 8: { 9: } 10: 11: </script>
8: </head>
9: <body>
10: <div>
11: <% 1: : this.Html.ValidationSummary(false) %>
12: <% 1: using (this.Ajax.BeginForm("Edit", "Product", new AjaxOptions{ HttpMethod = FormMethod.Post.ToString(), OnSuccess = "onSuccess", OnFailure = "onFailure" })) { %>
13: <% 1: : this.Html.EditorForModel() %>
14: <input type="submit" name="submit" value="Submit" />
15: <% 1: } %>
16: </div>
17: </body>
18: </html>
Yes… I am using ASPX syntax… sorry about that!
I implemented an editor template for the Product class, which must be located on the ~/Views/Shared/EditorTemplates folder as file Product.ascx:
1: <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Product>" %>
2: <div>
3: <%: this.Html.HiddenFor(model => model.ProductId) %>
4: <%: this.Html.HiddenFor(model => model.RowVersion) %>
5: <fieldset>
6: <legend>Product</legend>
7: <div class="editor-label">
8: <%: this.Html.LabelFor(model => model.Name) %>
9: </div>
10: <div class="editor-field">
11: <%: this.Html.TextBoxFor(model => model.Name) %>
12: <%: this.Html.ValidationMessageFor(model => model.Name) %>
13: </div>
14: <div class="editor-label">
15: <%= this.Html.LabelFor(model => model.Price) %>
16: </div>
17: <div class="editor-field">
18: <%= this.Html.TextBoxFor(model => model.Price) %>
19: <%: this.Html.ValidationMessageFor(model => model.Price) %>
20: </div>
21: </fieldset>
22: </div>
One thing you’ll notice is, I am including both the ProductId and the RowVersion properties as hidden fields; they will come handy later or, so that we know what product and version we are editing. The other thing is the included JavaScript files: jQuery, jQuery UI and unobtrusive validations. Also, I am not using the Content extension method for translating relative URLs, because that way I would lose JavaScript intellisense for jQuery functions.
OK, so, at this moment, I want to add support for AJAX and optimistic concurrency control. So I write a controller method like this:
1: [HttpPost]
2: [AjaxOnly]
3: [Authorize]
4: public JsonResult Edit(Product product)
5: {
6: if (this.TryValidateModel(product) == true)
7: {
8: using (BlogContext ctx = new BlogContext())
9: {
10: Boolean success = false;
11:
12: ctx.Entry(product).State = (product.ProductId == 0) ? EntityState.Added : EntityState.Modified;
13:
14: try
15: {
16: success = (ctx.SaveChanges() == 1);
17: }
18: catch (DbUpdateConcurrencyException)
19: {
20: ctx.Entry(product).Reload();
21: }
22:
23: return (this.Json(new { Success = success, ProductId = product.ProductId, RowVersion = Convert.ToBase64String(product.RowVersion) }));
24: }
25: }
26: else
27: {
28: return (this.Json(new { Success = false, ProductId = 0, RowVersion = String.Empty }));
29: }
30: }
So, this method is only valid for HTTP POST requests (HttpPost), coming from AJAX (AjaxOnly, from MVC Futures), and from authenticated users (Authorize). It returns a JSON object, which is what you would normally use for AJAX requests, containing three properties:
Success: a boolean flag;
RowVersion: the current version of the ROWVERSION column as a Base-64 string;
ProductId: the inserted product id, as coming from the database.
If the product is new, it will be inserted into the database, and its primary key will be returned into the ProductId property. Success will be set to true;
If a DbUpdateConcurrencyException occurs, it means that the value in the RowVersion property does not match the current ROWVERSION column value on the database, so the record must have been modified between the time that the page was loaded and the time we attempted to save the product. In this case, the controller just gets the new value from the database and returns it in the JSON object; Success will be false.
Otherwise, it will be updated, and Success, ProductId and RowVersion will all have their values set accordingly.
So let’s see how we can react to these situations on the client side. Specifically, we want to deal with these situations:
The user is not logged in when the update/create request is made, perhaps the cookie expired;
The optimistic concurrency check failed;
All went well.
So, let’s change our view:
1: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Product>" %>
2: <%@ Import Namespace="System.Web.Security" %>
3:
4: <!DOCTYPE html>
5:
6: <html>
7: <head runat="server">
8: <title>Product</title>
9: <script src="/Scripts/jquery-1.7.2.js" type="text/javascript"></script> 1: 2: <script src="/Scripts/jquery-ui-1.8.19.js" type="text/javascript"> 1: </script> 2: <script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"> 1: </script> 2: <script src="/Scripts/jquery.validate.js" type="text/javascript"> 1: </script> 2: <script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"> 1: </script> 2: <script type="text/javascript"> 3: function onFailure(error) 4: { 5: window.alert('An error occurred: ' + error); 6: } 7: 8: function onSuccess(ctx) 9: { 10: if (typeof (ctx.Success) != 'undefined') 11: { 12: $('input#ProductId').val(ctx.ProductId); 13: $('input#RowVersion').val(ctx.RowVersion); 14: 15: if (ctx.Success == false) 16: { 17: window.alert('An error occurred while updating the entity: it may have been modified by third parties. Please try again.'); 18: } 19: else 20: { 21: window.alert('Saved successfully'); 22: } 23: } 24: else 25: { 26: if (window.confirm('Not logged in. Login now?') == true) 27: { 28: document.location.href = '<%: FormsAuthentication.LoginUrl %>?ReturnURL=' + document.location.pathname; 29: } 30: } 31: } 32: 33: </script>
10: </head>
11: <body>
12: <div>
13: <% 1: : this.Html.ValidationSummary(false) %>
14: <% 1: using (this.Ajax.BeginForm("Edit", "Product", new AjaxOptions{ HttpMethod = FormMethod.Post.ToString(), OnSuccess = "onSuccess", OnFailure = "onFailure" })) { %>
15: <% 1: : this.Html.EditorForModel() %>
16: <input type="submit" name="submit" value="Submit" />
17: <% 1: } %>
18: </div>
19: </body>
20: </html>
The implementation of the onSuccess function first checks if the response contains a Success property, if not, the most likely cause is the request was redirected to the login page (using Forms Authentication), because it wasn’t authenticated, so we navigate there as well, keeping the reference to the current page. It then saves the current values of the ProductId and RowVersion properties to their respective hidden fields. They will be sent on each successive post and will be used in determining if the request is for adding a new product or to updating an existing one.
The only thing missing is the ability to insert a new product, after inserting/editing an existing one, which can be easily achieved using this snippet:
1: <input type="button" value="New" onclick="$('input#ProductId').val('');$('input#RowVersion').val('');"/>
And that’s it.
