Asp 2-createaspnetmvc
0 likes98 views
This document describes the steps to build a basic ASP.NET MVC 5 application. It involves creating an MVC 5 project in Visual Studio, preparing an Employee model class, adding an EmployeeController with an Index action method, and adding a corresponding Index view. The Index action method returns the Index view, which displays some sample text. Running the application displays this text, demonstrating a simple MVC application is now set up.
Asp 2-createaspnetmvc
- 1. Building a Basic ASP.NET MVC 5 Application 1
- 2. MVC 5 Application 1. Creating MVC5 project in Visual Studio 2013 • Open Visual Studio Express 2013 for Web and create “New Project” as “File –> New Project. • Choose “ASP.NET Web Application” template as shown in following figure. Name the project as “MyFirstMVC5App”, choose location and press “OK” button. 2
- 3. MVC 5 Application . In next dialog, choose “MVC” as template and again press “OK” button. 3
- 4. MVC 5 Application . A new ASP.NET MVC 5 project will be created as follows. You can easily find the “Controllers”, “Models” and “Views” folder in solution explorer. 4
- 5. MVC 5 Application 2. Preparing a Model • In order to prepare a model, right click on “Models” folder and choose “Add”, then “Class”. • Name the class as “Employee.cs”. 5
- 6. MVC 5 Application public class Employee { public string EmpID { get; set; } public string EmpFirstName { get; set; } public string EmpLastName { get; set; } } Model is the representation of data structure in our Data Source, so you can assume this “Employee” class represents an Employee table in our database with columns as “EmpID”, “EmpFirstName”, “EmpLastName” and so on. 6
- 7. MVC 5 Application • 3. Add a Controller • To add a controller to our project, right click on “Controllers” folder, choose “Add”, then “Controller”. • From “Add Scaffold” dialog, choose “MVC 5 Controller – Empty” and press “Add” button as follows: 7
- 8. MVC 5 Application 8 • Name the controller as “EmployeeController” in next dialog and press “Add”. A new controller will be added to “Controllers” folder. Controller code generated will be as follows:
- 9. MVC 5 Application 9 namespace MyFirstMVC5App.Controllers { public class EmployeeController : Controller { // GET: /Employee/ public ActionResult Index() { return View(); } } } • EmployeeController inheriting from base Controller class has a method named Index(). This Index() method will be the default method called when accessing this controller as (http://localhost:xxxx/Employee/). • In order to generate HTML response, above Index() method uses a view template i.e. represented in code as “return View();” • As we create a controller, a new folder will be created under “Views” named as “Employee”.
- 10. MVC 5 Application 10 4. Add a View • Finally for adding a view, right click on newly created “Employee” folder under views, choose “Add”, then “MVC 5 View Page (Razor)”. Specify the name for the view “Index” as follows:
- 11. MVC 5 Application 11 A new file with the name “Index.cshtml” will be added under “Views->Employee” folder. I have added meaningful some text to this page as shown in below figure.
- 12. MVC 5 Application 12 Now, we are done with creating a simple ASP.NET MVC 5 application. To run the application, click CTRL + F5. Or hange the URL in browser from above to http://localhost:11517/Employee/ and press enter, still the output remains the same. Result will be as follows: