Intro to ASP.NET MVC 3 (C#)

r囧r小猫 2022-10-10 04:53 92阅读 0赞

[Tweet][]

This tutorial will teach you the basics of building an ASP.NET MVC Web application using Microsoft Visual Web Developer 2010 Express Service Pack 1, which is a free version of Microsoft Visual Studio. Before you start, make sure you've installed the prerequisites listed below. You can install all of them by clicking the following link: [ Web Platform Installer][Web Platform Installer]. Alternatively, you can individually install the prerequisites using the following links:

*  [Visual Studio Web Developer Express SP1 prerequisites][Web Platform Installer]
 *  [ASP.NET MVC 3 Tools Update][]
 *  [SQL Server Compact 4.0][](runtime + tools support)

If you're using Visual Studio 2010 instead of Visual Web Developer 2010, install the prerequisites by clicking the following link:[Visual Studio 2010 prerequisites][].

A Visual Web Developer project with C\# source code is available to accompany this topic.[Download the C\# version][Download the C_ version]. If you prefer Visual Basic, switch to the [ Visual Basic version][Visual Basic version] of this tutorial.

## What You'll Build ##

You'll implement a simple movie-listing application that supports creating, editing, and listing movies from a database. Below are two screenshots of the application you’ll build. It includes a page that displays a list of movies from a database:

![MoviesWithVariousSm][]

The application also lets you add, edit, and delete movies, as well as see details about individual ones. All data-entry scenarios include validation to ensure that the data stored in the database is correct.

![WindowsLiveWriter_IntrotoASP.NETMVC3_E539_createError_thumb_1.png_cdn_id_2013-08-19-002][]

## Skills You'll Learn ##

Here's what you'll learn:

*  How to create a new ASP.NET MVC project.
 *  How to create ASP.NET MVC controllers and views.
 *  How to create a new database using the Entity Framework Code First paradigm.
 *  How to retrieve and display data.
 *  How to edit data and enable data validation.

## Getting Started ##

Start by running Visual Web Developer 2010 Express ("Visual Web Developer" for short) and select**New Project** from the **Start** page.

Visual Web Developer is an IDE, or integrated development environment. Just like you use Microsoft Word to write documents, you'll use an IDE to create applications. In Visual Web Developer there's a toolbar along the top showing various options available to you. There's also a menu that provides another way to perform tasks in the IDE. (For example, instead of selecting**New Project** from the **Start** page, you can use the menu and select**File** > **New Project**.)

[![VWDsm.PNG][]][VWDsm.PNG 1]

## Creating Your First Application ##

You can create applications using either Visual Basic or Visual C\# as the programming language. Select Visual C\# on the left and then select**ASP.NET MVC 3 Web Application**. Name your project "MvcMovie" and then click**OK**. (If you prefer Visual Basic, switch to the [ Visual Basic version][Visual Basic version 1] of this tutorial.)

![NewProjectSm.PNG][]

In the **New ASP.NET MVC 3 Project** dialog box, select **Internet Application**. Check**Use HTML5 markup** and leave **Razor** as the default view engine.

![WindowsLiveWriter_IntrotoASP.NETMVC3_E539_NewMVC3project_10.png_cdn_id_2013-08-19-002][]

Click **OK**. Visual Web Developer used a default template for the ASP.NET MVC project you just created, so you have a working application right now without doing anything! This is a simple "Hello World!" project, and it's a good place to start your application.

[![VisualStudioMvcMovieSm.PNG][]][VisualStudioMvcMovieSm.PNG 1]

From the **Debug** menu, select **Start Debugging**.

![StartWithoutDebug.png][]

Notice that the keyboard shortcut to start debugging is F5.

F5 causes Visual Web Developer to start a development web server and run your web application. Visual Web Developer then launches a browser and opens the application's home page. Notice that the address bar of the browser says`localhost` and not something like `example.com`. That's because`localhost` always points to your own local computer, which in this case is running the application you just built. When Visual Web Developer runs a web project, a random port is used for the web server. In the image below, the random port number is 43246. When you run the application, you'll probably see a different port number.

![YourProjectWillHave.PNG][]

Right out of the box this default template gives you two pages to visit and a basic login page. The next step is to change how this application works and learn a little bit about ASP.NET MVC in the process. Close your browser and let's change some code.

[Tweet]: https://twitter.com/share
[Web Platform Installer]: http://www.microsoft.com/web/gallery/install.aspx?appid=VWD2010SP1Pack
[ASP.NET MVC 3 Tools Update]: http://www.microsoft.com/web/gallery/install.aspx?appsxml=&appid=MVC3
[SQL Server Compact 4.0]: http://www.microsoft.com/web/gallery/install.aspx?appid=SQLCE;SQLCEVSTools_4_0
[Visual Studio 2010 prerequisites]: http://www.microsoft.com/web/gallery/install.aspx?appsxml=&appid=VS2010SP1Pack
[Download the C_ version]: http://code.msdn.microsoft.com/Introduction-to-MVC-3-10d1b098
[Visual Basic version]: http://www.asp.net/mvc/tutorials/getting-started-with-aspnet-mvc3/vb/intro-to-aspnet-mvc-3
[MoviesWithVariousSm]: http://i2.asp.net/media/2578252/WindowsLiveWriter_IntrotoASP.NETMVC3_E539_MoviesWithVariousSm_thumb.png?cdn_id=2013-08-19-002
[WindowsLiveWriter_IntrotoASP.NETMVC3_E539_createError_thumb_1.png_cdn_id_2013-08-19-002]: http://i3.asp.net/media/2578258/WindowsLiveWriter_IntrotoASP.NETMVC3_E539_createError_thumb_1.png?cdn_id=2013-08-19-002
[VWDsm.PNG]: http://i3.asp.net/common/www-css/i//MVC3/MVC3_gettingStarted_CS/img/VWDsm.PNG
[VWDsm.PNG 1]: http://i3.asp.net/common/www-css/i//MVC3/MVC3_gettingStarted_CS/img/VWD.PNG
[Visual Basic version 1]: http://www.asp.net/mvc/tutorials/getting-started-with-mvc3-part1-vb
[NewProjectSm.PNG]: http://i3.asp.net/common/www-css/i//MVC3/MVC3_gettingStarted_CS/img/NewProjectSm.PNG
[WindowsLiveWriter_IntrotoASP.NETMVC3_E539_NewMVC3project_10.png_cdn_id_2013-08-19-002]: http://i2.asp.net/media/2578264/WindowsLiveWriter_IntrotoASP.NETMVC3_E539_NewMVC3project_10.png?cdn_id=2013-08-19-002
[VisualStudioMvcMovieSm.PNG]: http://i3.asp.net/common/www-css/i//MVC3/MVC3_gettingStarted_CS/img/VisualStudioMvcMovieSm.PNG
[VisualStudioMvcMovieSm.PNG 1]: http://i3.asp.net/common/www-css/i//MVC3/MVC3_gettingStarted_CS/img/VisualStudioMvcMovie.png
[StartWithoutDebug.png]: http://i3.asp.net/common/www-css/i//MVC3/MVC3_gettingStarted_CS/img/StartWithoutDebug.png
[YourProjectWillHave.PNG]: http://i3.asp.net/common/www-css/i//MVC3/MVC3_gettingStarted_CS/img/YourProjectWillHave.PNG