Getting Started with ASP.NET MVC 5

爱被打了一巴掌 2022-09-18 13:56 177阅读 0赞

地址为:

http://www.asp.net/mvc/tutorials/mvc-5/introduction/getting-started

# Getting Started with ASP.NET MVC 5 #

By [Rick Anderson][] and [Prasanna Rani][] | October 17, 2013

This tutorial will teach you the basics of building an ASP.NET MVC 5 Web application using [Visual Studio 2013][].  A Visual Web Developer project with C\# source code is available to accompany this topic.[Download][] the C\# version. See[Building the Chapter Downloads][] for instructions on building the sample and populating the database.

In the tutorial you run the application in Visual Studio. You can also make the application available over the Internet by deploying it to a hosting provider. Microsoft offers free web hosting for up to 10 web sites in a[free Windows Azure trial account][]. This tutorial was written by[Scott Guthrie][] (twitter[@scottgu][scottgu] ),[Scott Hanselman ][Scott Hanselman] (twitter:[@shanselman][shanselman] ), and[Rick Anderson][Rick Anderson 1] ([@RickAndMSFT][RickAndMSFT] )

## Getting Started ##

Start by installing and running[Visual Studio Express 2013 for Web][] or [Visual Studio 2013][].

Visual Studio 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 Studio 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**.)

![1.PNG_cdn_id_2013-11-25-001][]

## Creating Your First Application ##

Click **New Project**, then select Visual C\# on the left, then **Web** and then select **ASP.NET  Web Application**. Name your project "MvcMovie" and then click **OK**.

![NewProj.PNG_cdn_id_2013-11-25-001][]

In the **New ASP.NET Project** dialog, click **MVC**and then click **OK**.

![2.PNG_cdn_id_2013-11-25-001][]

Visual Studio 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.

![3.PNG_cdn_id_2013-11-25-001][]

Click F5 to start debugging. F5 causes Visual Studio to start [IIS Express][] and run your web app. Visual Studio then launches a browser and opens the application's home page. Notice that the address bar of the browser says `localhost:port#` 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 Studio runs a web project, a random port is used for the web server. In the image below, the port number is 1234. When you run the application, you'll see a different port number.

![4.PNG_cdn_id_2013-11-25-001][]

Right out of the box this default template gives you  Home, Contact and About pages.The image above doesn't show the **Home**, **About** and **Contact** links. Depending on the size of your browser window, you might need to click the navigation icon to see these links.

![nav.PNG_cdn_id_2013-11-25-001][]

![n2.PNG_cdn_id_2013-11-25-001][]

The application also provides support to register and log in. The next step is to change how this application works and learn a little bit about ASP.NET MVC. Close the ASP.NET MVC application and let's change some code.

## Adding a Controller  By [Rick Anderson][Rick Anderson 2] | October 17, 2013     MVC stands for *model-view-controller*. MVC is a pattern for developing applications that are well architected, testable and easy to maintain. MVC-based applications contain:  **M**odels: Classes that represent the data of the application and that use validation logic to enforce business rules for that data.  **V**iews: Template files that your application uses to dynamically generate HTML responses.  **C**ontrollers: Classes that handle incoming browser requests, retrieve model data, and then specify view templates that return a response to the browser.  We'll be covering all these concepts in this tutorial series and show you how to use them to build an application.  Let's begin by creating a controller class. In **Solution Explorer**, right-click the *Controllers* folder and then click **Add**, then **Controller**.     ![AC.png_cdn_id_2013-11-25-001][]  In the **Add Scaffold** dialog box, click **MVC 5 Controller - Empty**, and then click **Add**.  ![AS.PNG_cdn_id_2013-11-25-001][]      Name your new controller "HelloWorldController" and click **Add**.  ![add controller][]  Notice in **Solution Explorer** that a new file has been created named *HelloWorldController.cs* and a new folder *Views\\HelloWorld*.The controller is open in the IDE.  ![hw.PNG_cdn_id_2013-11-25-001][]  Replace the contents of the file with the following code.  usingSystem.Web;usingSystem.Web.Mvc;    namespaceMvcMovie.Controllers  \{       publicclassHelloWorldController:Controller      \{           //          // GET: /HelloWorld/            publicstringIndex()          \{               return"This is my <b>default</b> action...";          \}            //          // GET: /HelloWorld/Welcome/            publicstringWelcome()          \{               return"This is the Welcome action method...";          \}      \}  \}  The controller methods will return a string of HTML as an example. The controller is named `HelloWorldController` and the first method is named `Index`. Let’s invoke it from a browser. Run the application (press F5 or Ctrl+F5). In the browser, append "HelloWorld" to the path in the address bar. (For example, in the illustration below, it's *http://localhost:1234/HelloWorld.*) The page in the browser will look like the following screenshot. In the method above, the code returned a string directly. You told the system to just return some HTML, and it did!   ![IE_helloWorld.PNG_cdn_id_2013-11-25-001][]  ASP.NET MVC invokes different controller classes (and different action methods within them) depending on the incoming URL. The default URL routing logic used by ASP.NET MVC uses a format like this to determine what code to invoke:  `/[Controller]/[ActionName]/[Parameters]`  You set the format for routing in the *App\_Start/RouteConfig.cs*  file.  publicstaticvoidRegisterRoutes(RouteCollection routes)\{      routes.IgnoreRoute("\{resource\}.axd/\{\*pathInfo\}");     routes.MapRoute(         name:"Default",         url:"\{controller\}/\{action\}/\{id\}",         defaults:new\{  controller ="Home", action ="Index", id =UrlParameter.Optional\}     );\}  When you run the application and don't supply any URL segments, it defaults to the "Home" controller and the "Index" action method specified in the defaults section of the code above.   The first part of the URL determines the controller class to execute. So */HelloWorld* maps to the` HelloWorldController` class. The second part of the URL determines the action method on the class to execute. So */HelloWorld/Index* would cause the `Index` method of the `HelloWorldController` class to execute. Notice that we only had to browse to */HelloWorld* and the `Index` method was used by default. This is because a method named` Index` is the default method that will be called on a controller if one is not explicitly specified. The third part of the URL segment (`Parameters`) is for route data. We'll see route data later on in this tutorial.  Browse to *http://localhost:xxxx/HelloWorld/Welcome*. The `Welcome` method runs and returns the string "This is the Welcome action method...". The default MVC mapping is `/[Controller]/[ActionName]/[Parameters]`. For this URL, the controller is `HelloWorld` and `Welcome` is the action method. You haven't used the `[Parameters]` part of the URL yet.  ![WelcomeAction.PNG_cdn_id_2013-11-25-001][]  Let's modify the example slightly so that you can pass some parameter information from the URL to the controller (for example, */HelloWorld/Welcome?name=Scott&numtimes=4*). Change your `Welcome` method to include two parameters as shown below. Note that the code uses the C\# optional-parameter feature to indicate that the`numTimes` parameter should default to 1 if no value is passed for that parameter.  publicstringWelcome(string name,int numTimes =1)\{       returnHttpUtility.HtmlEncode("Hello "\+ name \+", NumTimes is: "\+ numTimes);\}  Security Note: The code above uses [ HttpServerUtility.HtmlEncode][HttpServerUtility.HtmlEncode] to protect the application from malacious input (namely JavaScript).  For more information see [How to: Protect Against Script Exploits in a Web Application by Applying HTML Encoding to Strings][How to_ Protect Against Script Exploits in a Web Application by Applying HTML Encoding to Strings].     Run your application and browse to the example URL (*http://localhost:xxxx/HelloWorld/Welcome?name=Scott&numtimes=4)*. You can try different values for `name` and `numtimes` in the URL. The[ASP.NET MVC model binding system][] automatically maps the named parameters from the query string in the address bar to parameters in your method.  ![numTimesParam.PNG_cdn_id_2013-11-25-001][]  In the sample above, the URL segment (`Parameters`) is not used, the `name`and `numTimes`parameters are passed as [query strings][]. The ? (question mark) in the above URL is a separator, and the query strings follow. The & character separates query strings.  Replace the Welcome method with the following code:  publicstringWelcome(string name,int ID =1)\{      returnHttpUtility.HtmlEncode("Hello "\+ name \+", ID: "\+ ID);\}  Run the application and enter the following URL:  *http://localhost:xxx/HelloWorld/Welcome/3?name=Rick*  ![rick.PNG_cdn_id_2013-11-25-001][]  This time the third URL segment matched the route parameter `ID.` The `Welcome`action method cpntains a parameter (`ID`) that matched the URL specification in the `RegisterRoutes`method.  publicstaticvoidRegisterRoutes(RouteCollection routes)\{      routes.IgnoreRoute("\{resource\}.axd/\{\*pathInfo\}");     routes.MapRoute(         name:"Default",         url:"\{controller\}/\{action\}/\{id\}",         defaults:new\{  controller ="Home", action ="Index", id =UrlParameter.Optional\}     );\}  In ASP.NET MVC applications, it's more typical to pass in parameters as route data (like we did with ID above) than passing them as query strings. You could also add a route to pass both the `name` and `numtimes` in parameters as route data in the URL. In the *App\_Start\\RouteConfig.cs* file, add the "Hello" route:  publicclassRouteConfig\{     publicstaticvoidRegisterRoutes(RouteCollection routes)    \{        routes.IgnoreRoute("\{resource\}.axd/\{\*pathInfo\}");       routes.MapRoute(           name:"Default",           url:"\{controller\}/\{action\}/\{id\}",           defaults:new\{  controller ="Home", action ="Index", id =UrlParameter.Optional\}       );       routes.MapRoute(            name:"Hello",            url:"\{controller\}/\{action\}/\{name\}/\{id\}"        );    \}\}  Run the application and browse to `/localhost:XXX/HelloWorld/Welcome/Scott/3`.  ![hw99.PNG_cdn_id_2013-11-25-001][]  For many MVC applications, the default route works fine. You'll learn laterin this tutorial to pass data using the model binder, and you won't have to modify the default route for that.  In these examples the controller has been doing the "VC" portion of MVC — that is, the view and controller work. The controller is returning HTML directly. Ordinarily you don't want controllers returning HTML directly, since that becomes very cumbersome to code. Instead we'll typically use a separate view template file to help generate the HTML response. Let's look next at how we can do this. ##

[Rick Anderson]: http://www.asp.net/mvc/tutorials/mvc-5/introduction/getting-started#author-20106
[Prasanna Rani]: http://www.asp.net/mvc/tutorials/mvc-5/introduction/getting-started#author-51716
[Visual Studio 2013]: http://www.microsoft.com/visualstudio/eng/2013-downloads
[Download]: http://archive.msdn.microsoft.com/Project/Download/FileDownload.aspx?ProjectName=aspnetmvcsamples&DownloadId=16400
[Building the Chapter Downloads]: http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/building-the-ef5-mvc4-chapter-downloads
[free Windows Azure trial account]: http://www.windowsazure.com/en-us/pricing/free-trial/?WT.mc_id=A443DD604
[Scott Guthrie]: http://weblogs.asp.net/scottgu/
[scottgu]: https://twitter.com/scottgu
[Scott Hanselman]: http://www.hanselman.com/blog/
[shanselman]: https://twitter.com/shanselman
[Rick Anderson 1]: https://twitter.com/RickAndMSFT
[RickAndMSFT]: https://twitter.com/#%21/RickAndMSFT
[Visual Studio Express 2013 for Web]: http://www.microsoft.com/visualstudio/eng/2013-downloads#d-2013-express
[1.PNG_cdn_id_2013-11-25-001]: http://i1.asp.net/media/4409736/1.PNG?cdn_id=2013-11-25-001
[NewProj.PNG_cdn_id_2013-11-25-001]: http://i3.asp.net/media/46632/NewProj.PNG?cdn_id=2013-11-25-001
[2.PNG_cdn_id_2013-11-25-001]: http://i3.asp.net/media/4409754/2.PNG?cdn_id=2013-11-25-001
[3.PNG_cdn_id_2013-11-25-001]: http://i3.asp.net/media/4409748/3.PNG?cdn_id=2013-11-25-001
[IIS Express]: http://www.iis.net/learn/extensions/introduction-to-iis-express/iis-express-overview
[4.PNG_cdn_id_2013-11-25-001]: http://i1.asp.net/media/4409742/4.PNG?cdn_id=2013-11-25-001
[nav.PNG_cdn_id_2013-11-25-001]: http://i3.asp.net/media/4322022/nav.PNG?cdn_id=2013-11-25-001
[n2.PNG_cdn_id_2013-11-25-001]: http://i3.asp.net/media/4322028/n2.PNG?cdn_id=2013-11-25-001
[Rick Anderson 2]: http://www.asp.net/mvc/tutorials/mvc-5/introduction/adding-a-controller#author-20106
[AC.png_cdn_id_2013-11-25-001]: http://i3.asp.net/media/4409997/AC.png?cdn_id=2013-11-25-001
[AS.PNG_cdn_id_2013-11-25-001]: http://i3.asp.net/media/4409991/AS.PNG?cdn_id=2013-11-25-001
[add controller]: http://i1.asp.net/media/46589/addC2.PNG?cdn_id=2013-11-25-001
[hw.PNG_cdn_id_2013-11-25-001]: http://i1.asp.net/media/4410003/hw.PNG?cdn_id=2013-11-25-001
[IE_helloWorld.PNG_cdn_id_2013-11-25-001]: http://i2.asp.net/media/37661/IE_helloWorld.PNG?cdn_id=2013-11-25-001
[WelcomeAction.PNG_cdn_id_2013-11-25-001]: http://i2.asp.net/media/37675/WelcomeAction.PNG?cdn_id=2013-11-25-001
[HttpServerUtility.HtmlEncode]: http://msdn.microsoft.com/en-us/library/w3te6wfz.aspx
[How to_ Protect Against Script Exploits in a Web Application by Applying HTML Encoding to Strings]: http://msdn.microsoft.com/en-us/library/a2a4yykt%28v=vs.100%29.aspx
[ASP.NET MVC model binding system]: http://odetocode.com/Blogs/scott/archive/2009/04/27/6-tips-for-asp-net-mvc-model-binding.aspx
[numTimesParam.PNG_cdn_id_2013-11-25-001]: http://i1.asp.net/media/37664/numTimesParam.PNG?cdn_id=2013-11-25-001
[query strings]: http://en.wikipedia.org/wiki/Query_string
[rick.PNG_cdn_id_2013-11-25-001]: http://i2.asp.net/media/46640/rick.PNG?cdn_id=2013-11-25-001
[hw99.PNG_cdn_id_2013-11-25-001]: http://i2.asp.net/media/4324109/hw99.PNG?cdn_id=2013-11-25-001