Creating the MVC application
Few days ago I posted a video demo on a simple project using
ASP.NET MVC 2 and Jquery. In this post I will be using MVC 3 framework to create a simple Toy Store project. Lets start!
1. In Visual Studio 2010, add a new project by selecting the File>New>Project.
2. At the left side you can see a list of installed templates. Choose the language of your choice and select web.
|
Figure 1. Create an ASP.NET MVC 3 web application. |
3. Select ASP.NET MVC 3 Web Application using your language of choice. This project will use VB.NET for the code behind.
4. Name the project ToyStoreMVC3Jquery and then click OK.
5. In the New ASP.NET MVC 3 Project wizard, choose Internet Application, select Razor as your view engine and click OK. You can also select ASP as your view engine but I would prefer to use Razor.
Congratulations! You just have created your first ASP.NET MVC 3 application. Test the application by running the code you will have the result the same as the image bellow.
|
Figure 2. Your first ASP.NET MVC 3 application. |
In Figure 2, the application already has a template that you can work on. During the creation of the project we selected the Internet Application which provide us with this template. Some people would prefer the empty project template but to omit the cost of time consuming design I prefer to use the available template.
|
Figure 3. The ToyStoreMVC3Jquery Solution. |
The MVC 3 frameworks provides us with a default structure such as shown in Figure 3. One thing that I can point out with this structure is the separation of concern. Each folder identifies a specific role in the application.
M - Model
The M in MVC stands for Model which contains the Domain Classes that identify our entities. Each class is called a model. Let us create a model named Product.
1. Right click on the Models folder located in the Solution Explorer.
2. In the context menu, select Add > Class.
3. Name the class "Product" and click OK.
4. Right click on the project located in the Solution Explorer.
5. In the context menu, select Add Reference.
6. Select the Browse tab and navigate to "C:\Program Files (x86)\Microsoft ADO.NET Entity Framework 4.1\Binaries". Select EntityFramework.dll and click OK.
The code for the product class is written bellow. I have identified five properties of the object product. Bellow the Product class it the ProductDBContext. This class will manage the classes and the database interaction. The Entity Framework will serve as the bridge from our classes to the database. We will use the DbSet Property "Products" to execute database query. This Entity Framework method will return set of Product object instances that we can use in our application.
Product.vb
Imports System.Data.Entity
Imports System.ComponentModel.DataAnnotations
Public Class Product
Public Property Id() As Integer
<required()>
Public Property Name() As String
<required()>
Public Property Description() As String
Public Property Price() As Double
End Class
Public Class ProductDBContext
Inherits DbContext
Public Property Products() As DbSet(Of Product)
Protected Overrides Sub OnModelCreating(ByVal modelBuilder As System.Data.Entity.DbModelBuilder)
End Sub
End Class
Question: Where is the Database?
Their are three methods that are commonly used nowadays.
- Database First - This approach allows you to use legacy database in your ORM application. It supposes that you already have existing database and build your entity model based on this database.
- Model First - This approach supposes creating entity model (its conceptual part), and then generating storage, mapping, and DDL for creating a database schema, based on the storage part of the model. It was implemented in that way in Entity Framework 4.1.
- Code First - This method depends on the location of a database. If the database is specified in the configuration, EF will locate the database by default. If the database does not exist, the EF will create the database for you. The default database will be created in the SQL Server Express with the name derived from a strongly typed name of the context.
Sounds great! I will be using the Code First method with SQL Server Express for this project.
C - Controller
C stands for Controller. This folder contains the logic that will handle our formula and query. In this project the controller will retrieve data from the database and pass the data to the view. In a more advanced application this is not recommended. Separation of logic is very important for complex application. Today, I am using certain pasterns to identify layers for better implementation of separation of concern. Thus, creating a loosely coupled application.
Let us start with the Index and Details method. This is the code for the controller.
Namespace ToyStoreMVC3Jquery
Public Class HomeController
Inherits System.Web.Mvc.Controller
Private _entities As New ProductDBContext
'
' GET: /Home
Function Index() As ActionResult
Return View(_entities.Products.ToList())
End Function
'
' GET: /Home/Details/5
Function Details(ByVal id As Integer) As ActionResult
Dim result = (From p In _entities.Products _
Where p.Id = id _
Select p).FirstOrDefault()
Return View(result)
End Function
End Class
End Namespace
V - View
Finally, V which stands for View. The view is the presentation layer. This layer is what the user see and interact with. MVC framework allows us to scaffold the view. Lets proceed to understand more about this process.
1. To create the view for index (the default page of the web application), right click the index function and select Add View.
2. A dialog box will appear. Check the "Create a strongly-typed view" and select the model class "ProductDBContext(ToyStoreMVC3Jquery).
3. Select the scaffold template "List". Leave the other options and click Add.
We can create the Details view by just repeating the process. This time we select "Details" for the scaffolding template. The process will then generate two files (Index.vbhtml and Details.vbhtml ). These files are located at the Views folder.
Connection String
Next we have to change the connection string to implement Code First. The connection string will provide the link to the SQL Server Express. Open the Web.config and change the <connectionStrings> with this code.
Web.config
<connectionStrings>
<add name="ProductDBContext"
connectionString="Server=.\SQLEXPRESS;Database=ToySotreDB;Trusted_Connection=true"
providerName="System.Data.SqlClient" />
</connectionStrings>
Now we are done with configuration. Lets try to run our application. The expected output is that the EF will generate a database named ToyStoreDB. This database contains a table named Product with the fields that we identified earlier in the Product class. Open your SQL Server Manager and locate ToyStoreDB such as shown in Figure 4.
In the next post I will present the Create, Edit and Delete Method.
Last week their have been email coming from readers asking for the source code of the ASP.NET MVC 3 Entity Framework Code First implementation. GOOD NEWS! I have finally uploaded the sample project on my github public repo. The ToyStoreMVC3 is written in VB.NET and you can now download or fork the solution in your own github account. For those of you who already have a github account, you may keep track of the projects that I am into by following me on github. 
