Search results for 'app:weblogs' matching tags 'MVC' and 'Web'

Unit Testing ASP.NET MVC 2.0 With TypeMock

bmains — Tue, 25 May 2010 05:00:00 GMT

One of the selling points of ASP.NET MVC 2.0 was the ability to unit test your action methods. Even though Microsoft made MVC flexible by making it easier to unit test than web forms, it isn't always easy to implement without writing a lot of code to implement fakes for common services you use or without abstracting the interface altogether. For instance, the HttpContextBase class is an abstract base class that you can use to abstract using the context, but you'd have to create a class that inherits from this and implement the respective methods. As another example, you've probably seen controllers that implement an interface like IProductsRepository, and use an injection tool like Castle Windsor or Microsoft Unity to inject a reference into the controller's constructor.

Enter mocking libraries, making this process easier to do. TypeMock makes this very easy to do, and you don't even need to write a fake or worry about dynamic injection (unless you want to, because after all, DI is pretty cool and flexible). Let's look at an example controller action method below:

    public class ProductsController : Controller
    {
        public ActionResult Get(int key)
        {
            var repos = new ProductsRepository();
            var product = repos.GetByKey(key);

            if (product == null)
                throw new Exception("The product couldn't be found");

            return View(product);
        }

    }

Here we have a reference to the ProductsRepository; it's a repository class serving up data from a LINQ to SQL backend. TypeMock makes it easy to construct some tests to ensure that the action method works as expected, that it throws the error when the product is null, and that it returns the view when the product exists.

First Test - Forcing an Exception

The first test verifies that when no product returns from the database, an exception is thrown.

[Test]
public void Get_ReturningNullProductFromDBThrowsException()
{
    //Arrange
    var repos = Isolate.Fake.Instance<ProductsRepository>();
    Isolate.WhenCalled(() => repos.GetByKey(123)).WillReturn(null);
    Isolate.Swap.NextInstance<ProductsRepository>().With(repos);

    var controller = Isolate.Fake.Instance<ProductsController>(Members.CallOriginal);

    //Act
    try
    {

        var result = controller.Get(123);
       Assert.Fail();
    }
    catch (Exception ex)
    {
        Assert.AreEqual("The product couldn't be found", ex.Message);
    }

    Isolate.CleanUp();
}

TypeMock's Isolate.Fake mechanism creates a fake for the product repository, and overtakes the GetByKey method to force a null returned value. This works great to force the result, but we need the SwapNextInstance call to ensure that the next new ProductsRepository statement returns the fake.

Second Test - Finding Product OK

The second test checks that a valid product gets served up to the view. The way to check that is to invoke the action result of the action method, check that the result is a view result, and checks its ViewData.Model property, as illustrated below.

[Test]
public void Get_ReturningProductFromDBPassesToModel()
{
    //Arrange
    var product = new DA.Product { ProductID = 123 };
    var repos = Isolate.Fake.Instance<ProductsRepository>();
    Isolate.WhenCalled(() => repos.GetByKey(123)).WillReturn(product);
    Isolate.Swap.NextInstance<ProductsRepository>().With(repos);

    var controller = Isolate.Fake.Instance<ProductsController>(Members.CallOriginal);

    //Act
    var result = controller.Get(123);

    //Assert
    Assert.IsInstanceOf<ViewResult>(result);
    Assert.AreEqual(product, ((ViewResult)result).ViewData.Model);

    Isolate.CleanUp();
}

Instead of returning a null product, this test returns a dummy Product instance through a fake ProductsRepository.

Third Test - Exception Bubbling

The third check tests that when an exception occurs within the product repository, that the exception bubbles up from the repository.

[Test]
public void Get_ErrorFromProviderBubblesUp()
{
    //Arrange
    var repos = Isolate.Fake.Instance<ProductsRepository>();
    Isolate.WhenCalled(() => repos.GetByKey(123)).WillThrow(new Exception("Test"));
    Isolate.Swap.NextInstance<ProductsRepository>().With(repos);

    var controller = Isolate.Fake.Instance<ProductsController>(Members.CallOriginal);

    //Act
    try
    {
        var result = controller.Get(123);
        Assert.Fail();
    }
    catch (Exception ex)
    {
        //Assert
        Assert.AreEqual("Test", ex.Message);
    }

    Isolate.CleanUp();
}

Instead of returning a product, the WillThrow method simulates throwing an exception. When calling the Get method, should throw an exception, which it does pass the test.

Rendering Inline using HTML.Action in MVC 2.0

bmains — Sun, 25 Apr 2010 05:00:00 GMT

Html.Action is a method method that injects a response from the server directly into the UI. For instance, a controller can have two action methods, then inject the response directly into the UI from the other controller. Take a look at the sample form below:

<p>
Main Action
</p>

<% Html.BeginForm(); %>

<div>
Name: <%= Html.TextBox("IndexName") %>
</div>
<div>
Value: <%= Html.TextBox("IndexValue") %>
</div>

<input type="submit" value="save" />

<% Html.EndForm(); %>

<%= Html.Action("Custom", new { title = "Test Title" }) %>

The custom action gets invoked and injected into the main view. Any parameters that get passed to the action method get passed as a routing parameter, as shown here (a title property). Below is the sample controller methods that return the view to inject.

[HttpGet, ChildActionOnly]
public ActionResult Custom()
{
return PartialView();
}

[HttpPost]
public ActionResult Custom(FormCollection form)
{
return PartialView();
}

[HttpGet]
public ActionResult Index()
{
return View();
}

The main view calls the Index method to get the response, that view calls the Custom action method. Note the ChildActionOnly attribute; this designates that the action method can only be used within a main view. The Custom action method returns a PartialView to insert a partial response into the UI, rather than including a whole view. The child view below is what gets injected. This partial view has its own form to receive a post to the server.

<p>
Custom Action
</p>

<% Html.BeginForm("Custom", "RenderingActions"); %>

    <div>
        Name: <%= Html.TextBox("CustomName") %>
    </div>
    <div>
        Value: <%= Html.TextBox("CustomValue")%>
    </div>

    <input type="submit" value="save" />

<% Html.EndForm(); %>

And that's it, we can have multiple actions linked to one view, and they all can post back to their own action methods and such. I plan to cover some of the other details at a later date.

Intro to Telerik MVC's DatePicker Control

bmains — Sat, 10 Apr 2010 05:00:00 GMT

The freely available ASP.NET MVC framework by Telerik has added a new DatePicker control that works similarly to the RadDatePicker control in its ASP.NET AJAX framework. Below is a sample of that control:

<%
    Html.Telerik().DatePicker().Name("Picker")
        .ButtonTitle("Select Date")
        .ClientEvents((evt) =>
            {
                evt.OnChange(() =>
                    {
                    %>
                        function(e) {
                            $("#output").html("Value changed to " + e.date);
                        }
                    <%
                });
            })
        .Value(DateTime.Now)
        .MaxDate(DateTime.Now.AddYears(3))
        .MinDate(DateTime.Now.Subtract(new TimeSpan(1000, 0, 0, 0)))
        .Render();
%>

Note that this date picker has some of the same properties as the calendar in my previous post. The MaxDate, MinDate, ClientEvents, etc are the same properties available in both, as you have access to a wide array of options available to you). The value property allows the defaulting of the current date as I've currently set, as well as a tooltip for the button, which is shown as a tooltip in the image below.

Clicking on the button shows a calendar control. Clicking on the date fires our client-side change handler. Our handler writes out the selected date to the browser as is, which renders the option below.

Currently, the selected date is 4/13/2010; clicking on the 22nd will fire the change event, making available an e.date property with the new date. By using the client-side equivalent handler, for both the date picker and calendar, you avoid the postback to the server to an action method, saving on resources.

Telerik Calendar Control Intro for ASP.NET MVC

bmains — Thu, 08 Apr 2010 05:00:00 GMT

The latest release of the open source Telerik ASP.NET MVC framework contains a new calendar control. This control functions similar to the ASP.NET AJAX calendar extender calendar, where it shows a month view, year view, and decade view, and responds to clicks on the client. Telerik can also specially process clicks for the server too. Let's take a look at the calendar. I'm assuming you are familiar with the telerik component setup.

<%
Html.Telerik().Calendar().Name("Cal1")
.MinDate(new DateTime(DateTime.Today.Year - 1, 1, 1))
.MaxDate(new DateTime(DateTime.Today.Year + 1, 12, 31))
.Selection((sel) =>
  {
   sel.Action("SelectedDate", new { selected = true });
  }).Render();
%>

The calendar control can regulate the minimum and maximum dates that can be selected (here a three year range is valid). This restriction is valid for all three calendar views too. The other option processes a calendar click by redirecting to another action method (hence the Action method) called SelectedDate.

The calendar (using the Vista style) looks like the following in month view:

Clicking on the header goes into year view:

Clicking on the header again goes into decade view:

And drilling back down by selecting the year, month, and day causes a redirection to the URL http://localhost/Calendar/SelectedDate?selected=4/8/2010, which is an action method in the calendar controller that we specified above. Also, we specified a selected property with a boolean; that boolean gets overridden and it uses the selected property to store the selected date. You can call this whatever you want.

Generated ID's from Model Binding

bmains — Fri, 02 Apr 2010 05:00:00 GMT

With the new various For methods in MVC (DisplayFor, TextBoxFor, etc.), these methods use a lambda to specify the fields to display/render. The following form below:

<% Html.BeginForm(); %>

<%= Html.ValidationSummary("The following errors have occurred:") %>

<%= Html.Hidden("Story.ProjectPhaseKey", this.Request.QueryString.Get("phase")) %>
<%= Html.Hidden("Story.ProjectKey", this.RouteData.Values["id"])%>

<div>
  <span>Title</span>
  <span>
   <%= Html.TextBoxFor(i => i.Story.Title) %>
  </span>
</div>
<div>
  <span>Description</span>
  <span>
   <%= Html.TextAreaFor(i => i.Story.Description) %>
  </span>
</div>

Renders the following:

<div>
<span>Title</span>
<span>
<input id="Story_Title" name="Story.Title" type="text" value="" />
</span>
</div>
<div>
<span>Description</span>
<span>
<textarea cols="20" id="Story_Description" name="Story.Description" rows="2"></textarea>
</span>
</div>

Notice how the ID's use the identifier in the lambda; the i.Story.Description lambda expression evaluates to Story_Description and Story.Description, as a means to automatically populate the data for model binding.

Client-Side Validation Updates in MVC 2

bmains — Mon, 29 Mar 2010 05:00:00 GMT

Not only does MVC support server-side validation, client-side validation is a possibility too. Below is a sample form that sets up validation using client-side javascript. These client-side features are made available from the MicrosoftMvcValidation.js file. Take a look at the sample form with validation below.

<% Html.EnableClientValidation(); %>

<% Html.BeginForm(); %>

<%= Html.ValidationSummary("The following errors have happened:") %>

<fieldset>
<legend>Form Values</legend>

<div>
First: <%= Html.TextBoxFor(i => i.FirstName) %>
<%= Html.ValidationMessageFor(i => i.FirstName, "*") %>
</div>
<div>
Last: <%= Html.TextBoxFor(i => i.LastName) %>
<%= Html.ValidationMessageFor(i => i.LastName, "*")%>
</div>
<div>
Email: <%= Html.TextBoxFor(i => i.Email) %>
<%= Html.ValidationMessageFor(i => i.Email, "*")%>
</div>

<input type="submit" value="Save" />
</fieldset>

<% Html.EndForm(); %>

Client-side validation begins with a method call to enable client-side validation. Under the scenes, this enables some of the built-in features, plus ensures some of the requirements within the UI happen (for instance, it ensures that each form has a unique ID). If you compare this example with my server-side validation blog entry, you will see the form is the same; all that's different is the call to this new client-side method. Adding this method adds some new client-side code that sets up the components to do the validation. This code looks like the following:

if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"FirstName","ReplaceValidationMessageContents":false,"ValidationMessageId":"FirstName_validationMessage","ValidationRules":[{"ErrorMessage":"First name required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"LastName","ReplaceValidationMessageContents":false,"ValidationMessageId":"LastName_validationMessage","ValidationRules":[{"ErrorMessage":"Last name required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"Email","ReplaceValidationMessageContents":false,"ValidationMessageId":"Email_validationMessage","ValidationRules":[{"ErrorMessage":"Email required.","ValidationParameters":{},"ValidationType":"required"}]}],"FormId":"form0","ReplaceValidationSummary":true,"ValidationSummaryId":"validationSummary"});

The client-side components contain the array of validators to apply to each form element. It maps the property of the model object(which is equivalent to the ID of the control), mapping these to the validation rules to validate against. For instance, you see a lot of required validators, which refers to a client-side implementation of each of the server-side component. It also contains the error message to display to the user when the validation fails.

The action method to get and post the data to the view looks like the same as our server-side validation example too. Check the example below:

[HttpGet]
public ActionResult AjaxIndex()
{
return View(new ValidationTestClass { FirstName = "Bob", LastName = "Anderson", Email = "boba@test.com" });
}

[HttpPost]
public ActionResult AjaxIndex(ValidationTestClass val)
{
if (!ModelState.IsValid)
return View();

return RedirectToAction("Index", "Home");
}

First, the view that posts back fires the client-side validation first. If it detects an error, the field is flagged with a message generated on the client-side. If successful, the form posts back and processes the equivalent server-side validator, and if that check fires, the ModelState.IsValid property will evaluate to true.

Error with Client Validation

bmains — Fri, 26 Mar 2010 05:00:00 GMT

We are about to talk about client validation soon, but if you already know about it, read on; if not, wait until my next post and come back to this one :-). I'm writing this now because I just found it. If you use client validation, it's important to ensure you enable client validation before the form gets rendered. The extensions append a unique form ID to the form element, and thus, if you don't enable validation, this imporant required form id doesn't get set (is null) and raises a client-side error. So be careful to the ordering, it should be in this manner:

<% Html.EnableClientValidation(); %>

<% Html.BeginForm(); %>

And everything will be alright :-)

Server Side Validation Updates in MVC 2

bmains — Fri, 26 Mar 2010 05:00:00 GMT

ASP.NET MVC 1 had features built in that allowed you to validate content on the server-side, by specifying the elements to listen to validations for. These features have been enhanced so that you can use a lambda to specify the field to validate. Below is an illustration of these new features.

<% Html.BeginForm(); %>

<%= Html.ValidationSummary("The following errors have happened:") %>

<fieldset>
<legend>Form Values</legend>

<div>
  First: <%= Html.TextBoxFor(i => i.FirstName) %>
  <%= Html.ValidationMessageFor(i => i.FirstName, "*") %>
</div>
<div>
  Last: <%= Html.TextBoxFor(i => i.LastName) %>
  <%= Html.ValidationMessageFor(i => i.LastName, "*")%>
</div>
<div>
  Email: <%= Html.TextBoxFor(i => i.Email) %>
  <%= Html.ValidationMessageFor(i => i.Email, "*")%>
</div>

<input type="submit" value="Save" />
</fieldset>

<% Html.EndForm(); %>

Here we use a lamdba to specify the field to validate; the field to display in a textbox and the field to validate are both specified via lambdas, which will use the property name as the field ID. When the view posts back, the model binder validates the posted input, checking for validation errors. The validation errors are stored in the ModelState object, which has an IsValid property. When errors occur, IsValid is false, allowing you to control what happens next. Any errors are displayed inline as a span with the error text that's passed in (the second parameter).

Check out the post operation below to see how we process the input.

[HttpGet]
public ActionResult Index()
{
return View(new ValidationTestClass { FirstName = "Bob", LastName = "Anderson", Email = "boba@test.com" });
}

[HttpPost]
public ActionResult Index(ValidationTestClass val)
{
if (!ModelState.IsValid)
return View();

else
return RedirectToAction("New");
}

Now we have a check; when the post back to the server has errors, we redirect back to the view so the user can correct the errors within the view. The MVC framework retains the form collection so the user can correct the issues; you do not need to do anything to do this. When the user gets it right, the form posts back, and the redirection takes place. In case you didn't know, the model binder has the ability to parse the form values by their name and automatically assign them to the object that is the parameter, in this class, a class with properties.

So what is used to do the validation? What you don't see here is that a ModelMetadataProvider defines the rules for validating class instances. By default, validation uses data annotations, and if you like, buddy classes, for validating classes. So reflection extracts the attributes in the System.ComponentModel.DataAnnotations assembly, checks the data against these validation definitions, and then outputs the results in the UI. Below is the class that represents the validations used for the above form. Later on, we are going to look at the ModelMetadataProvider and how you can customize it, but for now, below is our test class:

public class ValidationTestClass
{
[Required(ErrorMessage = "First name required.")]
public string FirstName { get; set; }

[Required(ErrorMessage = "Last name required.")]
public string LastName { get; set; }

[
Required(ErrorMessage = "Email required."),
DataType(DataType.EmailAddress, ErrorMessage = "Invalid Email")
]
public string Email { get; set; }
}

Each property defines the type of rules that are validated, and the resulting error message if the validation fails. Each validator can take property values to configure the type of validation, like the DataType attribute for the Email property. The MVC framework takes these attribute definitions and validates these within the form.

Input Validation in MVC (1 and 2)

bmains — Fri, 19 Mar 2010 05:00:00 GMT

In ASP.NET web forms, anytime an element within the form post contains an HTML tag (such as a <div> or any other tag), the input that's posted back to the server is validated, and an exception thrown, if that post contains any HTML tags within it. This is request validation, and in web forms it can be enabled or disabled by setting the ValidateRequest property. When turned off, the validation of data is blocked for the entire request; it is a feature that can't be selective (in that you have to turn it on or off for the entire page, and doesn't block individual controls only). MVC has this capability too; take the following view:

<% Html.BeginForm(); %>

<% Html.EndForm(); %>

if, in any of the two text areas, there are html tags within the posted data, an exception would be thrown in web forms, and can be thrown in MVC too. To set this up, we use the ValidateInputAttribute at the class or method level, like the following:

[HttpPost, ValidateInput]
public ActionResult Validation(FormCollection values)
{
ViewData["IsValid"] = ModelState.IsValid;

return View();
}

Because of the attribute declarion, the input will be validated on posting the form data. An error will occur and this action won't be invoked because of the invalid input, preventing any malicious attack against the application. See more of the documentation at: http://msdn.microsoft.com/en-us/library/system.web.mvc.validateinputattribute(VS.100).aspx.

New Data Display Options in MVC 2

bmains — Thu, 18 Mar 2010 05:00:00 GMT

ASP.NET MVC 2 has provided a lot more options for displaying the data to the end user within your views. Here are a few of the options you have:

Html.DisplayFor(i => i.FirstName) - DisplayFor renders the value of a property directly to the browser. In this example, the FirstName property returns a string, which gets rendered. What is "i" in this instance? This is a reference to the Model that's bound to the view in the @Page definition. Remember that the Model is accessible as a part of the ViewDataDictionary class (accessible via ViewData property of the controller), and that views either store an object reference to the model, or a generic reference. Using some of these new syntaxes was built to be more convenient with the generic forms (the view inheriting from ViewPage<T> rather than ViewPage).

<%= Html.DisplayFor(i => i.FirstName).ToHtmlString() %>
<%= Html.DisplayFor(i => i.LastName).ToHtmlString() %>

DisplayFor can display a simple property within this model if you like, or it has the ability to display more complex types, as we'll see more details about this soon.

Html.DisplayForModel() - Renders a display view for the entire model object; by default, renders a label and display element for each property in the object. It's possible to completely customize the UI for this, using the new template feature in ASP.NET MVC 2 (more on this later too).

<%= Html.DisplayForModel() %>

Html.DisplayText() - Displays a property value within the model referencing the value via a string; it take the name of a property or expression to display data, and renders that data as text.

<%= Html.DisplayText("Title") %>

Interesting thing about templates; the latest version of MVC includes the templating features similar to what you see in Dynamic Data. You can create, in the controller or shared folder, displaytemplates and editortemplates folders that contains the templates for the display or edit versions of the templates for the data being displayed. By default, simple properties get displayed using in-built templates created by Microsoft. So, when the code to display the first name (shown above) executes, the string value being shown uses a built-in template to render the content. Brad Wilson covered this in a blog post in great detail: http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-1-introduction.html.

In these special folders, you can create custom templates for simple data types (int, float, decimal, string, etc.), or create templates for complex objects (business objects and such). For instance, suppose you have a Contact class generated from a LINQ to SQL model. We can create a specialized UI for displaying the data in a folder structure shown below.

Views
   Shared
      DisplayTemplates
        Contact.ascx (partial view)

Anything displaying a Contact LINQ to SQL object will use this contact UI form, which has the following definition:

<%@ Control Language="C#"
Inherits="System.Web.Mvc.ViewUserControl<ASPMVC2.DataAccess.DataModels.Contact>" %>

<strong>
Custom Contact Template
</strong>

<%= Model.FirstName %>
<%= Model.LastName %>

So how does the DisplayFor method know which template to use? The framework uses the template similar to the following:

<%= Html.DisplayFor(i => i.Contact, "ContactTemplate"); //ContactTemplate matches the user control name

By default, it will do a name match of the property to the template name, but you can also customize the process by specifying the name manually as illustrated above. This explicit reference searches for the template within either the ~/Views/<Controller>/DisplayTemplates/ContactTemplate.ascx or the ~/Views/Shared/DisplayTemplates/ContactTemplate.ascx file. Now, we have one centralized template for the Contact type, reusable across the entire application.