MVC 3.0 学习

1. Installing the software

  (1) VS2010

  (2) MVC 3.0

2. Creating a new ASP.NET MVC 3 project

We’ll start by selecting “New Project” from the File menu in Visual Web Developer. This brings up the New Project dialog.

We’ll select the Visual C# -> Web Templates group on the left, then choose the “ASP.NET MVC 3 Web Application” template in the center column. Name your project MvcMusicStore and press the OK button

This will display a secondary dialog which allows us to make some MVC specific settings for our project. Select the following:

 Project Template - select Empty

 View Engine - select Razor

 Use HTML5 semantic markup - checked

Verify that your settings are as shown below, then press the OK button.

This will create our project. Let’s take a look at the folders that have been added to our application in the Solution Explorer on the right side.

The Empty MVC 3 template isn’t completely empty – it adds a basic folder structure:

ASP.NET MVC makes use of some basic naming conventions for folder names:

Folder	Purpose
/Controllers	Controllers respond to input from the browser, decide what to do with it, and return response to the user.
/Views	Views hold our UI templates
/Models	Models hold and manipulate data
/Content	This folder holds our images, CSS, and any other static content
/Scripts	This folder holds our JavaScript files

 

3.Controllers:

With traditional web frameworks, incoming URLs are typically mapped to files on disk. For example: a request for a URL like "/Products.aspx" or "/Products.php" might be processed by a "Products.aspx" or "Products.php" file.Web-based MVC frameworks map URLs to server code in a slightly different way. Instead of mapping incoming URLs to files, they instead map URLs to methods on classes. These classes are called "Controllers" and they are responsible for processing incoming HTTP requests, handling user input, retrieving and saving data, and determining the response to send back to the client (display HTML, download a file, redirect to a different URL, etc.).

 

4. Views

use template files to more easily customize the HTML content send back

 

 

 

When we click the Add button, Visual Web Developer will create a new Index.cshtml view template for us in the \Views\Home directory, creating the folder if doesn’t already exist.

Using a Layout for common site elements

Most websites have content which is shared between many pages: navigation, footers, logo images, stylesheet references, etc. The Razor view engine makes this easy to manage using a page called _Layout.cshtml which has automatically been created for us inside the /Views/Shared folder.

@RenderBody

Razor engine does not have a "master page", instead, called "layout" page (_Layout.cshtml) was placed in the shared view folder. In this page, you'll see labels in a statement:

@RenderBody()

In fact, its role and like the server controls in the master page, when you create a view based on this layout page, view the content and layout of the page in the merge, and new content will layout a page to create a view of the @RenderBody () method to render between labels.

This method does not require parameters, and can appear only once.

@RenderPage

From the name you can guess this to render a page. Fixed head such as a Web page can be individually in view of a shared file, then through the method call in the layout page, usage is as follows:

 

@RenderPage(“~/Views/Shared/_Header.cshtml”) @RenderBody()

From the name you can guess this to render a page. Fixed head such as a Web page can be individually in view of a shared file, then through the method call in the layout page, usage is as follows:

 

@RenderPage(“~/Views/Shared/_Header.cshtml”) @RenderBody()

 

@RendSection

Layout pages have sections (Section) of the concept, that is, if a section is a view defined in the template, so it can be presented separately, usage is as follows:

@RenderPage(“~/Views/Shared/_Header.cshtml”) @RenderBody() @RenderSection(“footer”)

Of course also to define a section in a view, or an exception occurs:

@section footer { Footer Here }

In order to prevent the exception occurred because the section is missing, can give RenderSection () 2nd parameter:

@RenderSection(“footer”, false)

 

Using a Model to pass information to our View

Controller action methods which return an ActionResult can pass a model object to the view.

 

5. Data Access

We’ll use the Entity Framework (EF) support that is included in ASP.NET MVC 3 projects to query and update the database. EF is a flexible object relational mapping (ORM) data API that enables developers to query and update data stored in a database in an object-oriented way.

 

Adding the App_Data folder

We’ll add an App_Data directory to our project to hold our SQL Server Express database files. App_Data is a special directory in ASP.NET which already has the correct security access permissions for database access. From the Project menu, select Add ASP.NET Folder, then App_Data

Creating a Connection String in the web.config file

We will add a few lines to the website’s configuration file so that Entity Framework knows how to connect to our database. Double-click on the Web.config file located in the root of the project.This step is not necessary if you are using SQL CE4, can be used to save the database file, if you use SQL Server do not necessarily require.

 

<connectionStrings>
    <add name="MusicStoreEntities"
    connectionString="Data Source=|DataDirectory|MvcMusicStore.sdf"
    providerName="System.Data.SqlServerCe.4.0"/>
 </connectionStrings>

Note that the name of a database connection string is important here, later when using the EF Code-First through it to find the database, link here use Data Source=| DataDirectory| MvcMusicStore.sdf, DataDirectory here refers only to the App_Data folder in the project folder.

 

If you are using SQL Server, you can use the following series of links. Note providerName should replace SQLServer using provider.

If you are using SQL Server, you can use the following series of links. Note providerName should replace SQLServer using provider.

<!-- 数据库连接串的配置 -->

  <connectionStrings>   

<add name="MusicStoreEntities"        connectionString="server=.\sqlexpress;database=musicstore;integrated security=true;"        providerName="System.Data.SqlClient"/>

</connectionStrings>

 

Increase context classIn the models folder right click on, and then add a new file named MusicStoreEntities.cs. Need to be aware of is that the class name must match the name of the database connection string.

This class will reflect the Entity Framework database context to deal with create, read, update, and delete operations

Note that the System.Data.Entity namespace are used here. Remember to using it.

No additional configuration is required, a specific interface, and so on, by extending the DbContext base class, we can deal with our MusicStoreEntities class for database operation

 

Adding our store catalog data

 

Now we need to add one line of code to tell Entity Framework about that SampleData class. Double-click on the Global.asax file in the root of the project to open it and add the following line to the top the Application_Start method.

protected void Application_Start()

{

System.Data.Entity.Database.SetInitializer(new MvcMusicStore.Models.SampleData());

AreaRegistration.RegisterAllAreas();

RegisterGlobalFilters(GlobalFilters.Filters);

RegisterRoutes(RouteTable.Routes);

}

At this point, we’ve completed the work necessary to configure Entity Framework for our project.

 

Creating the StoreManagerController

We’ll begin by creating a new controller called StoreManagerController. For this controller, we will be taking advantage of the Scaffolding features available in the ASP.NET MVC 3 Tools Update. Set the options for the Add Controller dialog as shown below.

When you click the Add button, you’ll see that the ASP.NET MVC 3 scaffolding mechanism does a good amount of work for you:

 It creates the new StoreManagerController with a local Entity Framework variable

 It adds a StoreManager folder to the project’s Views folder

 It adds Create.cshtml, Delete.cshtml, Details.cshtml, Edit.cshtml, and Index.cshtml view, strongly typed to the Album class