In this recipe, we are going to look at a method for creating a master/detail page scenario. We will use a partial view to provide us with the formatting of the details. Then we will use a bit of jQuery to do the fetching of that partial view, as well as placing it into the page for us.
This recipe will follow the other recipes in this chapter, in that it will be using the Product and ProductRepository classes to provide us with some data to work with, using NBuilder to generate some data for us. You can grab the Product and ProductRepository class as well as NBuilder from the previous recipes in this chapter.
- The first thing we want to do is create a new ASP.NET MVC project.
- Next, we can add the
ProductandProductRepositoryclasses to theModelsfolder in our project (which you can get from the previous recipe). Also, drag over the previous, home controller, which has the action code that we need for this recipe to get and show products. - Then we need to add a reference to NBuilder, which is in the dependencies folder.
- Now we need to add a reference to jQuery, so that it is present when we go to use it. You can do this by opening the master page in the
Views/Sharedfolder. Then expand theScriptsfolder and drag thejquery-1.4.2.jsfile (the version that is shipped with Visual Studio) into the header declaration of the master page. Or you can reference the latest version of jQuery by adding this line:Views/Shared/Site.Master:
<script src= http://code.jquery.com/jquery-1.4.2.min.js type="text/javascript"></script>
- Then we need to create our
Productsdisplay page. To do this, create a new view in theViews/Homefolder calledProducts.aspx. Open it up and add a quick reference toProductsin theViewDatadictionary (we will put the products collection in there shortly). Then add aforeachloop to iterate through the products to display them. We will display the product's price and name. Notice that I pass the ID of the product into the ID used to communicate with our controller, as well as in theIDattribute of our link.Views/Home/Products.aspx:
<h2>Products</h2> <p> <% List<Product> products = ViewData["Products"] as List<Product>; foreach (Product product in products) { %> <div class="display-field"> <%: String.Format("{0:c}", product.Price)%> <%= Html.ActionLink(product.Name, "ProductDetail", new {@id=product.ProductId}, new {@id=product.ProductId, @class="list-item"}) %></div> <% } %> </p> - Now that we have a
Productsdisplay page, we need to add aProductDetailpage. This page will be a standard page that our users can see in case they don't have JavaScript enabled or, more importantly, in case they are viewing your site from a device that doesn't support JavaScript. To do this, we will create a new page calledProductDetail.aspx. This page will load a partial view calledGetProductDetail, which will house our product details formatting.Views/Home/ProductDetail.aspx:
<h2>Product Detail</h2> <% Html.RenderPartial("GetProductDetail"); %> - Next, we can create the
GetProductDetailpartial view (also in theViews/Homefolder calledGetProductDetail.ascx). This view will expect that a product exists in theViewDatadictionary, as that is where it will load its details from.Views/Home/GetProductDetail.ascx:
<% Product p = ViewData["Product"] as Product; %> <div class="display-label">Id: </div> <div class="display-field"><%: p.ProductId %></div> ... <div class="display-label">Desc: </div> <div class="display-field"><%: p.Description %></div> <hr />
- At this point, you should have a working Master/Detail page set up that will show a list of products. Clicking on a product should take you to the details page. Now we need to spotweld some JavaScript into these pages, to remove some of the unnecessary full page refreshing that is going on, and instead display the details of the product on the same page. Before we start putting together some JavaScript, we need to prepare the page a little bit by adding a
divtag to display our product details in. Add this just under the page header before the products display.Views/Home/Products.aspx:
<h2>Products</h2> <div id="detail"></div> <p> - Now we can add our JavaScript. Do this by adding a script block to the
headsection of our products page. Then we will add a snippet of jQuery that will select all of the links that have the class list item assigned to them. We will then have jQuery clear the HTML of thedivtag with the ID ofdetail(which we just added).Views/Home/Products.aspx:
<script> $(function () { $('a.list-item').click(function () { $("#detail").html(''), }); }); </script> - Next is the real meat and potatoes. We will have jQuery load the HTML that is generated by our
GetProductDetailpartial view into the HTML of thedetaildiv. Then we will cancel out thelinksevent by returning false. Here is the full script:Views/Home/Products.aspx:
<script> $(function () { $('a.list-item').click(function () { $("#detail").html(''), $('#detail').load('<%: Url.Action("GetProductDetail") %>', { id: this.id }); return false; }); }); </script> - Now you can hit F5 and see the page load the details into the page above the product listing. To prove that this page still works for clients that don't have JavaScript support, simply remove the JavaScript from your page and run your web page again!
This recipe is probably the easiest way to control the formatting of snippets of HTML that you want to inject into your page to create an Ajax site for your users. You simply add a link to your page that sends the user to a details view page. You then take all the display code that you would normally put into your details page and put it into a partial view instead. The partial view is then loaded into the details page, but because it just renders raw HTML, it can also be loaded directly by JavaScript. This makes your site much more flexible with regards to serving clients!
While this is the easiest way to get Ajax into your application, it is by no means the most efficient manner to add Ajax capabilities to your site. We are requesting a rather large blob over the wire when having the server do the rendering for us. Another option would be to request only the data and then format it on the client-side, which we will cover in the next recipe.