## Overview ##
In this demo you will walk through the process of creating a new site using the new One ASP.NET tooling in Visual Sudio. You will start with a Web Forms application, create a simple model "Person" and use the new tooling to scaffold an MVC and a Web Api controller for it.
### Goals ### In this demo, you will see how to:- Create a new site using the new One ASP.NET tooling
- Create a simple model "Person"
- Scaffold an MVC controller for Person
- Scaffold a Web API controller for Person
-
Follow the steps detailed in this link to setup local sources for the following directories:
- C:\Program Files (x86)\Microsoft Web Tools\Packages
- C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Stack 5\Packages
-
Open Visual Studio 2013.
- Creating a new site.
- Creating an MVC Controller using Scaffolding.
- Creating a Web API using Scaffolding.
- Running the site.
-
Open the File / New Project dialog and show the options in the Visual C# / Web section.
-
Name the application MyHybridSite and click OK.
Creating a new ASP.NET Web Application project
-
Select the Web Forms template and check the MVC and Web API options.
-
Click OK to create the project.
Creating a new project with the WebForms template, including Web API and MVC libraries.
-
Explore the generated solution in the Solution Explorer.
Exploring the generated solution
-
Open the Default.aspx file and show the generated code.
-
Press F5 to run the web site.
-
Navigate to /default.aspx.
Navigating to the default webform
Note: Even if we are on that page, specifying .aspx in the URL emphasizes the fact that this is WebForms.
-
Close the browser.
-
Create a new model class named Person. To do that, right-click the Models folder, expand the Add menu and select Class....
Adding a new model class
-
Name the file Person.cs and click Add.
Creating the Person model class
-
Add the highlighted code in the following code snippet to the Person class.
public class Person { public int Id { get; set; } public string Name { get; set; } public int Age { get; set; } }
1. Build the solution.
<a name="Segment2" />
### Creating an MVC Controller using Scaffolding ###
1. Create the controller and views for the _Person_ model class using scaffolding. To do that, right-click the **Controllers** folder, expand the **Add** menu and select **New Scaffolded Item...**
_Creating a new scaffolded Controller_
1. Select the **MVC 5 Controller with views, using Entity Framework** option in the **Add Scaffold** dialog and click **Add**.
_Selecting the MVC 5 Controller with views and Entity Framework_
1. Change the name of the controller to **MvcPersonController**.
_Changing the controller name_
1. Check the **Use async controller actions** checkbox.
_Checking the use async controller actions checkbox_
1. Select **Person** from the **Model class** list.
_Selecting the Person model_
1. Create a new data context named **PersonContext**.
_Creating the new PersonContext_
1. Finally, click **Add** to create the views and the controller with the default actions.
_Creating the MvcPerson Controller_
1. In the **Solution Explorer**, expand the **Controllers** folder and show the **MvcPersonController.cs** file, which was just created.
1. Open the **MvcPersonController.cs** file to show the generated code.
1. Expand the **Views** folder and show the new views under the **MvcPerson** folder.
<a name="Segment3" />
### Creating a Web API using Scaffolding ###
1. Create the Web API controller for the _Person_ Model class using scaffolding. To do that, right-click the **Controllers** folder, expand the **Add** menu and select **New Scaffolded Item...**
_Creating a new scaffolded Controller_
1. Select the **Web API 2 Controller with actions, using Entity Framework** option in the **Add Scaffold** dialog and click **Add**.
_Selecting the Web API 2 Controller with actions, using Entity Framework_
1. Change the name of the Web API to **ApiPersonController**.
1. Select **Person** from the **Model class** list.
_Selecting the Person model_
1. If not selected, select the **Use async controller actions** option.
1. Finally, click **Add** to create the API controller with the default actions.
_Creating the ApiPerson Web API_
1. In **Solution Explorer** expand the **Controller** folder and show the **ApiPersonController.cs** file, which was just created.
1. Open the **ApiPersonController.cs** file to show the generated code.
<a name="Segment4" />
### Running the site ###
1. Press **F5** to run the web site.
1. Navigate to **/MvcPerson** to show the scaffolded view.
1. Start creting a new person by clicking **Create New**.
_Navigating to the scaffolded MVC views_
1. Provide values for the fields and click **Create**.
_Creating a new person_
1. Show the new element in the list.
_Showing the new element in the index view_
1. Click **Details** and show the person's details.
_Showing the new element details_
1. Go back to the index page by clicking **Back to List**.
1. Finally, click on **Delete** to delete the person.
_Deleting the element_
---
<a name="summary" />
## Summary ##
By completing this demo you should have:
* Created a new Web Forms site using the new One ASP.NET template.
* Created a simple model "Person"
* Scaffolded a new MVC controller for Person
* Scaffolded a new Web API controller for Person
---