This blog post shows how to validate models containing complex types such as Objects and Lists in ASP.NET MVC 3.

In a first step we modify the properties of the model ( Models/ValidationModel.cs) and add some complex types:

public class ValidUserNameAttribue : ValidationAttribute
{
  public override bool IsValid(object value)
  {
    return (value != null && value.ToString() == "Bob");
  }
}

public class User
{
  [Required]
  [StringLength(8, MinimumLength = 3)]
  [ValidUserNameAttribue(ErrorMessage = "User name != 'Bob'")]
  [Display(Name = "User name")]
  public string UserName { get; set; }

  [Required]
  [StringLength(8, MinimumLength = 3)]
  [Display(Name = "Display name")]
  public string DisplayName { get; set; }
}

public class ValidationModel
{
  public User User { get; set; }

  public List Users { get; set; }
}

In a second step we modify the form ( Views\Home\Partial\_Form.cshtml) to add input element for the new model properties:

@model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel

@DateTime.Now: Partial/_Form.cshtml rendered
< hr/>

@using (Html.BeginForm("Form", "Home"))
{
  <h1><em>User</em> object</h1>

  <p>
    @Html.LabelFor(m => m.User.UserName):
    @Html.EditorFor(m => m.User.UserName)
    @Html.ValidationMessageFor(m => m.User.UserName)
  </p>

  <p>
    @Html.LabelFor(m => m.User.DisplayName):
    @Html.EditorFor(m => m.User.DisplayName)
    @Html.ValidationMessageFor(m => m.User.DisplayName)
  </p>

  <h1>List of <em>User</em> objects</h1>

  for (var i = 0; i <= 1; i++)
  {
    <h2>User @i</h2>

    <p>
      @Html.LabelFor(m => m.Users[i].UserName):
      @Html.EditorFor(m => m.Users[i].UserName)
      @Html.ValidationMessageFor(m => m.Users[i].UserName)
    </p>

    <p>
      @Html.LabelFor(m => m.Users[i].DisplayName):
      @Html.EditorFor(m => m.Users[i].DisplayName)
      @Html.ValidationMessageFor(m => m.Users[i].DisplayName)
    </p>
  }

  <input type="submit" value="Submit" />
}

In a last step we adapt the “success-view” ( Views\Home\Partial\_Success.cshtml) that is shown after the data have been successfully validated on the server side:

@model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel

< p><strong>Model is valid :)</strong></p>

< p>
  Model.User.Username: '@Model.User.UserName'<br />
  Model.User.DisplayName: '@Model.User.DisplayName'<br />
  Model.Users[0].Username: '@Model.Users[0].UserName'<br />
  Model.Users[0].DisplayName: '@Model.Users[0].DisplayName'<br />
  Model.Users[1].Username: '@Model.Users[1].UserName'<br />
  Model.Users[1].DisplayName: '@Model.Users[1].DisplayName'
</ p>

As you can see in the source code above, there is no magic; model binding and validation of complex objects and lists work out of the box in ASP.NET MVC 3.

In this blog post I will show how to set up custom error pages in ASP.NET MVC 3 applications to create user-friendly error messages instead of the (yellow) IIS default error pages for both “normal” (non-AJAX) requests and jQuery AJAX requests.

In this showcase we will implement custom error pages to handle the HTTP error codes 404 (“Not Found”) and 500 (“Internal server error”) which I think are the most common errors that could occur in web applications. In a first step we will set up the custom error pages to handle errors occurring in “normal” non-AJAX requests and in a second step we add a little JavaScript jQuery code that handles jQuery AJAX errors.

We start with a new (empty) ASP.NET MVC 3 project and activate custom errors in the Web.config by adding the following lines under <system.web>:

<customErrors mode="On" defaultRedirect="/Error">
  <error redirect="/Error/NotFound" statusCode="404"/>
  <error redirect="/Error/InternalServerError" statusCode="500"/>
</customErrors>

Note: You can set mode=”Off” to disable custom errors which could be helpful while developing or debugging. Setting mode=”RemoteOnly” activates custom errors only for remote clients, i.e. disables custom errors when accessing via http://localhost/[...]. In this example setting mode=”On” is fine since we want to test our custom errors. You can find more information about the <customErrors> element here.

In a next step we remove the following line in Global.asax.cs file:

filters.Add(new HandleErrorAttribute());

and add a new ErrorController (Controllers/ErrorController.cs):

public class ErrorController : Controller
{
  public ActionResult Index()
  {
    return InternalServerError();
  }

  public ActionResult NotFound()
  {
    Response.TrySkipIisCustomErrors = true;
    Response.StatusCode = (int)HttpStatusCode.NotFound;
    return View("NotFound");
  }

  public ActionResult InternalServerError()
  {
    Response.TrySkipIisCustomErrors = true;
    Response.StatusCode = (int)HttpStatusCode.InternalServerError;
    return View("InternalServerError");
  }
}

In a last step we add the ErrorController‘s views (Views/Error/NotFound.cshtml and Views/Error/InternalServerError.cshtml) that defines the (error) pages the end user will see in case of an error. The views include a partial view defined in Views/Shared/Error/NotFoundInfo.cshtml respectively Views/Shared/Error/InternalServerErrorInfo.cshtml that contains the concrete error messages. As we will see below using these partial views enables us to reuse the same error messages to handle AJAX errors.

Views/Error/NotFound.cshtml:

@{
  ViewBag.Title = "Not found";
}
@{
  Html.RenderPartial("Error/NotFoundInfo");
}

Views/Shared/Error/NotFoundInfo.cshtml:

The URL you have requested was not found.

Views/Error/InternalServerError.cshtml:

@{
  ViewBag.Title = "Internal server error";
}
@{
  Html.RenderPartial("Error/InternalServerErrorInfo");
}

Views/Shared/Error/InternalServerErrorInfo.cshtml:

An internal Server error occured.

To handle errors occurring in (jQuery) AJAX calls we will use jQuery UI to show a dialog containing the error messages. In order to include jQuery UI we need to add two lines to Views/Shared/_Layout.cshtml:

<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>

Moreover we add the following jQuery JavaScript code (defining the global AJAX error handling) and the Razor snippet (defining the dialog containers) to Views/Shared/_Layout.cshtml:

< script type="text/javascript">
  $(function () {
    // Initialize dialogs ...
    var dialogOptions = {
      autoOpen: false,
      draggable: false,
      modal: true,
      resizable: false,
      title: "Error",
      closeOnEscape: false,
      open: function () { $(".ui-dialog-titlebar-close").hide(); }, // Hide close button
      buttons: [{
        text: "Close",
        click: function () { $(this).dialog("close"); }
      }]
    };
    $("#InternalServerErrorDialog").dialog(dialogOptions);
    $("#NotFoundInfoDialog").dialog(dialogOptions);

    // Set up AJAX error handling ...
    $(document).ajaxError(function (event, jqXHR, ajaxSettings, thrownError)
{
      if (jqXHR.status == 404) {
        $("#NotFoundInfoDialog").dialog("open");
      } else if (jqXHR.status == 500) {
        $("#InternalServerErrorDialog").dialog("open");
      } else {
        alert("Something unexpected happend :( ...");
      }
    });
  });
</ script>

<div id="NotFoundInfoDialog">
  @{ Html.RenderPartial("Error/NotFoundInfo"); }
</div>
<div id="InternalServerErrorDialog">
  @{ Html.RenderPartial("Error/InternalServerErrorInfo"); }
</div>

As you can see in the Razor snippet above we reuse the error texts defined in the partial views saved in Views/Shared/Error/.


To test our custom errors we define the HomeController (Controllers/HomeController.cs) as follows:

  public class HomeController : Controller
  {
  public ActionResult Index()
  {
    return View();
  }
  public ActionResult Error500()
  {
    throw new Exception();
  }
}

and the corresponding view Views/Home/Index.cshtml:

@{
  ViewBag.Title = "ViewPage1";
}

<script type="text/javascript">
  $function () {
    $("a.ajax").click(function (event) {
      event.preventDefault();
      $.ajax({
      url: $(this).attr('href'),
    });
  });
});
</script>

<ul>
  <li>@Html.ActionLink("Error 404 (Not Found)", "Error404")</li>
  <li>@Html.ActionLink("Error 404 (Not Found) [AJAX]", "Error404", new { },
new { Class = "ajax" })</li>
  <li>@Html.ActionLink("Error 500 (Internal Server Error)", "Error500")</li>
  <li>@Html.ActionLink("Error 500 (Internal Server Error) [AJAX]", "Error500", new { }, new { Class = "ajax" })</li>
</ul>

To test the custom errors you can launch the project and click one of the four links defined in the view above. The “AJAX links” should open a dialog containing the error message and the “non-AJAX” links should redirect to a new page showing the same error message.

Summarized this blog post shows how to set up custom errors that handle errors occurring in both AJAX requests and “non-AJAX” requests. Depending on the project, one could customize the example code shown above to handle other HTTP errors as well or to show more customized error messages or dialogs.

Description

Normally in a MVC3 application we have generally 3 sections.

Model, Controller, View.

Now in a real-world project in our Application there may be many modules.

So separating each of the modules in our MVC3 application is highly recommendable.

In ASP.Net MVC3 we have features called "area" where we can separate into different modules.

For e.g. ADMIN, CUSTOMER, PRODUCT etc.

Now I will show you an example of how to create the "AREA" in MVC3.

Step 1:

Now first create an ASP.Net MVC3 application.

Step 2:

Now right-click the project and "add" a new area with the name "Admin"; that means in our project there are an "admin" module. See the following picture:

Step 3:

After adding the "admin" area you will see that a separate "Areas" folder will be created. Under this folder controller, model and views, shared folders will be generated.

Now under the "Controller" folder add a new controller named "admin controller".

Now from the "admincontroller" create a new view named "index" from the "index" method.

After that copy the "_layout.cshtml" from the main project and paste it under the "Areas" Shared folder.

Now the whole structure will look like the following once.



Step 4:

Now add a new action link for "Admin" under the _layout.cshtml" like the following picture:



<li>@Html.ActionLink("Admin", "Index", "Admin")</li>

So the admin link will be created and when we click the "admin" link it will redirect to the "admin" part of our project which is under the "Areas".

Step 5:

Now go to the "AdminAreaRegistration" file (just the following picture) and modify the existing code like below:



public override void RegisterArea(AreaRegistrationContext context)
{
context.MapRoute(
"Admin_default",
"Admin/{controller}/{action}/{id}",
new { controller = "Admin", action = "Index", id = UrlParameter.Optional }
);

I have added here only Controller Name "Admin"( controller = "Admin") extra under the new {} section.

Now run the application it will look like the following picture:



See here "Admin" link has come.

Now after clicking the admin link it will show like the following picture:



See the url routing. It calls our "Admin " Areas part.

So by this way we can group our project modules into our ASP.Net MVC3 application.

Conclusion

So in this article we have learned what is the purpose of use of "Area" features in ASP.Net MVC3 and how to implement them.

Description

Normally in a MVC3 application we have generally 3 sections.

Model, Controller, View.

Now in a real-world project in our Application there may be many modules.

So separating each of the modules in our MVC3 application is highly recommendable.

In ASP.Net MVC3 we have features called "area" where we can separate into different modules.

For e.g. ADMIN, CUSTOMER, PRODUCT etc.

Now I will show you an example of how to create the "AREA" in MVC3.

Step 1:

Now first create an ASP.Net MVC3 application.

Step 2:

Now right-click the project and "add" a new area with the name "Admin"; that means in our project there are an "admin" module. See the following picture:

Step 3:

After adding the "admin" area you will see that a separate "Areas" folder will be created. Under this folder controller, model and views, shared folders will be generated.

Now under the "Controller" folder add a new controller named "admin controller".

Now from the "admincontroller" create a new view named "index" from the "index" method.

After that copy the "_layout.cshtml" from the main project and paste it under the "Areas" Shared folder.

Now the whole structure will look like the following once.



Step 4:

Now add a new action link for "Admin" under the _layout.cshtml" like the following picture:



<li>@Html.ActionLink("Admin", "Index", "Admin")</li>

So the admin link will be created and when we click the "admin" link it will redirect to the "admin" part of our project which is under the "Areas".

Step 5:

Now go to the "AdminAreaRegistration" file (just the following picture) and modify the existing code like below:



public override void RegisterArea(AreaRegistrationContext context)
{
context.MapRoute(
"Admin_default",
"Admin/{controller}/{action}/{id}",
new { controller = "Admin", action = "Index", id = UrlParameter.Optional }
);

I have added here only Controller Name "Admin"( controller = "Admin") extra under the new {} section.

Now run the application it will look like the following picture:



See here "Admin" link has come.

Now after clicking the admin link it will show like the following picture:



See the url routing. It calls our "Admin " Areas part.

So by this way we can group our project modules into our ASP.Net MVC3 application.

Conclusion

So in this article we have learned what is the purpose of use of "Area" features in ASP.Net MVC3 and how to implement them.

In ASP.NET MVC 3 a new bit of code appeared in the global.asax.cs file:

public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
    filters.Add(new HandleErrorAttribute());
}

The above method is called from the Application_Start() method.

Out of the box, what this does is set up a global filter for handling errors. You can still attribute controller methods or classes as before, but now, if you don’t have a specific HandleErrorAttribute attached to the controller method or class then the global one will take over and be processed.

However, you are not going to get custom errors just yet. If you have a bit of code that causes an exception to be thrown that is not caught then you will just end up with the Yellow Screen of Death as before. For example, this code:

public class HomeController : Controller
{
    // ...

    public ActionResult About()
    {
        throw new Exception("This is not good. Something bad happened.");
    }
}

Will produce this error



The missing part of the puzzle is to turn on Custom Errors. This happens in the web.config file. There are three basic options for the mode: “Off” which will show the YSOD to everyone, “RemoteOnly” which shows the YSOD on the local machine (the web server) and the custom error to everyone else, and “On” which shows the custom error to everyone including the local machine.

For development purposes I tend to leave it set to “RemoteOnly” so that I get the YSOD and I get to see what the error is, yet everyone else gets the custom error. However, for developing the actual custom errors themselves we’ll need to set the mode to “On” so we, as developers, get to see the error.

<system.web>
  <customErrors mode="On" defaultRedirect=”~/BadError.htm"/>
</system.web>

The defaultRedirect does not go to a controller action, it is set to a static HTML page that will be displayed if all else goes wrong. This is a final backstop to ensure that the user at least will see something nice event if the error page itself has some issues.

Normally, the error will show the ~/Views/Shared/Error.cshtml view. However, since the view can throw an exception itself there ought to be a backstop custom error page.

The HandleErrorAttribute defaults to using the view "Error" which will display shared view ~/Views/Shared/Error.cshtml.

You can change that by setting the view property on the HandleErrorAttrubute, like this:

public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
    filters.Add(new HandleErrorAttribute {View = "MyCustomError"});
}

I’ve set my error view to display the details of the exception for the purposes of this demo.

@model System.Web.Mvc.HandleErrorInfo

@{
    ViewBag.Title = "Error";
}

<h2>
    Sorry, an error occurred while processing your request.
</h2>
<p>Controller = @Model.ControllerName</p>
<p>Action = @Model.ActionName</p>
<p>Message = @Model.Exception.Message</p>
<p>StackTrace :</p>
<pre>@Model.Exception.StackTrace</pre>

NOTE: In normal production code you would never expose the details of the exception like this. It represents a considerable security risk and a potential attacker could use the information to gain valuable information about your system in order to construct an attack against it.

Now, if we re-run the same application and go to the About page (handled by the HomeController’s About action) then we will get our custom error page.

Performing additional actions on an exception

Overriding OnException in a Controller

If you want to perform additional actions, rather than just simply show a custom error page, then you can override the OnException method from the Controller class on your own controller derived class. If you want to do this for all controllers then you may want to create a common base controller that all your controllers inherit from. For example:

public class CommonController : Controller
{
    protected override void OnException(ExceptionContext filterContext)
    {
        // Do additional things like logging here.
        base.OnException(filterContext);
    }
}

Then in each of your controllers, inherit from this common controller like this:

public class HomeController : CommonController
{ ...

That will ensure that all your controller have the same functionality.

Creating a FilterAttribute

You could alternatively create a FilterAttribute. This can provide benefits of providing global functionality if you add it to the global filter collection, or very fine grained functionality if you need it on a few sparse controller actions by adding it as an attribute on the controller action.

The filter may look like this:

public class LogExceptionFilterAttribute : FilterAttribute, IExceptionFilter
{
    public void OnException(ExceptionContext filterContext)
    {
        // Log the exception here with your logging framework of choice.
    }
}

If you want to have the filter applied to all controller actions, you can set it up in the RegisterGlobalFilters method in the Global.asax.cs file like this:

public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
    filters.Add(new LogExceptionFilterAttribute());
    filters.Add(new HandleErrorAttribute());
}

Or, if you prefer to have finer grained control you can decorate individual controller classes or controller actions with it, like this:

[LogExceptionFilter()]
public ActionResult About()
{
    throw new Exception("This is not good. Something bad happened.");
}

In this post I’m going to show you how to use MvcScaffolding to add a new controller template to enable scaffolding with data access code that uses the Repository Pattern.

One of the new features is built in tooling support for scaffolding. The “Add Controller” Dialog box has been revamped to include a few new options.



As you can see there are much more options as compared to before. The scaffolding options are as follows:

- Template: Allow you to specificy what kind of controller you want to generate. Out of the box you get an empty controller (Just a class with no actions), Controller with actions and views using the Entity Framework code first, and controller with empty read/write actions.
- Model: This is the object that will be used for scaffolding strongly typed views, CRUD actions and data access.
- DataContext: By default this is an EF Code First class that inherits from DbContext. You can either select an existing context or have the scaffolding tools create a new one for you.
- Views: Select between ASPX and Razor. This is pretty much the same as the “Add New View” dialog box.

Advanced Options include layout/master page settings and View script settings. Again, stuff that is also in the “Add New View” Dialog.

Scaffolding using the “Controller with read/write actions and views, using Entity Framework” is especially cool because it generates a controller, all associated views AND data access code for you. That’s right, all you need to do is create an model class and the scaffolder does the rest. How’s that for a productivity boost?

To test this I created a simple Product class which is defined as the following:

public class Product{
public int ProductId { get; set; }
public string Name { get; set; }
public string Description { get; set; }
}

Then I added a new controller with the following options:



The new tooling support created a new controller, all associated views and the data access code. That’s really cool, but let’s take a look at the controller code.

private ProductContext db = new ProductContext();
 //
// GET: /Product/
 public ViewResult Index()
{
return View(db.Products.ToList());
}

By default the scaffolding tools use the ProductContext object directly in the Controller. Many people don’t like this coupling (myself included) and prefer to use the Repository Pattern. This allows us to abstract away our data access code behind a repository, making it easier to work with and later modify, if need be.

Well the good news is that the add controller dialog is extensible. You can add your own controller templates to enable data access using any technology mechanism you want.

I’m going to show you a way to get a repository option for EntityFramework to show up with very little work. All you need to do is install the MvcScaffolding NuGet Package.

Open the Package Manager Console and enter “Install-Package MvcScaffolding”:



Now right click on the controllers folder and select “Add”->”Controller”. We’re going to re-scaffold out our ProductController, associated views and data access code (WARNING: This will overwrite any changes you have made so be careful.)

Now take a look at the templates section and you should see new templates:



The last option let’s you scaffold out the entire thing and use repositories for data access. Go ahead and click “Add”. Check the checkboxes to allow the scaffolder to override existing items.

We can verify this by looking at our ProductController and we should see the following:

private readonly IProductRepository productRepository;

// If you are using Dependency Injection, you can delete the following constructor
public ProductController() : this(new ProductRepository()) { }
 public ProductController(IProductRepository productRepository) {
this.productRepository = productRepository;
}

//
// GET: /Product/
 public ViewResult Index(){
return View(productRepository.All);
}

Now the controller uses a repository instead of hard coding in the data access code. The repository itself uses EF Code First to do all the data access.

Hello, today we will give brief explanation about how to Scaffold your ASP.NET MVC 3 project with the MvcScaffolding package. Before we move on, I have good information for all of you. We have supported the latest ASP.NET MVC 3. We are the one of the most providers that support ASP.NET MVC 3 in Europe. To preview this new product, please visit http://hostforlife.eu/ASPNET-MVC-3-European-Hosting.aspx. If you have further question about our new product, please contact us at here.

Back to this tutorial, let’s start it:

1. Install ASP.NET MVC 3, which includes the excellent NuGet Package Manager.
2. Create or open an ASP.NET MVC 3 web application. I’m calling mine ‘SoccerSite’.
3. Install the MvcScaffolding package. You can install it using the NuGet Package Manager Console, so it only takes a few seconds and you don’t have to download anything using your browser.  To do so,

- Open the Package Manager Console window using Visual Studio’s View->Other Windows->Package Manager Console menu item.
- Enter the following:

Install-Package MvcScaffolding



- That’s it! Note: be sure you installed MvcScaffolding, not MvcScaffold. We’ll retire the old MvcScaffold package shortly.

In case you’re wondering, EFCodeFirst is the new super-elegant version of Entity Framework that persists plain .NET objects to a relational database without any configuration fuss, T4Scaffolding is the core scaffolding infrastructure (locates types in your project, finds scaffolders in other packages, renders templates, etc), and MvcScaffolding is a set of ASP.NET MVC-specific templates (for controllers and views) that bolts onto the T4Scaffolding core.

Scaffolding a CRUD interface

Let’s create a model for a soccer team. Add the following class to your Models folder, then compile your solution (Ctrl-Shift-B):

namespace SoccerSite.Models
{
    public class Team
    {
        public int TeamId { get; set; }
        [Required] public string Name { get; set; }
        public string City { get; set; }
        public DateTime Founded { get; set; }
    }
}

Next, we can create a complete Create-Read-Update-Delete (CRUD) UI for this model by issuing a single scaffolding command into the Package Manager Console:

Scaffold Controller Team

Note: You can use the TAB key to autocomplete many things in the Package Manager Console. In this case, you can autocomplete the words “Scaffold” and “Controller”, since the scaffolding package knows about them. It doesn’t know about “Team”, though – we may add completion on model type names in a future version.



As you can see, it’s gone ahead and created a controller, a database context (a tiny bit of Entity Framework code that represents a data store), and views for all the CRUD actions. You can run it right now (Shift-F5), and as long as you have SQL Server Express running on your machine, EFCodeFirst will automatically connect to it, create your database schema, and you’ve got a basic working application without writing a single line of procedural code.

Note that since the model was called “Team”, the controller is called “TeamController”, so to reach it you need to point your browser to http://…/team:

The database is initially empty.



Creating an item. Validation rules are applied automatically. Note that since “Founded” is a DateTime it can’t be null and hence is required. Change it to DateTime? (i.e., with the question mark to make it nullable) if you want it to be optional.



Listing Items



Deleting an item

But what if I don’t have SQL Express installed?

If you don’t have SQL Express installed and running, you may have got the following error when your code tried to read or write some data:

A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Blah blah blah…

No problem! You can quickly switch to use the new SQL Server Compact – a lightweight, in-process database – without having to download or install anything manually. Simply add SQL Server Compact to your project by issuing the following command in the Package Manager Console:

Install-Package EFCodeFirst.SqlServerCompact

Ta da – no more external database required. Run your project again (Shift-F5) and this time it will create and connect to a file-based database (a .sdf file will appear in your ~/App_Data folder). The EFCodeFirst.SqlServerCompact package adds a file to your project called AppStart_SQLCEEntityFramework.cs, which configures the runtime to use SQL CE.

Of course you probably still want the proper version of SQL Server when you eventually deploy your application for public use, but for small applications or for learning, SQL CE is really handy.

Scaffolding a repository

If you check out the code right now, you’ll see that TeamController reads and writes the data in SoccerSiteContext directly. That’s fine in many simple scenarios, but if you want to decouple your controller logic from persistence logic a little (e.g., so that you can write clean unit tests for the controller), you may prefer to reach your data through an interface.

No problem! Let’s regenerate the controller with the –Repository flag:

Scaffold Controller Team –Repository –Force

Notice that we also need to say –Force, otherwise the scaffolder won’t overwrite the files you already have in your project. Now the scaffolder will produce an additional class, TeamRepository, and the following interface which TeamRepository implements:

    public interface ITeamRepository
    {
        void Add(Team post);
        void Delete(int id);
        IEnumerable<Team> GetAllTeams();
        Team GetById(int id);
        void Save();
    }

TeamController will now only read and write data using ITeamRepository. If you’re new to ASP.NET MVC it may not be obvious why this is desirable, but if you start trying to write unit tests or switch data access technologies, you’ll find this interface-based data access method to be much cleaner and more flexible.

There’s so much more

It’s not just about CRUD! You can use scaffolding to create any type of project item if you write a template for it. This blog post has covered only the absolute beginning of what you can do, so over the coming days I’ll write blog posts to cover:

- Scaffolding specific individual items (e.g., views, repositories, etc) rather than whole controllers and related files
- Getting additional scaffolder packages and controlling which ones are used by default. For example, there’s currently a proof-of-concept LINQ to SQL scaffolding package that you can install and set to act as the default type of repository/data context.
- Customising the T4 templates that the scaffolders use to generate code
- Creating entirely new custom scaffolders for new types of things (e.g., unit test fixtures)

What is Common Service Locator?Today we have many Inversion of Control/Dependency Injection Containers like NInject,StructureMap,Unity,.. etc in the .NET world.Most of these vary quite widely in terms of configuration and initialization/registration of the instances.But they provide more or less similar interface while resolving the dependencies and returning object instances.Common Service Locator framework extracts these commonalities out and provides an abstraction on top of these IoC/DI containers.This is now part of the Enterprise Library 5.0 and used in the Enterprise Library code to create/retrieve objects.Common Service Locator provides an interface IServiceLocator.



It is quite evident from the method signatures that these are only related to retrieval of right object instances with proper resolution of the dependencies based upon different parameters.

Another important class related to the Common Service Locator is the ActivationException which needs to be thrown whenever there is exception in instantiating the objects /resolving the dependencies.

We were planning to use StructureMap as the DI Container and a StructureMap Adapter for Service Locator was available in Codeplex but that seemed far from complete.

So we went ahead to write few lines of code and develop a service locator which will use StructureMap as the DI container as shown below:



This class accepts an instance of the StructureMap.Container in the constructor and uses it to resolve dependencies and instantiate objects.In the implementation of the IServiceLocator methods we have to just map them suitably to StructureMap.Container.GetAllInstances and StructureMap.Container.GetInstance methods (and their overloads).The code which depends on IServiceLocator will perform exception handling based on ActivationException class whereas StructureMap raises StructureMap.StructureMapException in most of the cases.So we need to catch StructureMapException in this class and throw a ActivationException.The complete code is given below:

So we have our Service Locator class ready.

Today, we found a good answer on syntax highlighting for Razor. In the Visual Studio Gallery located at http://visualstudiogallery.msdn.microsoft.com/en-us/8dc77b9c-7c83-4392-9c46-fd15f3927a2e, a new Visual Studio extension has been recently added for a “Razor Syntax Highlighter”.

To leverage this new extension, we had to remove the editor mapping for .cshtml files in the Visual Studio Text Editor/File Extensions window and install the highlighter extension. As you see in the figure below, it worked great. This new extension uses the Razor Parser libraries to appropriately highlight the Razor code.



Unfortunately, this feature is offered as a Visual Studio Extension and hence is only available for paid-for Visual Studio 2010 editions.

Looking at the Razor Syntax, one can summarize it as a means to short-hand the <%= %> used in ASPX pages to designate code sections. For Razor, only a simple @ sign is used in-place of that bulky aforementioned code markup . Additionally, the Razor parser introduces helpful intelligence that makes the syntax even more user-friendly. For instance the following is a code block you would see in an ASPX page:

<%=if(true){%>
       <input value=”istrue”/>
<%}%>  

The corresponding Razor block for this snippet would be:

@if(true){
       <input value=”istrue”/>
}

The Razor syntax has simply “inferred” that the code will have a closing curly bracket without us having to apply any special markup tags to it. This further reduces the markup needed to accomplish the same task.

An important difference between Razor and ASPX View Engines is the absence of master pages for the earlier. Razor simply provides a _ViewStart.cshtml to bootstrap our application layout.

@{
    Layout = “~/Views/Shared/_Layout.cshtml”;
}

Latest Razor Beta does however support Partial rendering (RenderPartial) to explicitly render a Partial View as well as calling @RenderBody() which loads the actual view content to be served.

Now, HostForLife.eu has supported ASP.NET MVC 3 hosting. For more information about this new product, please visit here.

Introduction to ASP.NET MVC

ASP.NET MVC (Model-View-Controller) provides a light-weight framework with a lot of flexibility over the base ASP.NET framework. Unfortunately, this means we lose most of the high-level control structure provided by ASP.NET. This isn't necessarily a bad thing when you consider where web appplications are today. The focus has shifted to provide better and more unique user-interfaces. Thus MVC is the perfect fit whereby we can generate very controlled markup and user navigation.

From this base we can carefully add components to the project as necessary to build web applications. Out of the box, MVC projects include several JavaScript libraries including jQuery-1.4.1.js, jQuery.validate.js, etc. One library which could bring a lot to your MVC project is jQuery UI. The jQuery UI library allows you to easily create high-level UI functions in JavaScript. Using jQuery + jQuery UI you are able to easily create some of those controls which are missing from MVC. Listed below are 5 ways in which you can use jQuery UI to improve your MVC projects.

1. Dialog/Popups

Creating popup windows within JavaScript is not an easy proposition when you need to factor in features such as modal/non-modal, moveable, etc. Within jQuery UI all popups are known collectively as a dialog. When using dialogs there are a couple common usages such as displaying a static popup message, displaying a popup add/edit screens. Often add/edit dialogs, such as those used on grids are quite complex as it requires a call to the server before displaying the dialog. With a the help of a Partial View and the jQuery UI dialog it is quite simple as shown below.

First we need a DIV element which we will use to house the content for the popup. For our purpose here we can can just create a DIV with the id of EditDialogDiv. Then we need to create a javascript method to retrieve the contents for the dialog, open the popup and to close the popup. These two javascript methods are listed below.

  <script type="text/javascript">
  function GetEditDialog()
  {
     var lnk = '<%= Url.Action("EditDialog") %>'; 

     $.ajax({
        url: lnk,
        success: function (data) {
          //Set the Dialog Contents
          $('#EditDialogDiv').html(data); 

          //Initialize and show the Dialog
          $('#EditDialogDiv').dialog();
          $('#EditDialogDiv').dialog({ title: 'Dialog Title', resizable: true, modal: false });
          $('#EditDialogDiv').dialog('open');
        }
     });
  } 

  function EditDialogComplete()
  {
     $('#EditDialogDiv').dialog('close');
  }
  </script>

The first method GetEditDialog uses a jQuery Ajax request to grab the contents of a PartialView returned from a Controller method. Once the Ajax call has the contents it replaces the EditDialogDiv with the data returned. Then the method initializes the jQuery Dialog and opens it. The second method EditDialogComplete will be called from within the dialog and is used to close it. Now that we have the JavaScript needed to open and close the Dialog, we need to look at how to trigger these. The open is simple enough, call GetEditDialog()  on an a button or link. To understand the close we need to look at the markup within the partial view used for the contents of the edit dialog. The partial view is shown below:

  <% using (Ajax.BeginForm("EditDialogSave", new AjaxOptions { UpdateTargetId = "EditDialogDiv", OnComplete = "EditDialogComplete" }))
  { %>
     Partial Edit Dialog
     <br />
     <input type="submit" value="Save" />
  <% } %>

This partial view is using the Ajax.BeginForm instead of the Html.BeginForm which allows us to asynchronously postback the contents of the form. Upon completion of the call, it will call the EditDialogComplete JavaScript method which will close the dialog. While a simple example it should illustrate how easy it is to make use of the jQuery Dialog an create Add/Edit dialogs which has been traditionally a very complex operation.

2. The Missing Date Picker

A date picker is a complex component to build yourself in JavaScript, luckily jQuery UI includes an effective Date Picker. To create a DatePicker we first need a text input box and a call upon document ready to initialize it as shown below:

  <input id="DatePicker" type="text" /> 

  <script type="text/javascript">
  $(document).ready(function ()
  {
     $('#DatePicker').datepicker();
  });
  </script>

As you can see this simple snippet is all you need to start a Date Picker. When the user clicks on the DatePicker input box the calendar will be displayed and allow the user to choose a date.

3. Simple Autocomplete

The autocomple provided with jQuery UI allows for very easy integration with MVC. We start by creating an input box and a call upon document ready to setup the Auto Complete as shown below:

  <input id="AutoComplete" type="text" /> 

  <script type="text/javascript" >
  $(document).ready(function()
  {
     $('#AutoComplete').autocomplete({
          minLength: 2,
          source: '<%= Url.Action("AutoComplete") %>'
     });
  }
  </script>

The AutoComplete method within the Controller will receive a QueryString item of the name of the term. The method will need to return a JsonResult with a list made records each with an id, label and value.

4. Prebuilt Themes and Style Builder

When using many 3rd party tools we are often forced to use the built-in styles or go down the path of modifying the included CSS. Modifying CSS files for 3rd party tools can be extremely time consuming, especially if the documentation is lacking. jQuery UI is completely backwards to many other 3rd party controls. The jQuery UI website provides a suite of themes as well as a tool called Theme Roller which allows users to create and edit themes. This allows you to start from scratch or start with one of the similar themes and create the one that matches your site. This can be a huge time saver and drastically reduce the amount of time it takes to utilize jQuery UI within your site.

5. Better User Interactions With the Tabs, Accordion, Sortable Lists, additional Effects, etc.

jQuery UI also includes several elements which primarily serve to improve user interaction. The Tabs and Accordion elements are both useful in user navigation in that they allow you to embed more content on the page without using up more screen real estate. One important note about Tabs is that the content for each Tab can be fetched asynchronously allowing for you to use a Controller Action and a Partial View as a Tab. Another useful control is the Sortable or Sortable List which enables you to take a group of elements and allow the user to reorder them as needed. jQuery UI also includes other controls which can be useful such as a Slider and simple Progress Bar. Also included are additional animation effects similar to those included with jQuery.

Conclusion

Traditional ASP.NET is a bit of a challenge to take full advantage of jQuery UI due to the high-level nature of the platform. Since MVC and its low-level nature you are able to take advantage of jQuery UI without a lot of effort. With the flexibility provided by MVC, you to pull in and utilize just about any JavaScript library, jQuery UI is particularly attractiven given that MVC works so well with jQuery. Similar to jQuery, jQuery UI is also a very small library dispite the number of features packed in. Not to mention the documentation and tools provided for jQuery UI.

Top Reasons to host your ASP.NET MVC Website with HostForLife.eu

There are many reasons why so many people choose HostForLife over any other web hosting provider each year. Whether you’re beginner or an experience webmaster, HostForLife offers the perfect solution for everyone.

You’ll have highly trained, skilled professional technical support people ready, willing, and wanting to help you 24 hours a day. Your web hosting account servers are monitored from three monitoring points, with two alert points, every minute, 24 hours a day, 7 days a week, 365 days a year. The followings are the list of other added-benefits you can find when hosting with us:

1. World-class 24x7 Customer Support
Will your hosting company promptly answer questions and resolve issues - at 3 am on a Sunday? Even some providers claiming “24x7” support will not - but HostForLife will. Our outstanding uptime is backed by true 24x7 customer support. An expertly trained technician will respond to your query within one hour, round the clock. You will also get qualified answers. Other hosting companies typically have very low - level support staff during the night or weekends. HostForLife always has knowledgeable, top - level  support standing by, day or night, to give you the answers you need.

2. Commitment to Outstanding Reliability
Reliability, Stability, and Performance of our servers remain out TOP priority. Even our basic service plans are equipped with standard service level agreements for 99.99% uptime. Advanced options raise the bar to 99.99%. Our state-of-the-art data centers combine servers and SAN storage with full redundancy and operational tools with proprietary service management techniques. Full backup and recovery capabilities are implemented, including redundant power supplies, cooling and connectionsto major data networks.

3. “Right-size” plans for maximum value
HostForLife offers a complete menu of services. IT professionals select only what they need - and leave behind what they don’t. The result is an optimal blend of cost and performance. We offer IT professionals more advanced features and the latest technology - ahead of other hosting companies.

4. Profitable, Stable, Debt-free Business
Financial stability is the bedrock of a hosting provider’s ability to deliver outstanding uptime, cost-effective service plans and world-class 24x7 support.  HostForLife’s customers are assured of our financial integrity and stability - a stark contrast to the ups and downs they may have experienced with other providers.

5. The Best Account Management Tools
HostForLife revolutionized hosting with Plesk Control Panel, a Web-based interfaces that provides customers with 24x7 access to their server and site configuration tools. Some other hosting providers manually execute configuration requests, which can take days. Plesk completes requests in second. It is included free with each hosting account. Renowned for its comprehensive functionally - beyond other hosting control panels - and ease of use, Plesk Control Panel is available only to HostForLife’s customers.

6. 30-Day Money Back Guarantee
HostForLife 30 day money back guarantee ensures you have the ability to cancel your account anytime within your first 30 days under our full 30 day money back guarantee (less one-time account setup free). So what are you waiting for? Sign up today, risk free…

7. Simplicity with FREE 1-Click Installation
HostForLife was designed with ease of use in mind. From one click installations of your favourite website applications to our much talked about drag and drop website builder, you can rest assure your stay with us is going to be a smooth one. HostForLife offers the most extensive set of scripts on the web allowing you to build complicated websites with little or no programming knowledge at all. From blogs to forums to powerful e-commerce solutions, Super Green has something that is right for you.