Widgetz SQL Server DB + ASP.NET MVC 3 Web Application Scaffolding

This is a quick walk through of how to setup a database, create some model objects, and build a scaffold for CRUD (Create, Read, Update, and Delete) all using ASP.NET MVC 3 and Visual Studio 2010.

Open Visual Studio 2010 and start a database project as shown.

SQL Server 2008 Database Project in Visual Studio 2010 (Click for full size image)
SQL Server 2008 Database Project in Visual Studio 2010 (Click for full size image)

Next create an ASP.NET MVC 3 Web Application in this solution.

ASP.NET MVC 3 Web Application (Click for full size image)
ASP.NET MVC 3 Web Application (Click for full size image)

Now open the Server Explorer in Visual Studio 2010 (You might have to click on View to find it if it isn’t already available in the main IDE). Right click on the Data Connections node in the Service Explorer Tree. Select Create Database and provide a name for the database.

Create a New SQL 2008 Database
Create a New SQL 2008 Database
New Database Dialog
New Database Dialog

Next in the Server Explorer, right click on the newly created database and select New Query. Then in the query window paste this SQL create script in and run it by right clicking and selecting execute.

[sourcecode languag=”sql”]
CREATE TABLE [dbo].[Widgetz] (
[Id] UNIQUEIDENTIFIER NOT NULL,
[Name] NVARCHAR (50) NOT NULL,
[Description] NTEXT NULL,
[Created] DATETIME NOT NULL,
[Terminated] DATETIME NULL,
[Addon] BIT NOT NULL,
[Active] BIT NOT NULL,
[Cost] MONEY NULL,
[ChildWidgetz] INT NULL
);

ALTER TABLE [dbo].[Widgetz]
ADD CONSTRAINT [PK_Widgetz] PRIMARY KEY CLUSTERED ([Name] ASC) WITH (ALLOW_PAGE_LOCKS = ON, ALLOW_ROW_LOCKS = ON, PAD_INDEX = OFF, IGNORE_DUP_KEY = OFF, STATISTICS_NORECOMPUTE = OFF);

ALTER TABLE [dbo].[Widgetz]
ADD CONSTRAINT [DF_Widgetz_Created] DEFAULT (getdate()) FOR [Created];

ALTER TABLE [dbo].[Widgetz]
ADD CONSTRAINT [DF_Widgetz_Active] DEFAULT ((1)) FOR [Active];

ALTER TABLE [dbo].[Widgetz]
ADD CONSTRAINT [DF_Widgetz_Addon] DEFAULT ((0)) FOR [Addon];
[/sourcecode]

Once the table is created bring to focus the Solution Explorer and right click on the Database Project, selecting the Import Database Objects and Settings.

Import Database Objects and Settings...
Import Database Objects and Settings...

Next select the correct database connection, and leave everything else as it is set.

Selecting the appropriate database, options, and click next... (Click for the full size image)
Selecting the appropriate database, options, and click next... (Click for the full size image)

Next the wizard will finish importing the database objects.

Finished (Click for full size image)
Finished (Click for full size image)

If you look through the folder tree of the project you’ll find individual files for the table, defaults, and other object settings.

Now right click on the Models directory of the ASP.NET MVC 3 Project that was created earlier. Select add and then new item. In that dialog add a new ADO.NET Entity Data Model.

Yup, just when you think it had gone away...  ADO.NET (Click for full size image)
Yup, just when you think it had gone away... ADO.NET (Click for full size image)

A dialog will appear, select the option to Generate from database and click next.

Entity Data Model Wizard (Click for full size image)
Entity Data Model Wizard (Click for full size image)

Next select the correct database connection again, then click on Yes to save the sensitive data (which if you’re using windows authentication it isn’t really going to save anything dangerous). Make sure the entities are named appropriately and click Next.

Options for Creating the ADO.NET Entity Model
Options for Creating the ADO.NET Entity Model

The next screen, which may take a moment or two to display the list of tables and objects, will appear. Select the table that has been created and click on

Entity Data Model Wizard (Click for full size image)
Entity Data Model Wizard (Click for full size image)

Once done and finish is clicked, the entity model file will show the display view of the entity that was just created.

Entity Model
Entity Model

Now right click on the controller folder and select to create a new controller.

Add Controller (Click for full size image)
Add Controller (Click for full size image)

Be sure to click the advanced options and select the layout page.

Advanced Options (Click for full size image)
Advanced Options (Click for full size image)

Now click on Ok and then Add. Visual Studio 2010 will not generate the scaffolding for the controller and views around CRUD operations.

The Scaffolding in ASP.NET MVC 3
The Scaffolding in ASP.NET MVC 3

This might seem like an absurdly easy thing to do, and you’d be right. There are however many steps to turn this into a feasible, well design user interface, and provide a solid and intelligent user experience (UX) to the end user. Also, this is arguably a not so maintainable bit of work. If the end user ONLY wants to operate on the data with CRUD, then this is great. But the minute something else is needed a very different, testable, and maintainable architecture should be utilized instead of this generated scaffolding. Which in coming blog entries I will be covering some of the ways to create testable, maintainable, and better designed architecture around more than CRUD.  🙂

CODE: All the code for this project is available in the Lesson 1 – ScaffoldGeneratedWidgetz.

Exam 70-515 Focus Developing a Web Application by Using ASP.NET MVC 2

…and with this entry, I’ve skipped to the last section of the exam topics related to ASP.NET MVC 2.  Reading and studying the old viewstate based ASP.NET material was a bit rough, which I’ll be writing about in an upcoming entry.  For now, back to focusing on the test at hand.  The MVC Framework is pretty rock star awesome, so with that I’ll get to the notes.

Focus Point:  Developing a Web Application by Using ASP.NET MVC 2

Create Custom Route

  • ASP.NET Routing – ASP.NET enables you to use URLs that do not have a map to specific files in a Web Site.  Because the URL does not have a map to a file, you can use URLs that are descriptive of the user’s action and therefore are more easily understood by users.  Check out URL Patterns for more information (on the same page) and Adding Routes to an MVC Application.  Also for real world implementation you may want to know the difference between Routing and URL Rewriting.
  • Adding Constraints to Routes – In addition to matching the URL request to a route definition by the number of parameters in the URL, you can specify that values in the parameters meet certain constraints.  If a URL contains values that are outside the constraints for a route, that route is not used to handle the request.  You add constraints to make sure that the URL parameters contain values that will work in your application.  Constraints are defined by using regular expressions or by using objects that implement the IRouteConstraint interface. When you add the route definition to the Routes collection, you add constraints by creating a RouteValueDictionary object that contains the verification test. The key in the dictionary identifies the parameter that the constraint applies to. The value in the dictionary can be either a string that represents a regular expression or an object that implements the IRouteConstraint interface. If you provide a string, routing treats the string as a regular expression and checks whether the parameter value is valid by calling the IsMatch method of the Regex class. The regular expression is always treated as case-insensitive. For more information, see .NET Framework Regular Expressions.  If you provide an IRouteConstraint object, ASP.NET routing checks whether the parameter value is valid by calling the Match method of the IRouteConstraint object. The Match method returns a Boolean value that indicates whether the parameter value is valid.
  • Route Class – Provides properties and methods for defining a route and for obtaining information about the route.  The Route class enables you to specify how routing is processed in an ASP.NET application. You create a Route object for each URL pattern that you want to map to a class that can handle requests that correspond to that pattern. You then add the route to the Routes collection. When the application receives a request, ASP.NET routing iterates through the routes in the Routes collection to find the first route that matches the pattern of the URL.  Set the Url property to a URL pattern. The URL pattern consists of segments that come after the application name in an HTTP request. For example, in the URL http:www.contoso.com/products/show/beverages, the pattern applies to products/show/beverages. A pattern with three segments, such as{controller}/{action}/{id}, matches the URL http:www.contoso.com/products/show/beverages. Each segment is delimited by the / character. When a segment is enclosed in braces ( { and } ), the segment is referred to a URL parameter. ASP.NET routing retrieves the value from the request and assigns it to the URL parameter. In the previous example, the URL parameter action is assigned the value show. If the segment is not enclosed in braces, the value is treated as a literal value.  Set the Defaults property to a RouteValueDictionary object that includes values that are used if a parameter is missing from the URL or to set additional values that are not parameterized in the URL. Set the Constraints property to a RouteValueDictionary object that contains values that are either regular expressions orIRouteConstraint objects. These values are used to determine whether a parameter value is valid.
  • Route.Constraints Property – Gets or sets a dictionary of expressions that specify valid values for a URL parameter.  The Constraints property enables you to limit acceptable values for a URL parameter that is processed by a route. You assign a RouteValueDictionary object to the Constraints property. Each element in the RouteValueDictionary object contains the name of a parameter and one of the following:
    • A string that defines a regular expression. The regular expression is case-insensitive.
    • An object that implements the IRouteConstraint interface and that includes a Match method.

The following example is from the MSDN, which shows allowed methods of GET and POST.

[sourcecode language=”csharp”]
void Application_Start(object sender, EventArgs e)
{
RegisterRoutes(RouteTable.Routes);
}

public static void RegisterRoutes(RouteCollection routes)
{
string[] allowedMethods = { "GET", "POST" };
HttpMethodConstraint methodConstraints = new HttpMethodConstraint(allowedMethods);

Route reportRoute = new Route("{locale}/{year}", new ReportRouteHandler());
reportRoute.Constraints = new RouteValueDictionary { { "httpMethod", methodConstraints } };

routes.Add(reportRoute);
}
[/sourcecode]

Create Controllers and Actions

  • Controller and Action Methods in MVC Applications – The ASP.NET MVC Framework maps URLs to classes that are referred to as controllers.  Controllers process incoming requests, handle user input and interactions, and execute appropriate application logic.  A controller class typically calls a separate view component to generate the HTML markup for the request.  The base class for all controllers is the ControllerBase class, which provides general MVC handling.
  • Two great articles;  MSDN Magazine titled Building Web Apps without Web Forms and there is the What’s New section on the ASP.NET MVC Site.
  • Create an action – You add a new action to a controller by adding a new method to the controller. These methods must meet these requirements:
    • Must be public
    • Cannot contain a static method
    • Cannot be an extension method
    • Cannot be a constructor, getter, or setter
    • Cannot have open generic types
    • Cannot contain out or ref parameters
    • is not a method of the controller base class.
  • Create a Controller – This tutorial covers creating a controller including the menu options and scaffolding, etc.
  • Action Filtering in MVC Applications – In ASP.NET MVC, controllers define action methods that usually have a one-to-one relationship with possible user interactions, such as clicking a link or submitting a form.  For example, when a user clicks a link, a request is routed to the designated controller, and the corresponding action method is called.  ASP.NET MVC provides action filters that are custom attributes that provide a declarative means to add pre-action and post-action behavior to controller action methods.

MVC 2 Template Project

Structure an ASP.NET MVC Application

  • MVC Framework and Application Structure – In an ASP.NET website, URLs typically map to files that are stored on disk (usually .aspx files).  These .aspx files include markup and code that is processed in order to respond to the request. The ASP.NET MVC framework maps URLs to server code differently than an ASP.NET Web Forms page. Instead of mapping URLs to ASP.NET pages or handlers, the framework maps URLs to controller classes. Controller classes handle incoming requests, such as user input and interactions, and execute appropriate application and data logic, based on user input. A controller class typically calls a separate view component that generates HTML output as the response. The ASP.NET MVC framework separates the model, view, and controller components.
  • Global URL Routing Defaults see below (from MSDN Article)

[sourcecode language=”csharp”]
public class MvcApplication : System.Web.HttpApplication
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = "" } // Parameter defaults
);

}

protected void Application_Start()
{
RegisterRoutes(RouteTable.Routes);
}
}
[/sourcecode]

Create and Customize Views

Using the begin BeginForm Helper

[sourcecode language=”html”]
<% using(Html.BeginForm("HandleForm", "Home")) %>
<% { %>
<!– Form content goes here –>
<% } %>
[/sourcecode]

Using it declaratively…

[sourcecode language=”html”]
<% Html.BeginForm(); %>
<!– Form content goes here –>
<% Html.EndForm(); %>
[/sourcecode]

Using the Checkbox Helper

[sourcecode language=”html”]
<%= Html.CheckBox("bookType") %>
[/sourcecode]

Using the DropDownList Helper

[sourcecode language=”html”]
<%= Html.DropDownList("pets") %>
[/sourcecode]

[sourcecode language=”csharp”]
List<string> petList = new List<string>();
petList.Add("Dog");
petList.Add("Cat");
petList.Add("Hamster");
petList.Add("Parrot");
petList.Add("Gold fish");
petList.Add("Mountain lion");
petList.Add("Elephant");

ViewData["Pets"] = new SelectList(petList);
[/sourcecode]

Using the RadioButton Helper

[sourcecode language=”html”]
Select your favorite color:<br />
<%= Html.RadioButton("favColor", "Blue", true) %> Blue <br />
<%= Html.RadioButton("favColor", "Purple", false)%> Purple <br />
<%= Html.RadioButton("favColor", "Red", false)%> Red <br />
<%= Html.RadioButton("favColor", "Orange", false)%> Orange <br />
<%= Html.RadioButton("favColor", "Yellow", false)%> Yellow <br />
<%= Html.RadioButton("favColor", "Brown", false)%> Brown <br />
<%= Html.RadioButton("favColor", "Green", false)%> Green
[/sourcecode]

Using the Textbox Helper

[sourcecode language=”html”]
Enter your name: <%= Html.TextBox("name") %>
[/sourcecode]