Detailed introduction to the ASP. mvc--View

Understanding views

ASP. NET MVC differs from an ASP or a Dynamic Server page (ASP), and it does not have anything that directly corresponds to a page. In an ASP. NET MVC application, there is no page on the disk that corresponds to the URL path you entered in the browser's address bar. In an ASP. NET MVC application, what is closest to the page is something called a view.

In an ASP. NET MVC application, the incoming browser request is mapped to the controller action. A controller action may return a view. However, a controller action may perform some type of operation, such as redirecting you to another controller action.

The Code Listing 1 contains a simple controller called Homecontroller.homecontroller that exposes two controller actions called exponential () and details ().

Code listing 1-homecontroller.cs using the system; Use System.Collections.Generic; Use System.Linq; Use system.web; Use SYSTEM.WEB.MVC; namespace mvcapp.controllers{     [HandleError] public     class Homecontroller:controller     {          public ActionResult Index ()          {               return View ();           }          Public ActionResult Details ()          {               return redirecttoaction ("Index");           }     }

You can invoke the first action, exponential () action by entering the following URL in the address bar of the browser:

/home/Index

You can invoke the second action, the detail () action by entering this address in the browser:

/home/Details

The exponential () action returns a view. Most of the actions you create will return a view, however, the action can return any type of action result. For example, the detail () action returns a redirecttoactionresult that redirects the incoming request to an exponential () action.

The index () action contains the following line of code:

return View ();

This line of code returns a view on the server where the path must be the same as the following path:

\ view \ Home \ index.aspx

The path to the view is inferred from the name of the controller and controller action.

If you prefer, you can explicitly indicate that the following line of code in the view returns a view called "Fred":

Return to view ("Fred");

When this line of code is executed, a view is returned from the following path:

\ view \ Home \ fred.aspx

2. Create a View

You can right-click on a folder in the solution browser and select the menu item "Add", "New Project" (1). Select the MVC view page template to add a standard view to your project.

You should be aware that you cannot arbitrarily add views to your project as you would in an ASP or ASP application. You must add the view to the folder, and the name of the folder is the same as the name of the controller (without the controller suffix) For example, if you want to create a new view that is called an index, the view can be returned by a controller named Productcontroller. Then you must add this view to the following folder in the project:

\ view \ products \ index.aspx's

The name of the folder that contains the view must correspond to the name of the controller that returned the view.

3. Adding content to the view

A view is a standard, (X) HTML document that can contain a script. You use a script to add dynamic content to the view.

For example, the view in Code Listing 2 shows the current date and time.

Code Listing 2-\ views \ Home \ index.aspx

<%@ page Language = "C #" AutoEventWireup = "true" Codebehind = "Index.aspx.cs" Inherits = "MvcApp.Views.Home.Index"%> <! DOCTYPE HTML PUBLIC "-//////DTD XHTML 1.0 Transitional//EN" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
Notice that the HTML page in code Listing 2 contains the following script in the body:

<%response.write (DateTime.Now);%>
Use the script separators <% and%> to mark the start and end of the script. This script is written using C #. It shows the current date and time, and renders the content to the browser script by invoking the reply to () method. Separators <% and%> can be used to execute one or more statements.

Because the reply to () method is often called, Microsoft provides you with a simple way to call back to (). The views in Code Listing 3 use <%= and%> as a simple way to invoke the reply to () method.

Code listing 3-views \ Home \ index2.aspx

<%@ page Language = "C #" AutoEventWireup = "true" Codebehind = "Index2.aspx.cs" Inherits = "MvcApp.Views.Home.Index2"% > <! DOCTYPE HTML PUBLIC "-//////DTD XHTML 1.0 Transitional//EN" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
You can use any of the. NET language to generate dynamic content in a view, you can use Visual Basic.NET or C # to write your controllers and views.

4. Using HTML helpers to generate view content

To make it easier to add content to a view, you can take advantage of something called HTML Helper. HTML helper is a way to generate strings. You can use HTML helpers to generate standard HTML elements, such as text boxes, links, drop-down boxes, and list boxes.

For example, the view in Code Listing 4 takes advantage of two HTML Helpers,textbox () and password () to generate a login form (see Figure 2).

Code Listing 4-\ views \ Home \ index3.aspx

<%@ page Language = "C #" AutoEventWireup = "true" Codebehind = "Index3.aspx.cs" Inherits = "MvcApp.Views.Home.Index3"% > <! DOCTYPE HTML PUBLIC "-//////DTD XHTML 1.0 Transitional//EN" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 

All HTML helper methods are raised in the view's HTML properties. For example, you can render (render) a text box by calling the Html.textbox () method.

Note that when you call HTML helper, you must use the script delimiter <%= and%>. HTML helper simply returns a string you need to call Response.Write () to render the string to the browser.

Using the HTML Help method is optional. They make development easier by reducing the number of HTML and scripts you write. The view in code Listing 5 renders the exact same form as in code Listing 4, but does not use the HTML helper.

Code Listing 5-\ views \ Home \ index4.aspx

<%@ page Language = "C #" AutoEventWireup = "true" Codebehind = "Index4.aspx.cs" Inherits = "MvcApp.Views.Home.Index4"% > <! DOCTYPE HTML PUBLIC "-//////DTD XHTML 1.0 Transitional//EN" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
You can create your own HTML helper. As an example, you can create a GridView () helper method that automatically displays a series of database records in an HTML table. We'll explore this topic in the tutorial, creating a custom HTML helper.

5. Using the ViewData property to pass data to the view

You can use another property of the view, ViewData properties, to pass data from the controller to the view. For example, the controller in Code listing 6 adds a message to ViewData.

Code Listing 6-productcontroller.cs

Use the system; Use System.Collections.Generic; Use System.Linq; Use system.web; Use SYSTEM.WEB.MVC; namespace Mvcapp.controllers {public      class Productcontroller:controller      {public           actionresult Details ()          {                ViewData ["message"] = "Hello world! ";                return View ();           }      } }
The ViewData property of the controller represents a collection of name/value pairs. In code Listing 6, the verbose () method adds an item named message to the ViewData collection with a value of "Hello world! "When the view is returned by the detail () method, the ViewData is automatically passed to the view.

The view in code listing 7 gets the message from ViewData and renders the message to the browser.

Code Listing 7-\ views \ Product \ details.aspx

<%@ page Language = "C #" AutoEventWireup = "true" Codebehind = "Details.aspx.cs" Inherits = " MvcApp.Views.Product.Details "%> <! DOCTYPE HTML PUBLIC "-//////DTD XHTML 1.0 Transitional//EN" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
Note that when the message is currently rendered, the view leverages the Html.encode () helper method. Html.encode () Html helper methods encode special characters such as "<" and ">" into characters that can be displayed safely in a Web page. Whenever you render content that users submit to a site, you should encode the content to avoid JavaScript injection attacks.

(because we created the message ourselves in the Productcontroller, it doesn't really need to encode the message.) However, it is a good practice to always call Html.encode () when it is shown in the view to get the content from the ViewData. ）

In Code Listing 7, we used the ViewData to pass a simple string message from the controller to the view. You can also use the ViewData to pass other types of data from the controller to the view, such as a collection of database records. For example, if you want to display the contents of a product database table in a view, you can save the collection of database records in ViewData for delivery.

You can also pass a strongly typed view of the data from the controller to the view. We'll explore this topic in the tutorial, "Understanding strongly-typed viewing data and views."

Summarize

This tutorial provides a brief introduction to the ASP. NET MVC view, view data (view data), and HTML helper. In the first part, you learned how to add a new view to a project you learned that you must add the view to the correct folder so that it can be called by a specific controller. Next, we discuss the topic of HTML helper. You learned how HTML helpers can easily generate standard HTML content at the end, and you learned how to use ViewData to pass data from a controller to a view.

"Recommended"

1. What is ASP. NET MVC? Summarizing ASP. NET MVC

2. Detailed description of the ASP (mvc--Controller)

3. Learn more about the difference between ASP. NET MVC and WebForm

4. Detailed description of ASP. mvc--Routing

5. Code examples for developing custom menu editing tools with ASP.