ASP. net4.0 step by step (I) New Asp.net website project template

In this exercise, we will be familiar with the ASP. net4 website project template provided by vs2010.

ASP. net4.0 provides three new website project templates: 1. Empty website project (Asp.net empty web application), 2. website project (Asp.net web application), and 3. Website)

Select the first two types of projects in vs2010-> project, and then select create in vs2010-> Web Site

Asp.net empty web application (Asp.net) is very simple. It is similar to the previous version of the website project. There is a website configuration file (Web. config) with little content)

The functions of other website project templates have greatly changed. The new features are as follows:

1. provides basic authentication functions

2. Provides the default website project master page

3. Provides the default CSS style file site.css

4. simplified the Web. config configuration file and removed most of the unnecessary applications from the website.ProgramThe configuration settings used in are stored in the machine. config file, while the Web. config file only stores the data information set by the site.

5. provides automatic and intelligent prompts for jquery (this requires some configuration in vs2008)

Next we will do an exercise to create an Asp.net web application to experience the above 5 new features and make a simple jquery example.
Task 1: create a web site

1. OpenMicrosoft Visual maxcompute 2010

2. Select New> project from the File menu

3. Select the website project (Asp.net Web Application) in the following template list)

4. Select the project path and enter the project name, as shown in figure (1 ).

(Figure 1)
Note: Select C # As the development language #
5. Select OK. After confirmation, the project solution directory is expanded (2)

Figure (2) in vs2010 official version, the jquery version is 1.4.1
Through the project directory structure shown in figure 2, we can learn the features of the new web project template through exercises.
1. provides basic authentication functions: All the authentication information pages and functions are in the account subfolders.
2. Provide the default website project master page: the default master page provided is the site. Master under the site root directory.
3. Provides the default CSS style file: site.css. This Style File applies to the entire website.
4. simplified web. config configuration file: Open the web in the root directory of the site. config, you will see a simplified web. config configuration file (if you create a new Asp.net empty web project, you can see that the configuration file is more streamlined, because the entire website has only one web project with very few content. config File)
5. provides automatic and intelligent prompts for jquery In the scripts folder.
Note: The jquery script in the script folder has three versions, the jquery-1.4.1-vsdoc.js is used to reference during development, has the automatic prompt function, the jquery-1.4.1.js is the standard jquery file, can be used in development, the jquery-1.4.1.min.js is a streamlined jquery script file, which is small and can be referenced in the release environment.

Next, let's take a look at the website verification skills that can be used to split the box.
Task 2: website verification skills that can be used with box Removal
1. Expand the account folder in the website project, as shown in figure 3.

Figure (3)
Expand the account folder. In the account folder, you can see four pages and a web. config configuration file.
2. Open the login. aspx file under the Account directory. This file is the default logon page and contains a login control. The HTML mode of the page is as follows:

<Asp: Content ID = "bodycontent" runat = "server" contentplaceholderid = "maincontent">
<H2>
Log in
</H2>
<P>
Please enter your username and password.
<Asp: hyperlink id = "registerhyperlink" runat = "server" enableviewstate = "false"> register </ASP: hyperlink> if you don't have an account.
</P>
<Asp: Login ID = "loginuser" runat = "server" enableviewstate = "false" renderoutertable = "false">
<Layouttemplate>
...
</Layouttemplate>
</ASP: Login>
</ASP: content>
3. open the site under the site root directory. master File, locate the loginview control (the loginview control is used to display the user's logon status, put in the Master, then all pages inherited from the master will display the control information, this control displays the user information of the logged-on user. If the user is not logged on, a hyperlink is displayed to the logon page)
The HTML View content is as follows:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en">
<Head runat = "server">
<Title> </title>
<Link href = "~ /Styles/site.css "rel =" stylesheet "type =" text/CSS "/>
<Asp: contentplaceholder id = "headcontent" runat = "server">
</ASP: contentplaceholder>
</Head>
<Body>
<Form runat = "server">
<Div class = "page">
<Div class = "Header">
<Div class = "title">
<H1>
My ASP. NET application
</H1>
</Div>
<Div class = "logindisplay">
<Asp: loginview id = "headloginview" runat = "server" enableviewstate = "false">
<Anonymoustemplate>
[<A href = "~ /Account/login. aspx "id =" headloginstatus "runat =" server "> log in </a>]
</Anonymoustemplate>
<Loggedintemplate>
Welcome <SPAN class = "bold"> <asp: loginname id = "headloginname" runat = "server"/> </span>!
[<Asp: loginstatus id = "headloginstatus" runat = "server" logoutaction = "Redirect" logouttext = "log out" logoutpageurl = "~ /"/>]
</Loggedintemplate>
</ASP: loginview>
</Div>
<Div class = "Clear hideskiplink">
<Asp: menu id = "navigationmenu" runat = "server" cssclass = "menu" enableviewstate = "false" includestyleblock = "false" orientation = "horizontal">
<Items>
<Asp: menuitem navigateurl = "~ /Default. aspx "text =" home "/>
<Asp: menuitem navigateurl = "~ /About. aspx "text =" about "/>
</Items>
</ASP: menu>
</Div>
</Div>
<Div class = "Main">
<Asp: contentplaceholder id = "maincontent" runat = "server"/>
</Div>
<Div class = "clear">
</Div>
</Div>
<Div class = "footer">

</Div>
</Form>
</Body>
</Html>

Register. aspx and changepassword. aspx both use the login control, and register. aspx also usesCreateuserwizardControls guide users to register, changepassword. aspx useChangepasswordControl to modify the password.
All verification and login controls are based on forms verification. In vs2010, the SQL memebership, role, and profile providers are also used to create the corresponding verification library information for sqlserver express2008, all Form Verification configuration information can be found on the Web. in the config file, find

I personally do not recommend using forms form verification. If custom configuration sqlprovider is not used, it is not flexible enough. If you want to use custom sqlproviderCodeWriting is also troublesome. To control the permissions at the control level on the page, or retrieve different display data based on different user roles, it is best to design your own database for implementation.
4. Double-click the root directory of the project site to open the Web. config configuration file.
5. Locate the <authentication> label in <system. Web> under the configuration block. This block is used for form authentication.
The XML content is as follows:
<Authentication mode = "forms">
<Forms loginurl = "~ /Account/login. aspx "timeout =" 2880 "/>
</Authentication>

The above configuration information indicates that the default logon page is login. aspx in the account folder under the root directory of the virtual site.
6. in the web. in the authentication section of the config file, membership, profile, and role are defined. by default, the configuration information is provided by the Asp.net personalized configuration database.
The xml configuration information is as follows:

<Membership>
<Providers>
<Clear/>
<Add name = "aspnetsqlmembershipprovider" type = "system. Web. Security. sqlmembershipprovider" connectionstringname = "applicationservices"
Enablepasswordretrieval = "false" enablepasswordreset = "true" requiresquestionandanswer = "false" requiresuniqueemail = "false"
Maxinvalidpasswordattempts = "5" minrequiredpasswordlength = "6" minrequirednonalphanumericcharacters = "0" passwordattemptwindow = "10"
Applicationname = "/"/>
</Providers>
</Membership>

<Profile>
<Providers>
<Clear/>
<Add name = "aspnetsqlprofileprovider" type = "system. Web. profile. sqlprofileprovider" connectionstringname = "applicationservices" applicationname = "/"/>
</Providers>
</Profile>

<Rolemanager enabled = "false">
<Providers>
<Clear/>
<Add name = "aspnetsqlroleprovider" type = "system. Web. Security. sqlroleprovider" connectionstringname = "applicationservices" applicationname = "/"/>
<Add name = "aspnetwindow#enroleprovider" type = "system. Web. Security. window#enroleprovider" applicationname = "/"/>
</Providers>
</Rolemanager>

You can refer to the following msdnArticleTo learn more about form authentication: -Asp. Net Logon control Overview -Introduction to ASP. net2.0 form Authentication -Introduction to membership -Overview of ASP. NET personalized settings -Use a role for Identity Authentication

Task 3: view the simplified web. config configuration file
1. in. net framework4, the main configuration information has been moved to the machine. in the config file, and then the application inherits the machine. configuration Information in config, so that the application configuration file of Asp.net 4 can be empty, or there are only a few lines of content.
2. You can remove unnecessary configuration information from a web project by inheriting General configurations in the machine. config file, such as Ajax and redirection, and perfectly integrating with iis7.
3. open Web. cofig configuration file, found that it is much simpler than the previous version, in an empty website project (Asp. net empty Web Forms Application), only need to, <system. web> there is a framework version specified in the compliation configuration section. The Web. config configuration of an empty web site is as follows:
<! --... -->

<System. Web>
<Compilation DEBUG = "true" targetframework = "4.0"/>

<! --... -->
</System. Web>

</Configuration>
Because the project we created contains form authentication information, you can find our web. the config file contains many configuration information for form authentication, which can be removed from items that do not require form authentication. The following table lists the Form Verification configurations used in our example.

Function	Used configuration section
Forms authentication	Configuration/system. Web/Authentication
ASP. NET membership	Configuration/system. Web/Membership
ASP. NET profile	Configuration/system. Web/Profile
ASP. NET role management	Configuration/system. Web/rolemanager

In addition. in the config file, you can see the Configuration section, which defines the source of the database you used in form verification. The default value is the local aspnetdb in sqlserverexpress 2008. MDF file
Task 4: Use the box-removing jquery script
jquery is a widely used JavaScript framework, the Asp.net 4.0web Site Automatically contains the jquery library. Next we will use jquery to do an exercise and change the color of the page title
1. open default in the project root folder. aspx
2. in default. in the content area of contentplaceholderid = "maincontent" On the ASPX page, add a button to change "Welcome to ASP. net "title Color.
the HTML view code of the page after setting is as follows:

welcome to ASP. NET!

to learn more about ASP. net visit www.asp.net .

you can also find Title =" msdn ASP. net Docs "> documentation on ASP. net at msdn .

3. To use jquery, you must add references to the jqurey script library.HeadercontentAdd the following script to the content area. The HTML view code after successful addition is as follows:
<Asp: Content ID = "headercontent" runat = "server" contentplaceholderid = "headcontent">
<SCRIPT type = "text/JavaScript" src = "scripts/jquery-1.4.1-vsdoc.js"> </SCRIPT>
</ASP: content>
4. InHeadercontentAdd the Javascript script of jquery to the content area to change the title color. The script is as follows:
<Asp: Content ID = "headercontent" runat = "server" contentplaceholderid = "headcontent">
<SCRIPT type = "text/JavaScript" src = "scripts/jquery-1.4.1-vsdoc.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
$ (Document). Ready (function (){
$ ("# Btnchangetitlestyle"). Click (function (){
$ ("H2" ).css ("color", "Red ");
});
});
</SCRIPT>
</ASP: content>

If you are not familiar with jquery, please refer to this section of jquery script. The main function is to respond to the Click Event of the button, and change the title H2 label color to Red through CSS.

after the task is completed, set default. set the ASPX page to the homepage and run the page. Click change title style to see the effect.
if you are not familiar with jqurey, we recommend that you read the garden blog and learn jquery from scratch.