Analysis of Tailspin Travel UI Layer in ASP. net mvc 2

Here we will analyze ASP from an instance. net mvc 2 in the Tailspin Travel UI Layer, BKJIA also recommends to you interview with Microsoft MVP Yi Mingzhi: into ASP. net mvc 2 framework development. This helps you better understand ASP. net mvc.

Tailspin Travel is an example of a Travel booking application. The latest version uses ASP. net mvc 2 technology, mainly using DataAnnotations verification, client verification and ViewModels, also shows a lot of Visual Studio 2010 ,. NET Framework 4, and Windows Server AppFabric technology, see ASP. net mvc 2 example Tailspin Travel.

Tailspin Travel has many design technologies. Let's take a look at the UI technologies today. The main technologies used at the UI Layer are ASP. NET MVC2 and ASP. NET DynamicData frameworks. The functions are divided into the front-end page provided to ordinary users and the background interface used by the Administrator. The front-end page mainly implements the travel schedule, flights, hotels, ASP is used for car rental. net mvc 2 technology, the Administrator uses the background management page ASP. developed by NET DynamicData, these two technologies play a role in demonstrating the application of the website, and it is impossible for the Administrator to use a large amount of Access to the background, the main traffic of a website is the front-end page used by common users. Using these two frameworks in combination can accelerate website development.

When combining these two technologies, you will encounter some problems. The first problem is ASP. NET Dynamic Data is stored in the Dynamic Data directory of the web application by default. This directory is created in the root directory. Your application needs to move in different locations. In Tailspin Travel, it is the "admin" directory, where dynamic data is stored and stored in the Globa. asax. cs file.

 
 

  
  
var metaModel = new MetaModel();   
  
  
metaModel.RegisterContext(contextFactory, new ContextConfiguration { ScaffoldAllTables = true });   
  
  
metaModel.DynamicDataFolderVirtualPath = "~/Admin/DynamicData/"; 
 
 

Change the file content reference in admin/Dynamicdata to the new path (~ /Admin/Dynamicdata)
For example:

A. Modify the src attribute of the registration commands of List. aspx and ListDetails. aspx.

B. Modify the src attribute of List. aspx and img on the master page.

C. Any custom content that must use the new path.

ASP. NET 4.0 has a new feature called "automatically starting an application". It starts automatically and initializes a web application first, instead of waiting for an external client to access the web server. This helps you provide a faster response experience for the first visitor, avoiding writing a custom script to "Push warm up" the server and preparing any data cache. It can be used for any type of ASP. NET applications, including applications based on ASP. NET Web Forms and ASP. net mvc. However, it is required to run ASP. NET 4 on IIS 7.5 with Windows 7 and Windows Server 2008 R2. This Automatic startup feature provides a controllable way to start an application workflow, initialize an ASP. NET application, and then accept HTTP requests. For more information, see Scott Guthrie's article VS 2010 and. NET 4.0 series: Automatic ASP startup. NET application, Tailspin Travel has a class Microsoft. samples. tailspin. web. infrastructure. applicationPreloader uses this feature to pre-load the application cache.

Next we will analyze the front-end and Management backend:

ASP is used at the front end. net mvc 2 Development, relatively simple, mainly used ViewModels, HtmlHelper, output cache, to avoid CSRF attacks, use PartialView in the query method, and jQuery and ASP. for more information about NET Ajax, see Asp.net MVC2 usage and performance optimization suggestions.

The following describes the structure of DynamicData in the management background. First, read Scott Guthrie's new ASP. NET Dynamic Data support article:

ASP. NET verifies the entered data when creating and updating the dynamic data, both on the client and server.

Required field verification. If the field cannot be NULL, data must be input. However, it remains to be improved. If NULL is not allowed, the zero-length string is not allowed. In practice, NULL and zero-length strings are two different types. Even if it is not perfect, it has reduced our workload.

Length verification. If the field type is nvarchar (10), no more than 10 characters are allowed. If the field type is not nvarchar (10), but varchar (10 ), at this time, the six Chinese characters will pass the verification, but they cannot be imported into the database, and an error will be returned.

Type verification. For example, if the field is of the date type, only the date can be entered.

ASP. NET Dynamic Data has the automatic format function: for example, a bit field is displayed as a multi-choice box, and the identification field is not displayed when data is inserted.

ASP. NET Dynamic Data also has the ability to automatically identify table associations: for example, if a product table is associated with a product category table, ASP.. NET Dynamic Data is automatically displayed in the following list. This function is very good.

There are two Dynamic Data templates in the website or application template. One is "Dynamic Data Entity template (Dynamic Data Entity)", which uses ADO.net Entity as the Data model, the other is "Dynamic Data Template", which uses linq to SQL as the Data model. Tailspin Travel uses Entity Framework as the data model.

Dynamic Data also uses Routing:

 
 

  
  
routes.Add(new DynamicDataRoute("Admin/{table}/{action}")   
  
  
{   
  
  
    Constraints = new RouteValueDictionary(new { action = "List|Edit|Details|Insert" }),   
  
  
    Model = metaModel   
  
  
}); 
 
 

Routes. the Add parameter is a DynamicDataRoute object, and the DynamicDataRoute object has a parameter "Admin/{table}/{action }. aspx ". In addition, two attribute values Constraints and Model are specified for this object. Add a DynamicDataRoute inherited from Route to the Routing rule table.

Constraints = new RouteValueDictionary (new {action = "List | Details | Edit | Insert"}) indicates Constraints. Here, action can only be one of List, Details, Edit, and Insert.

It can be seen that the four Aciton correspond to the four page files in the DynamicData/PageTemplates folder. There is also a ListDetails. aspx page file in the folder, which is used for "merge page mode", that is, all operations will be completed on one page. Tailspin Travel does not enable this function. The name of the DynamicData folder is "DynamicData ".

Can the {table} and {action} above be changed to the name we want?

No, we can see that the above uses the DynamicDataRoute class instead of the Route class. DynamicDataRoute inherits from the Route class, and the Table and Action attributes are unique to DynamicDataRoute.

DynamicData/Content/GridViewPager. ascx paging control.

When DynamicData/Content/FilterUserControl. ascx displays data in the table, the control is displayed in the header to filter the Content in the table. For example, you can only list products whose product directory is "utility.

DynamicData/CustomPages folder. Customize the webpage template folder to replace the default template in the DynamicData/PageTemplates folder.

DynamicData/FieldTemplates folder. Controls that display various types of fields during viewing, creating, and editing.

DynamicData/PageTemplates folder. Contains the Page Template for viewing and editing.

Dynamic Data also has a fast development foundation, scaffolding is a mechanism, through scaffolding, we do not have to add, view, modify each table for a different page, because scaffolding automatically generates these pages. Tailspin Travel enables scaffolding for all tables. Enabling scaffolding for all tables means that the entire data model is made public:

MetaModel. RegisterContext (contextFactory, new ContextConfiguration {ScaffoldAllTables = true });

You can also enable the scaffolding function for a specific table. In this case, you need to set ScaffoldAllTables = false and then label the model class [System. ComponentModel. DataAnnotations. ScaffoldTable (true)]

The automatically generated website needs to be adjusted. To create a custom page, you can place it in the DynamicData/CustomPages folder and create a folder named FlightBookings under DynamicData/CustomPages, this name must be consistent with Tailspin. the corresponding table in edmx has the same partition class name. Copy the files under DynamicData/PageTemplates/to DynamicData/CustomPages/FlightBookings /.

Change the class name in the new template file.

For example, change the class name List to DynamicDataTest. FlightBookingsList.

Use DisplayName to change the display of the interface. DisplayName can only be used for classes, methods, attributes, indexes, and events.

 
 

  
  
[MetadataType(typeof(CarRentalMetadata))]   
  
  
    public partial class CarRental   
  
  
    {   
  
  
        [ScaffoldTable(false)]   
  
  
        private class CarRentalMetadata   
  
  
        {   
  
  
            [DisplayName("Pick up")]   
  
  
            public object RentalStart { get; set; }  
  
  
 
  
  
            [DisplayName("Return")]   
  
  
            public object RentalEnd { get; set; }  
  
  
 
  
  
            [DisplayName("Pick up Place")]   
  
  
            [Required(ErrorMessage = "Please specify where you prefer to pickup the vehicle.")]   
  
  
            public object PickupPlaceId { get; set; }  
  
  
 
  
  
            [DisplayName("Return place")]   
  
  
            [Required(ErrorMessage = "Please specify where you prefer to return the vehicle.")]   
  
  
            public object ReturnPlaceId { get; set; }  
  
  
 
  
  
            [DisplayName("Vehicle")]   
  
  
            [Required(ErrorMessage = "Please specify the vehicle type.")]   
  
  
            public object VehicleTypeId { get; set; }   
  
  
        }   
  
  
    } 
 
 

You can also use UIHint and DataType to change the field template.

 
 

  
  
[MetadataType(typeof(FlightMetadata))]   
  
  
    public partial class Flight   
  
  
    {   
  
  
        public Flight()   
  
  
        {   
  
  
            this.Id = Guid.NewGuid();   
  
  
        }  
  
  
 
  
  
        [DisplayName("Flights")]   
  
  
        private class FlightMetadata   
  
  
        {   
  
  
            [ScaffoldColumn(false)]   
  
  
            public object Id { get; set; }  
  
  
 
  
  
            [Required]   
  
  
            public object AirplaneType { get; set; }  
  
  
 
  
  
            [UIHint("Time")]   
  
  
            public object DepartureTime { get; set; }  
  
  
 
  
  
            [UIHint("Time")]   
  
  
            [DataType(DataType.Time)]   
  
  
            public object ArrivalTime { get; set; }  
  
  
 
  
  
            [DisplayName("Departure Airport")]   
  
  
            public object DepartureAirport { get; set; }  
  
  
 
  
  
            [DisplayName("Arrival Airport")]   
  
  
            public object ArrivalAirport { get; set; }   
  
  
        }   
  
  
    } 
 
 

DynamicData is very flexible. Tailspin Travel is very efficient in dealing with the development of the management background. MVC2 is used in the foreground to ensure performance, and it is worth learning from in the development of the UI interface.

Original article title: ASP. net mvc 2 example Tailspin Travel UI Layer Analysis

Link: http://www.cnblogs.com/shanyou/archive/2010/03/26/1696572.html