Creating a Detail Page in Visual Basic .NET

Creator QR Code in Visual Basic .NET Creating a Detail Page

Users of your site will probably want to know more than just the title of a film so you can create a page they can click through to display more detailed film information. When creating views, there are two types you can create:

You will create a loosely typed view first to show the basic concepts: 1. 2. 3. Right-click the ~/Views/Film/ folder and click Add View. Enter the name Detail. Replace the Content2 tag with the following code: <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <%= ViewData["Title"] %> <br /> <br /> Description: <br /> <input type="text" value='<%= ViewData["Description"] %>' style='width:300px' /> <br /> Length: <br /> <%= Html.TextBox("Length") %> <br /> </asp:Content> 4. Open the Films controller and enter the following code: public ActionResult Detail(int ID) { Models.Film Film = filmRepository.GetFilm(ID); ViewData["Title"] = Film.Title; ViewData["Description"] = Film.Description; ViewData["Length"] = Film.Length.ToString(); return View(); } 5. 6. Press F5 to run the application. Click the Example 3 Film Detail link. You should now see a page similar to Figure 13-7.

Let's run through again what happened when you clicked a film. The URL probably looked something like this: http://localhost:51857/Film/Detail/1. 1. 2. 3. Request is made by user. MVC knows request is intended for the FilmController and Detail action. Request sent to following method: public ActionResult Detail(int ID) 4. The number at the end of the URL (1) was then mapped to the parameter ID in the action: public ActionResult Detail(int ID) 5. 6. The ActionDetail method then retrieved the film matching this ID from the model and passed it into the ViewData collection. View is returned.

Figure 13-7. Film detail Microsoft folks are no fools (most of the time) and knew that displaying an item with an ID parameter was a very common thing to do so by default. If you specify a parameter called ID in your function, it will automatically be mapped to the last value in the URL.

In the last example, you used a number of different ways of constructing HTML on the page. You will now take a closer look at them. In the ~/Film/Detail.aspx view, you used a number of different methods to render HTML elements:

Writing into the HTML directly (which offers the greatest flexibility and allows you to construct the HTML exactly as you wish): <input type="text" value='<%= ViewData["Description"] %>' style='width:300px' />

Using HtmlHelper methods: <%= Html.TextBox("Length") %> <br /> You can also use HtmlHelperMethodswith property initializers: <%= Html.TextBox("txtDateShowing", ViewData["DateShowing"], new { Style = "width:300px" })%> <br />

It is your choice of which method to use, although I believe that HtmlHelper methods look a bit neater and are easier to use. A very commonly used HtmlHelper is ActionLink. ActionLink can be used to render a hyperlink, and I would argue is a bit more readable than embedding code in an href tag. The following code will render a hyperlink labelled All films to the film controller ViewAll action: <%= Html.ActionLink("All Films", "All", "Film") %> This results in the following HTML: <a href= /Film/All/>All Films</a> Sometimes it is necessary to pass parameters into a link, and for this you can use the following syntax: <%= Html.ActionLink("Film Detail", "Detail", new {Controller="Film", id = 1 })%> This will render the following: <a href= /Film/Detail/1>Film Detail</a>

The second type of view you can create is called a strongly typed view. Strongly typed views offer a number of advantages over standard views:

You don't have to go through the laborious process of setting properties in ViewData. Values can instead be retrieved from ViewData.Model. Intellisense. Type safety. No unnecessary casting between types in ViewData. Compile time checks.

You will use a strongly typed view to create an edit page for the movies: 1. 2. 3. 4. Right-click the Views/Film folder. Click Add, then select View. Call the view Edit. Check the box that says Create a strongly-typed view, and on the drop down menu select 13.BobsMoviesMVC.Models.Film.