Yet another developer blog

jqGrid Strongly Typed Helper - jQuery UI Integrations

noreply@blogger.com (Tomasz Pęczek) — Mon, 18 Feb 2013 16:00:00 +0000

I have released version 6.2.0 of Lib.Web.Mvc couple days ago and it is available on CodePlex or via NuGet:

This release brings some updates to jqGrid strongly typed helper (you can check full list here) and I would like to describe closer one of them - jQuery UI integration features:

JqGridColumnEditTypes.JQueryUIAutocomplete
JqGridColumnSearchTypes.JQueryUIAutocomplete
JqGridColumnEditTypes.JQueryUISpinner
JqGridColumnSearchTypes.JQueryUISpinner
JqGridColumnEditTypes.JQueryUIDatepicker
JqGridColumnSearchTypes.JQueryUIDatepicker
JqGridColumnPredefinedFormatters.JQueryUIButton

JQueryUIAutocomplete (JqGridColumnEditTypes/JqGridColumnSearchTypes)
This is a custom search and edit type which allows easy configuration of jQuery UI Autocomplete widget for the column:

Widget options are available through JqGridColumnSearchable and JqGridColumnEditable attributes properties:

AutoFocus
Delay
MinLength

The action and controller from which the suggestions will be requested can be set through attributes constructors, while all the events can be bound in standard way - by overriding the DataEvents property.

JQueryUISpinner (JqGridColumnEditTypes/JqGridColumnSearchTypes)
This is a custom search and edit type which allows easy configuration of jQuery UI Spinner widget for the column:

Widget options are also available through JqGridColumnSearchable and JqGridColumnEditable attributes properties:

Culture
SpinnerDownIcon
SpinnerUpIcon
Incremental
Max
Min
NumberFormat
Page
Step

JQueryUIDatepicker (JqGridColumnEditTypes/JqGridColumnSearchTypes)
This is a custom search and edit type which allows easy configuration of jQuery UI Datepicker widget for the column:

Following properties of JqGridColumnSearchable and JqGridColumnEditable attributes can be used to configure the widget behavior:

AppendText
AutoSize
ChangeMonth
ChangeYear
ConstrainInput
DateFormat
FirstDay
GotoCurrent
MaxDate
MinDate
NumberOfMonths
SelectOtherMonths
ShortYearCutoff
ShowCurrentAtPos
ShowMonthAfterYear
ShowOtherMonths
ShowWeek
StepMonths
YearRange
YearSuffix

The widget will take the localization settings (dayNames, dayNamesMin, dayNamesShort, monthNames and monthNamesShort) from jqGrid language settings.

JQueryUIButton (JqGridColumnPredefinedFormatters)
This is a custom formatter which allows easy configuration of jQuery UI Button widget for the column:

Widget options are available through JqGridColumnFormatter attribute properties:

Label
PrimaryIcon
SecondaryIcon
Text
OnClick

The cell value can be accessed in function passed to OnClick via data-cell-value attribute of sender (for example like this: $(this).attr('data-cell-value');).

In couple next days I'm going to update the sample project in order to show some of this functionality.

Using alpha Lib.Web.Mvc NuGet packages from MyGet

noreply@blogger.com (Tomasz Pęczek) — Fri, 11 Jan 2013 21:08:00 +0000

I`ve setup a package source at MyGet for alpha releases of Lib.Web.Mvc. This post describes how to configure Visual Studio in order to use it.

The alpha packages come with no guarantees and they do not substitute for the official NuGet packages.

Adding Package Source
In order to use the alpha packages you first need to add a package source to Visual Studio pointing to the MyGet feed at http://www.myget.org/F/libwebmvc/. Under the Visual Studio Tools menu select Options and follow below steps:

Expand Package Manager node
Choose Package Sources node
Click the Add button
Fill in the Name and the Source fields.
Click the Update button
Click the Ok button to close the options

Using Package Source
In order to use the alpha packages in Visual Studio project under the Visual Studio Project menu select Manage NuGet Packages:

Expand Online node
Choose the node corresponding to previously added source
Choose the Include Prerelease option from dropdown
Click the Install button

This will add the latest alpha version of Lib.Web.Mvc to the project.

Switching from jqGrid to jQuery UI Grid - Proof-of-Concept Dataview extension

noreply@blogger.com (Tomasz Pęczek) — Sun, 20 May 2012 20:15:00 +0000

One of projects I'm working on is in very early design stage. Initially we have proposed jqGrid as a client-side grid widget, but because the project will be using jQuery UI the requirement was made that jqGrid can be changed to jQuery UI Grid when it will be ready. I have made a suggestion that this can be achieved without changes on server-side, thanks to custom Dataview extension which would make the requests in the same why as jqGrid does. Whenever there is an idea, there should be a proof-of-concept for it.

This implementation is just a proof-of-concept as the jQuery UI Grid plugin is in a pre-release version. Specific technical details may change in future.

I have described general aspects of Dataview extension in my previous post so I will focus on the jqGrid specific aspects of implementation. First the values for nd, rows and page parameters should be set based on the current time and request.paging properties.

var data = {
  "nd": new Date().getTime(),
  "rows": request.paging.limit,
  "page": (request.paging.offset / request.paging.limit) + 1
};

Sorting is supported in jqGrid through sidx and sord parameters - those need to be extracted from request.sort option.

if (request.sort.length === 1) {
  if (request.sort[0].slice(0, 1) === "-") {
    data["sidx"] = request.sort[0].slice(1);
    data["sord"] = "desc";
  } else {
    data["sidx"] = request.sort[0];
    data["sord"] = "asc";
  }
}

For filtering I've decided to go with implementation which would send filters in the same way as jqGrid advanced searching does.

if (request.filter) {
  var filters = [];
  $.each(request.filter, function (property, filter) {
    if (!filter.operator) {
      filter.operator = isNaN(filter.value) ? "like" : "==";
    }

    var operators = {
      "<": "lt",
      "<=": "le",
      ">": "gt",
      ">=": "ge",
      "==": "eq",
      "!=": "ne",
      "like": "bw"
    };

    filters[filters.length] = "{\"field\":\"" + property + "\",\"op\":\"" + operators[filter.operator] + "\",\"data\":\"" + filter.value + "\"}";
  });

  data["_search"] = true;
  data["filters"] = "{\"groupOp\":\"AND\",\"rules\":[" + filters.join(",") + "]}";
} else {
  data["_search"] = false;
}

Now the parameters can be send to server and the response processed. I've added an additional methodType option for request control.

$.ajax({
  url: request.resource,
  type: request.methodType,
  dataType: "json",
  data: data,
  success: function (data) {
    response(data.rows, data.records);
  }
});

I'm going to keep working on this project at GitHub in order to add support for some more jqGrid options and keep it up to date with changes in jQuery UI Grid.

Another early look at jQuery UI Grid in ASP.NET MVC – Data Types, Dataview, Pager, Sorting and Filtering

noreply@blogger.com (Tomasz Pęczek) — Thu, 10 May 2012 20:22:00 +0000

More than a year ago I took my first early look at jQuery UI Grid. Since that time a lot has changed in the plugin (and a lot will as the roadmap is placing Grid in 2.1 version of jQuery UI), so I've decided to take another early look at it.

This blog post talks about jQuery UI Grid plugin in Stage 3 of development, which is a pre-release version. Specific technical details may change before the final release of this product.

This is a minimal set of CSS and JavaScript files required by the plugin:

<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tmpl.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ui/jquery.ui.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ui/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ui/jquery.ui.observable.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ui/jquery.ui.dataview.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ui/jquery.ui.grid.js")" type="text/javascript"></script>

You can find Grid specific files in its branch at GitHub (there is also a branch which is using JsRender instead of jQuery Templates).
The Grid is design to be used on table element. By default it will use the th elements text and data-* attributes for setting its columns and rowTemplate options. Thanks to that following markup is all what we need:

<table id="products">
  <thead>
    <tr>
      <th data-property="Id" data-type="number">Id</th>
      <th data-property="Name" data-type="string">Name</th>
      <th data-property="Supplier.Name" data-type="string">Supplier</th>
      <th data-property="Category.Name" data-type="string">Category</th>
      <th data-property="QuantityPerUnit" data-type="string">Quantity Per Unit</th>
      <th data-property="UnitPrice" data-type="number">Unit Price</th>
      <th data-property="UnitsInStock" data-type="number">Units In Stock</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

If the default behaviour doesn't give the desired effect, developer can provide values for columns and rowTemplate himself. The rowTemplate option should be set to jQuery Templates template and the columns option should be set to an array of objects.
Currently planned low-level abstraction for retrieving data in jQuery UI project is Dataview, there are also three reusable extensions than we can play with: localDataview, odataDataview, preloaderDataview. In my sample projects I'm already using LINQ Dynamic Query Library so I thought it would be nice to have Dataview which would generate sorting and filtering expressions in a way I need them. General structure of Dataview extension looks like this:

(function($, undefined) {
  $.widget('ui.linqDataview', $.ui.dataview, {
    widgetEventPrefix: 'dataview',
      options: {
        //Here you can provide any additional options you want
        ...
        //This function will be called by Dataview to retrieve data
        source: function (request, response) {
          //'request' contains informations for data scope:
          //- request.paging.offset
          //- request.paging.limit
          //- request.sort.length
          //- request.filter (with request.filter[property].operator and request.filter[property].value)
          ...
          //when you fetch the data the 'response' function should be called
          //with actual data as first parameter and total rows count as second
        }
      }
  });
}(jQuery));

You can find the implementation for my usage of LINQ Dynamic Query Library purposes here. Thanks to this the action method for serving data can be as simple as this:

public ActionResult Products(int skip, int take, string orderby, string filter)
{
  var products = null;  
  if (!String.IsNullOrWhiteSpace(filter))
    products = _northwindContext.Products.Where(filter);
  else
    products = _northwindContext.Products;
  
  return Json(new
  {
    rows = products.Include(p => p.Category).Include(p => p.Supplier).OrderBy(orderby).Skip(skip).Take(take),
    count = products.Count()
  }, JsonRequestBehavior.AllowGet);
}

The LINQ Dynamic Query Library will do the rest.
On the client side I just need to reference the script file with the Dataview extension and initialize the widgets:

...
<script src="@Url.Content("~/Scripts/grid-spf/dataview-linq.js")" type="text/javascript"></script>
...
<script type="text/javascript">
  $(document).ready(function () {
    //Create Dataview based on the extension
    var products = $.ui.linqDataview({
      //Default sorting
      sort: ['Id'],
      //Action URL
      resource: '@Url.Action("Products")'
    });

    //Initialize the grid
    $('#products').grid({
      source: products
    });

    //Load from Dataview
    products.refresh();
  });
</script>

To make full use of Dataview capabilities we should add pager, sorting and filtering. We can find basic implementation for those features in grid-spf folder at GitHub. Before using those a placeholder for the pager needs to be added to the table element:

<table id="products">
  ...
  <tfoot>
    <tr>
      <td colspan="7">
        <span id="pager"></span>
      </td>
    </tr>
  </tfoot>
</table>

Now it's time to add remaining references and extend the initialization code:

...
<script src="@Url.Content("~/Scripts/ui/jquery.ui.button.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/grid-spf/pager.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/grid-spf/grid-sort.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/grid-spf/grid-filter.js")" type="text/javascript"></script>
...
<script type="text/javascript">
  $(document).ready(function () {
    ...

    //Initialize the grid
    $('#products').grid({
      source: products
    })
    //Enable sorting
    .gridSort()
    //Enable filtering
    .gridFilter();

    //Initialize pager
    $("#pager").pager({
      source: products
    });

    //Load from Dataview
    products.refresh();
  });
</script>

Everything is up and running now. The complete project is available in my svn repository at CodePlex.

Infinite Scroll in ASP.NET MVC

noreply@blogger.com (Tomasz Pęczek) — Sun, 01 Apr 2012 18:50:00 +0000

Recently I've decided to play a little bit with Infinite Scroll interaction design pattern as I was planning on using it in one of my upcoming projects. My key requirement was to implement the pattern as an enhancement which would not break the existing navigation/pagination mechanism for users with JavaScript disabled.

For starters I needed a view which would server content in paged chunks, so I took advantage of the Razor helpers and created this piece of code for rendering a pager:

@helper Pager(int currentPageIndex, int pageRecordsCount, int totalRecordsCount) {
    
  int totalPagesCount = (int)Math.Ceiling((double)totalRecordsCount / (double)pageRecordsCount);
  int numberOfPagesToDisplay = 10;

  int firstDisplayedPageIndex = 1;
  int lastDisplayedPageIndex = totalPagesCount;
  if (totalPagesCount > numberOfPagesToDisplay)
  {
    int middleDisplayedPageIndex = (int)Math.Ceiling((double)numberOfPagesToDisplay / 2d) - 1;
    firstDisplayedPageIndex = (currentPageIndex - middleDisplayedPageIndex);
    lastDisplayedPageIndex = (currentPageIndex + middleDisplayedPageIndex);
    if (firstDisplayedPageIndex < 4)
    {
      lastDisplayedPageIndex = numberOfPagesToDisplay;
      firstDisplayedPageIndex = 1;
    }
    else if (lastDisplayedPageIndex > (totalPagesCount - 4))
    {
      lastDisplayedPageIndex = totalPagesCount;
      firstDisplayedPageIndex = (totalPagesCount - numberOfPagesToDisplay + 1);
    }
  }
    
  <div id="pager" class="ui-helper-clearfix">
  @if (currentPageIndex > 1) {
    @Html.ActionLink("<", "Products", new { page = currentPageIndex - 1 }, new { @class = "ui-state-default ui-corner-all" })
  } else {
    <span class="ui-state-default ui-corner-all ui-state-disabled">&lt;</span>
  }
  @if (firstDisplayedPageIndex > 1) {
    @Html.ActionLink("1", "Products", new { page = 1 }, new { @class = "ui-state-default ui-corner-all" })
    if (firstDisplayedPageIndex > 3) {
      @Html.ActionLink("2", "Products", new { page = 2 }, new { @class = "ui-state-default ui-corner-all" })
    }
    if (firstDisplayedPageIndex > 2) {
      <span>...</span>
    }
  }
  @for (int displayedPageIndex = firstDisplayedPageIndex; displayedPageIndex <= lastDisplayedPageIndex; displayedPageIndex++) {
    if (displayedPageIndex == currentPageIndex || (currentPageIndex <= 0 && displayedPageIndex == 0)) {
      @Html.Raw(String.Format("<span class=\"ui-state-hover ui-corner-all\">{0}</span>", displayedPageIndex))
    } else {
      @Html.ActionLink(displayedPageIndex.ToString(), "Products", new { page = displayedPageIndex }, new { @class = "ui-state-default ui-corner-all" })
    }
  }
  @if (lastDisplayedPageIndex < totalPagesCount) {
    if (lastDisplayedPageIndex < totalPagesCount - 1) {
      <span>...</span>
    }
    if (totalPagesCount - 2 > lastDisplayedPageIndex) {
      @Html.ActionLink((totalPagesCount - 1).ToString(), "Products", new { page = totalPagesCount - 1 }, new { @class = "ui-state-default ui-corner-all" })
    }
    @Html.ActionLink(totalPagesCount.ToString(), "Products", new { page = totalPagesCount }, new { @class = "ui-state-default ui-corner-all" })
  }
  @if (currentPageIndex < totalPagesCount) {
   @Html.ActionLink(">", "Products", new { page = currentPageIndex + 1 }, new { @class = "ui-state-default ui-corner-all" })
  } else {
    <span class="ui-state-default ui-corner-all ui-state-disabled">&gt;</span>
  }
  </div>
}

So this helper (with a little bit of CSS) should render nice pager like this:

For the model and repositories I have used good old Northwind database and Entity Framework Code First. I will skip implementation details here (all projects required by the solution are available through my repository at Codeplex) and go straight to view model:

public class ProductsViewModel
{
  #region Properties
  public int CurrentPageIndex { get; set; }

  public int PageRecordsCount { get; set; }

  public int TotalRecordsCount { get; set; }

  public IEnumerable<Product> Products { get; set; }
  #endregion
}

The last two things remaining are controller:

public class HomeController : Controller
{
  #region Fields
  IProductsRepository _productsRepository;
  #endregion

  #region Constructors
  public HomeController()
    : this(new ProductsRepository())
  { }

  public HomeController(IProductsRepository productsRepository)
  {
    _productsRepository = productsRepository;
  }
  #endregion

  #region Actions
  public ViewResult Products(int? page)
  {
    ProductsViewModel viewModel = new ProductsViewModel()
    {
      CurrentPageIndex = page.HasValue ? page.Value : 1,
      PageRecordsCount = 10,
      TotalRecordsCount = _productsRepository.GetCount(String.Empty)
    };
    viewModel.Products = _productsRepository.FindRange(String.Empty, "Name", (viewModel.CurrentPageIndex - 1) * viewModel.PageRecordsCount, viewModel.PageRecordsCount);

    return View(viewModel);
  }
  #endregion
}

and the actual view:

@model jQuery.InfiniteScroll.Models.ProductsViewModel
@{ ViewBag.Title = "Infinite Scroll in ASP.NET MVC"; }
@helper Pager(int currentPageIndex, int pageRecordsCount, int totalRecordsCount) {
  ...
}
<div id="list">
    @foreach (Northwind.Model.Product product in Model.Products)
    {
        <div class="ui-corner-all">
            <strong>Name:</strong> @product.Name<br />
            <strong>Category:</strong> @product.Category.Name<br />
            <strong>Supplier:</strong> @product.Supplier.Name<br />
            <strong>Unit price:</strong> @product.UnitPrice<br />
            <strong>Quantity per unit:</strong> @product.QuantityPerUnit<br />
            <strong>Units in stock:</strong> @product.UnitsInStock<br />
        </div>
    }
</div>
@Pager(Model.CurrentPageIndex, Model.PageRecordsCount, Model.TotalRecordsCount)

The paged list is working. In order to enhance it with infinite scrolling I've decided to use Infinite Scroll jQuery Plugin. All what is needed to make this plugin work is reference to plugin file in the project and few lines of JavaScript in the view:

<script type="text/javascript">
  $(document).ready(function () {
    //Method is called on element containing the list
    $('#list').infinitescroll({
      //Selector for the pager
      navSelector: '#pager',
      //Selector for the anchor to the next page
      nextSelector: '#pager span.ui-state-hover + a',
      //Selector for the list items
      itemSelector: '#list div.ui-corner-all',
      loading: {
        img: '@Url.Content("~/Content/images/ajax-loader.gif")',
        msgText: '',
        finishedMsg: ''
      }
    });
  });
</script>

Now the plugin will hide the pager and make the requests for next pages when user scrolls to the bottom. If JavaScript is not enabled the old pager is still there to do the job (so this solution is completely SEO friendly). The only issue here is that users who has JavaScript enabled still need to request the entire page in the background instead of just the needed part. In some cases this can have quite huge impact on response size. So lets try to tweak this solution a little bit on the server side. The first step will be extracting the list into a partial view:

@model jQuery.InfiniteScroll.Models.ProductsViewModel
@helper Pager(int currentPageIndex, int pageRecordsCount, int totalRecordsCount) {
  ...
}
<div id="list">
    @foreach (Northwind.Model.Product product in Model.Products)
    {
        <div class="ui-corner-all">
            <strong>Name:</strong> @product.Name<br />
            <strong>Category:</strong> @product.Category.Name<br />
            <strong>Supplier:</strong> @product.Supplier.Name<br />
            <strong>Unit price:</strong> @product.UnitPrice<br />
            <strong>Quantity per unit:</strong> @product.QuantityPerUnit<br />
            <strong>Units in stock:</strong> @product.UnitsInStock<br />
        </div>
    }
</div>
@Pager(Model.CurrentPageIndex, Model.PageRecordsCount, Model.TotalRecordsCount)

Now the view needs to be modified accordingly:

@model jQuery.InfiniteScroll.Models.ProductsViewModel
@{ ViewBag.Title = "Infinite Scroll in ASP.NET MVC"; }
@Html.Partial("ProductsList" , Model)
<script type="text/javascript">
  $(document).ready(function () {
    $('#list').infinitescroll({
      navSelector: '#pager',
      nextSelector: '#pager span.ui-state-hover + a',
      itemSelector: '#list div.ui-corner-all',
      loading: {
        img: '@Url.Content("~/Content/images/ajax-loader.gif")',
        msgText: '',
        finishedMsg: ''
      }
    });
  });
</script>

In the controller we could use Request.IsAjaxRequest() method to distinguish between standard and AJAX request but for testing and clarity I prefer having two separate methods. This is why I have created following attributes:

[AttributeUsage(AttributeTargets.Method, AllowMultiple = false, Inherited = true)]
public sealed class AcceptAjaxRequestAttribute : ActionMethodSelectorAttribute
{
  #region Properties
  public bool Accept { get; private set; }
  #endregion

  #region Constructor
  public AcceptAjaxRequestAttribute(bool accept)
  {
    Accept = accept;
  }
  #endregion

  #region ActionMethodSelectorAttribute Members
  public override bool IsValidForRequest(ControllerContext controllerContext, MethodInfo methodInfo)
  {
    if (controllerContext == null)
      throw new ArgumentNullException("controllerContext");

    bool isAjaxRequest = (controllerContext.HttpContext.Request["X-Requested-With"] == "XMLHttpRequest") || ((controllerContext.HttpContext.Request.Headers != null) && (controllerContext.HttpContext.Request.Headers["X-Requested-With"] == "XMLHttpRequest"));

    return Accept == isAjaxRequest;
  }
  #endregion
}

[AttributeUsage(AttributeTargets.Method, AllowMultiple = false, Inherited = true)]
public sealed class AjaxRequestAttribute : ActionMethodSelectorAttribute
{
  #region Fields
  private static readonly AcceptAjaxRequestAttribute _innerAttribute = new AcceptAjaxRequestAttribute(true);
  #endregion

  #region ActionMethodSelectorAttribute Members
  public override bool IsValidForRequest(ControllerContext controllerContext, MethodInfo methodInfo)
  {
    return _innerAttribute.IsValidForRequest(controllerContext, methodInfo);
  }
  #endregion
}

[AttributeUsage(AttributeTargets.Method, AllowMultiple = false, Inherited = true)]
public sealed class NoAjaxRequestAttribute : ActionMethodSelectorAttribute
{
  #region Fields
  private static readonly AcceptAjaxRequestAttribute _innerAttribute = new AcceptAjaxRequestAttribute(false);
  #endregion

  #region ActionMethodSelectorAttribute Members
  public override bool IsValidForRequest(ControllerContext controllerContext, MethodInfo methodInfo)
  {
    return _innerAttribute.IsValidForRequest(controllerContext, methodInfo);
  }
  #endregion
}

With help of those attributes and ActionNameAttribute the controller can be modified like this:

#region Actions
[NoAjaxRequest]
public ViewResult Products(int? page)
{
  return View(GetProductsViewModel(page));
}

[AjaxRequest]
[ActionName("Products")]
public PartialViewResult ProductsList(int? page)
{
  return PartialView("ProductsList", GetProductsViewModel(page));
}
#endregion

#region Methods
private ProductsViewModel GetProductsViewModel(int? page)
{
  ProductsViewModel viewModel = new ProductsViewModel()
  {
    CurrentPageIndex = page.HasValue ? page.Value : 1,
    PageRecordsCount = 10,
    TotalRecordsCount = _productsRepository.GetCount(String.Empty)
  };
  viewModel.Products = _productsRepository.FindRange(String.Empty, "Name", (viewModel.CurrentPageIndex - 1) * viewModel.PageRecordsCount, viewModel.PageRecordsCount);

  return viewModel;
}
#endregion

Thanks to this the clients with JavaScript support will get only the required HTML while clients with JavaScript disabled will get the entire page for each request.

Range Requests in ASP.NET MVC – RangeFileResult

noreply@blogger.com (Tomasz Pęczek) — Sun, 09 Oct 2011 17:38:00 +0000

In one of small projects I'm involved in there was a need for supporting Range Requests. That wouldn't be an issue if the files were static resources (IIS, as any decent server, has built in support for Range Requests) but in this case the files were returned from Action. To solve this problem I've decided to create an ActionResult which takes care of creating Partial Response internally.

To create Partial Response the ActionResult will require some basic information about the file. It also has to be able to generate entity tag:

public abstract class RangeFileResult : ActionResult
{
  ...

  #region Properties
  public string ContentType { get; private set; }

  public string FileName { get; private set; }

  public DateTime FileModificationDate { get; private set; }

  private DateTime HttpModificationDate { get; set; }

  public long FileLength { get; private set; }

  private string EntityTag { get; set; }

  private long[] RangesStartIndexes { get; set; }

  private long[] RangesEndIndexes { get; set; }

  private bool RangeRequest { get; set; }

  private bool MultipartRequest { get; set; }
  #endregion

  #region Constructor
  protected RangeFileResult(string contentType, string fileName, DateTime modificationDate, long fileLength)
  {
    if (String.IsNullOrEmpty(contentType))
      throw new ArgumentNullException("contentType");

    ContentType = contentType;
    FileName = fileName;
    FileLength = fileLength;
    FileModificationDate = modificationDate;
    //Modification date for header values comparisons purposes
    HttpModificationDate = modificationDate.ToUniversalTime();
    HttpModificationDate = new DateTime(HttpModificationDate.Year, HttpModificationDate.Month, HttpModificationDate.Day, HttpModificationDate.Hour, HttpModificationDate.Minute, HttpModificationDate.Second, DateTimeKind.Utc);
  }
  #endregion

  #region Methods
  protected virtual string GenerateEntityTag(ControllerContext context)
  {
    //Generate entity tag based on file name and modification date
    byte[] entityTagBytes = Encoding.ASCII.GetBytes(String.Format("{0}|{1}", FileName, FileModificationDate));
    return Convert.ToBase64String(new MD5CryptoServiceProvider().ComputeHash(entityTagBytes));
  }

  ...
  #endregion
}

Now we should get the actual byte range(s) from the request:

#region Fields
private static char[] _commaSplitArray = new char[] { ',' };
private static char[] _dashSplitArray = new char[] { '-' };
private static string[] _httpDateFormats = new string[] { "r", "dddd, dd-MMM-yy HH':'mm':'ss 'GMT'", "ddd MMM d HH':'mm':'ss yyyy" };
#endregion

...

#region Methods
...

//Helper method for getting HTTP headers values
private string GetHeader(HttpRequestBase request, string header, string defaultValue = "")
{
  return String.IsNullOrEmpty(request.Headers[header]) ? defaultValue : request.Headers[header].Replace("\"", String.Empty);
}

private void GetRanges(HttpRequestBase request)
{
  //Get "Range" header from request
  string rangesHeader = GetHeader(request, "Range");
  //Get "If-Range" header from request
  string ifRangeHeader = GetHeader(request, "If-Range", EntityTag);
  DateTime ifRangeHeaderDate;
  bool isIfRangeHeaderDate = DateTime.TryParseExact(ifRangeHeader, _httpDateFormats, null, DateTimeStyles.AssumeUniversal | DateTimeStyles.AdjustToUniversal, out ifRangeHeaderDate);

  //If there is no "Range" header,
  //or the entity tag from "If-Range" header does not match this entity tag,
  //or the modification date is greater than modification date from "If-Range" header
  if (String.IsNullOrEmpty(rangesHeader) || (!isIfRangeHeaderDate && ifRangeHeader != EntityTag) || (isIfRangeHeaderDate && HttpModificationDate > ifRangeHeaderDate))
  {
    //Return entire file
    RangesStartIndexes = new long[] { 0 };
    RangesEndIndexes = new long[] { FileLength - 1 };
    RangeRequest = false;
    MultipartRequest = false;
  }
  //Otherwise
  else
  {
    //Split "Range" header value into ranges
    string[] ranges = rangesHeader.Replace("bytes=", String.Empty).Split(_commaSplitArray);

    RangesStartIndexes = new long[ranges.Length];
    RangesEndIndexes = new long[ranges.Length];
    RangeRequest = true;
    MultipartRequest = (ranges.Length > 1);

    //Get the star and end index for the range 
    for (int i = 0; i < ranges.Length; i++)
    {
      string[] currentRange = ranges[i].Split(_dashSplitArray);

      if (String.IsNullOrEmpty(currentRange[1]))
        RangesEndIndexes[i] = FileLength - 1;
      else
        RangesEndIndexes[i] = Int64.Parse(currentRange[1]);

      if (String.IsNullOrEmpty(currentRange[0]))
      {
        RangesStartIndexes[i] = FileLength - 1 - RangesEndIndexes[i];
        RangesEndIndexes[i] = FileLength - 1;
      }
      else
        RangesStartIndexes[i] = Int64.Parse(currentRange[0]);
    }
  }
}

...
#endregion

The ranges have to be validated for consistency:

private bool ValidateRanges(HttpResponseBase response)
{
  if (FileLength > Int32.MaxValue)
  {
    response.StatusCode = 413;
    return false;
  }

  for (int i = 0; i < RangesStartIndexes.Length; i++)
  {
    if (RangesStartIndexes[i] > FileLength - 1 || RangesEndIndexes[i] > FileLength - 1 || RangesStartIndexes[i] < 0 || RangesEndIndexes[i] < 0 || RangesEndIndexes[i] < RangesStartIndexes[i])
    {
      response.StatusCode = 400;
      return false;
    }
  }

  return true;
}

We also should validate modification date against If-Modified-Since, If-Unmodified-Since and Unless-Modified-Since headers:

private bool ValidateModificationDate(HttpRequestBase request, HttpResponseBase response)
{
  //First validate "If-Modified-Since" header
  string modifiedSinceHeader = GetHeader(request, "If-Modified-Since");
  if (!String.IsNullOrEmpty(modifiedSinceHeader))
  {
    DateTime modifiedSinceDate;
    DateTime.TryParseExact(modifiedSinceHeader, _httpDateFormats, null, DateTimeStyles.AssumeUniversal | DateTimeStyles.AdjustToUniversal, out modifiedSinceDate);

    if (HttpModificationDate <= modifiedSinceDate)
    {
      response.StatusCode = 304;
      return false;
    }
  }

  //Then validate "If-Unmodified-Since" or "Unless-Modified-Since"
  string unmodifiedSinceHeader = GetHeader(request, "If-Unmodified-Since", GetHeader(request, "Unless-Modified-Since"));
  if (!String.IsNullOrEmpty(unmodifiedSinceHeader))
  {
    DateTime unmodifiedSinceDate;
    bool unmodifiedSinceDateParsed = DateTime.TryParseExact(unmodifiedSinceHeader, _httpDateFormats, null, DateTimeStyles.AssumeUniversal | DateTimeStyles.AdjustToUniversal, out unmodifiedSinceDate);

    if (HttpModificationDate > unmodifiedSinceDate)
    {
      response.StatusCode = 412;
      return false;
    }
  }

  return true;
}

Last validation is for If-Match and If-None-Match headers:

private bool ValidateEntityTag(HttpRequestBase request, HttpResponseBase response)
{
  //Get "If-Match" header from request
  string matchHeader = GetHeader(request, "If-Match");
  
  //If header exists and it's value is different from "*"
  if (!String.IsNullOrEmpty(matchHeader) && matchHeader != "*")
  {
    //Split header value into list of etity tags
    string[] entitiesTags = matchHeader.Split(_commaSplitArray);
    int entitieTagIndex;
    for (entitieTagIndex = 0; entitieTagIndex < entitiesTags.Length; entitieTagIndex++)
    {
      if (EntityTag == entitiesTags[entitieTagIndex])
        break;
    }

    //If our entity tag wasn't found
    if (entitieTagIndex >= entitiesTags.Length)
    {
      //Set proper response status code
      response.StatusCode = 412;
      return false;
    }
  }

  //Get "If-None-Match" header from request
  string noneMatchHeader = GetHeader(request, "If-None-Match");

  //If header exists
  if (!String.IsNullOrEmpty(noneMatchHeader))
  {
    //If header value equals "*"
    if (noneMatchHeader == "*")
    {
      //Set proper response status code
      response.StatusCode = 412;
      return false;
    }

    //Split header value into list of etity tags
    string[] entitiesTags = noneMatchHeader.Split(_commaSplitArray);
    foreach (string entityTag in entitiesTags)
    {
      if (EntityTag == entityTag)
      {
        //Set proper response status code
        response.AddHeader("ETag", String.Format("\"{0}\"", entityTag));
        response.StatusCode = 304;
        return false;
      }
    }
  }

  return true;
}

We can finally wrap it up and implement ExecuteResult method:

protected abstract void WriteEntireEntity(HttpResponseBase response);

protected abstract void WriteEntityRange(HttpResponseBase response, long rangeStartIndex, long rangeEndIndex);

public override void ExecuteResult(ControllerContext context)
{
  //Generate entity tag
  EntityTag = GenerateEntityTag(context);
  //Get ranges from request
  GetRanges(context.HttpContext.Request);

  //If all validations are successful
  if (ValidateRanges(context.HttpContext.Response) && ValidateModificationDate(context.HttpContext.Request, context.HttpContext.Response) && ValidateEntityTag(context.HttpContext.Request, context.HttpContext.Response))
  {
    //Set common headers
    context.HttpContext.Response.AddHeader("Last-Modified", FileModificationDate.ToString("r"));
    context.HttpContext.Response.AddHeader("ETag", String.Format("\"{0}\"", EntityTag));
    context.HttpContext.Response.AddHeader("Accept-Ranges", "bytes");

    //If this is not range request
    if (!RangeRequest)
    {
      //Set standard headers
      context.HttpContext.Response.AddHeader("Content-Length", FileLength.ToString());
      context.HttpContext.Response.ContentType = ContentType;
      //Set status code
      context.HttpContext.Response.StatusCode = 200;
      
      //If this is not HEAD request
      if (!context.HttpContext.Request.HttpMethod.Equals("HEAD"))
        //Write entire file to response
        WriteEntireEntity(context.HttpContext.Response);
    }
    //If this is range request
    else
    {
      string boundary = "---------------------------" + DateTime.Now.Ticks.ToString("x");

      //Compute and set content length
      context.HttpContext.Response.AddHeader("Content-Length", GetContentLength(boundary).ToString());
      
      //If this is not multipart request
      if (!MultipartRequest)
      {
        //Set content range and type
        context.HttpContext.Response.AddHeader("Content-Range", String.Format("bytes {0}-{1}/{2}", RangesStartIndexes[0], RangesEndIndexes[0], FileLength));
        context.HttpContext.Response.ContentType = ContentType;
      }
      //Otherwise
      else
        //Set proper content type
        context.HttpContext.Response.ContentType = String.Format("multipart/byteranges; boundary={0}", boundary);

      //Set status code
      context.HttpContext.Response.StatusCode = 206;

      //If this not HEAD request
      if (!context.HttpContext.Request.HttpMethod.Equals("HEAD"))
      {
        //For each requested range
        for (int i = 0; i < RangesStartIndexes.Length; i++)
        {
          //If this is multipart request
          if (MultipartRequest)
          {
            //Write additional multipart info
            context.HttpContext.Response.Write(String.Format("--{0}\r\n", boundary));
            context.HttpContext.Response.Write(String.Format("Content-Type: {0}\r\n", ContentType));
            context.HttpContext.Response.Write(String.Format("Content-Range: bytes {0}-{1}/{2}\r\n\r\n", RangesStartIndexes[i], RangesEndIndexes[i], FileLength));
          }

          //Write range (with multipart separator if required)
          if (context.HttpContext.Response.IsClientConnected)
          {
            WriteEntityRange(context.HttpContext.Response, RangesStartIndexes[i], RangesEndIndexes[i]);
            if (MultipartRequest)
              context.HttpContext.Response.Write("\r\n");
            context.HttpContext.Response.Flush();
          }
          else
            return;
        }
        
        //If this is multipart request
        if (MultipartRequest)
          context.HttpContext.Response.Write(String.Format("--{0}--", boundary));
      }
    }
  }
}

//Helper method for computing content length
private int GetContentLength(string boundary)
{
  int contentLength = 0;

  for (int i = 0; i < RangesStartIndexes.Length; i++)
  {
    contentLength += Convert.ToInt32(RangesEndIndexes[i] - RangesStartIndexes[i]) + 1;

    if (MultipartRequest)
      contentLength += boundary.Length + ContentType.Length + RangesStartIndexes[i].ToString().Length + RangesEndIndexes[i].ToString().Length + FileLength.ToString().Length + 49;
  }

  if (MultipartRequest)
    contentLength += boundary.Length + 4;

  return contentLength;
}

The base class is now ready, to create any specific implementation we just need to override WriteEntireEntity and WriteEntityRange methods:

public class RangeFilePathResult : RangeFileResult
{
  #region Fields
  private const int _bufferSize = 0x1000;
  #endregion

  #region Constructor
  public RangeFilePathResult(string contentType, string fileName, DateTime modificationDate, long fileLength)
    : base(contentType, fileName, modificationDate, fileLength)
  {
    if (String.IsNullOrEmpty(fileName))
      throw new ArgumentNullException("fileName");
  }
  #endregion

  #region Methods
  protected override void WriteEntireEntity(HttpResponseBase response)
  {
    response.TransmitFile(FileName);
  }

  protected override void WriteEntityRange(HttpResponseBase response, long rangeStartIndex, long rangeEndIndex)
  {
    using (FileStream stream = new FileStream(FileName, FileMode.Open, FileAccess.Read))
    {
      stream.Seek(rangeStartIndex, SeekOrigin.Begin);

      int bytesRemaining = Convert.ToInt32(rangeEndIndex - rangeStartIndex) + 1;
      byte[] buffer = new byte[_bufferSize];

      while (bytesRemaining > 0)
      {
        int bytesRead = stream.Read(buffer, 0, _bufferSize < bytesRemaining ? _bufferSize : bytesRemaining);
        response.OutputStream.Write(buffer, 0, bytesRead);
        bytesRemaining -= bytesRead;
      }

      stream.Close();
    }
  }
  #endregion
}

I have added the RangeFileResult class, and following implementations to the latest version of Lib.Web.Mvc:

RangeFilePathResult
RangeFileStreamResult
RangeFileContentResult

You can download this release from here or go for NuGet package.

I have also published sample application which shows how to use those classes together with VideoJS, you can download it here.

jqGrid Strongly Typed Helper - Caption layer, dynamic scrolling and grouping

noreply@blogger.com (Tomasz Pęczek) — Sat, 30 Jul 2011 20:32:00 +0000

Recently, I have released an updated version of my Lib.Web.Mvc project, which brings few new functionalities to jqGrid strongly typed helper. Let me give you a short description of those, starting with support for caption layer:

If you want to enable the caption layer, all you have to do is set JqGridOptions.Caption property to not empty string (you can also use proper JqGridHelper constructor parameter):

@{
  var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper<jqGrid.Models.ProductFormattedViewModel>("products",
    caption: "Products",
    ...
  );
}

There two more options for controlling caption layer:

HiddenEnabled - This property defines whether the show/hide grid button is enabled.
Hidden - This property defines whether the grid is initially hidden (no data is loaded, only caption layer is shown). This setting takes effect only if the Caption property is not empty string and HiddenEnabled is set to true.

Another new functionality supported by the helper is dynamic scrolling. This is supported through JqGridOptions.DynamicScrollingMode property, which can take one of the following values:

JqGridDynamicScrollingModes.Disabled - Dynamic scrolling is disabled (this is default value).
JqGridDynamicScrollingModes.HoldAllRows - Dynamic scrolling is enabled, the grid will hold all items requested.
JqGridDynamicScrollingModes.HoldVisibleRows - Dynamic scrolling is enabled, the grid will hold only visible rows.

When you set this property to value different than Disabled jqGrid will remove the pager and load data as needed while scrolling. There is a way to optimize this experience by allowing jqGrid to request more than one page of data at once. To achieve this first you must enable npage parameter through ParametersNames property:

@{
  var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper<jqGrid.Models.ProductFormattedViewModel>("products",
    dynamicScrollingMode: Lib.Web.Mvc.JQuery.JqGrid.JqGridDynamicScrollingModes.HoldAllRows,
    ...
    parametersNames: new Lib.Web.Mvc.JQuery.JqGrid.JqGridParametersNames() { PagesCount = "npage" },
    ...
  );
}

Now, we just need to modify controller action to support this parameter:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Products(JqGridRequest request, CustomSearchViewModel viewModel)
{
  string filterExpression = String.Empty;
  if (request.Searching)
  {
    //Generate filter expression
    ...
  }

  int totalRecordsCount = _productsRepository.GetCount(filterExpression);

  JqGridResponse response = new JqGridResponse()
  {
    TotalPagesCount = (int)Math.Ceiling((float)totalRecordsCount / (float)request.RecordsCount),
    PageIndex = request.PageIndex,
    TotalRecordsCount = totalRecordsCount
  };
  response.Records.AddRange(from product in _productsRepository.FindRange(filterExpression, String.Format("{0} {1}", sortingName, request.SortingOrder), request.PageIndex * request.RecordsCount, (request.PagesCount.HasValue ? request.PagesCount.Value : 1) * request.RecordsCount)
                            select new JqGridRecord<ProductFormattedViewModel>(Convert.ToString(product.Id), new ProductFormattedViewModel(product)));

  return new JqGridJsonResult() { Data= response };
}

The user can scroll through the rows and jqGrid will dynamically load all necessary data:

The last new functionality is grouping. To enable it, you need to set JqGridOptions.GroupingEnabled to true and assign JqGridGroupingView to JqGridOptions.GroupingView option (at this moment jqGrid supports only one grouping level, but the API is ready to support more):

@{
  var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper<jqGrid.Models.ProductFormattedViewModel>("products",
    groupingEnabled: true,
    groupingView: new Lib.Web.Mvc.JQuery.JqGrid.JqGridGroupingView 
    {
      Fields = new string[] { "Category" },
      ColumnShow = new bool[] { false },
      Summary = new bool[] { true },
      DataSorted = true
    },
    ...
  );
}

Setting DataSorted to true will cause jqGrid to add grouping column name (name not index) to sorting names (jqGrid requires data sorted by grouping column). There is also new DataAnnotation (JqGridColumnSummary)available which provides control ower group summary for the column.

The sample project can be downloaded here, for those of you who whish to work directly with JavaScript the jqGrid in ASP.NET MVC 3 and Razor samples are available here.

jqGrid and ASP.NET MVC – Batch updates

noreply@blogger.com (Tomasz Pęczek) — Sun, 22 May 2011 22:07:00 +0000

Recently I've been asked to prepare a batch update scenario for jqGrid. After playing around with few prototypes I decided use inline editing for that purpose.
First we need to put all displayed rows into editable state. The best way to do this is to call editRow for each row during gridComplete event:

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.locale-en-3.8.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid-3.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.json-2.2.min.js")" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $('#grid_id').jqGrid({
      //Here you set up colModel, colNames and any other options
      ...
      //This event fires after all the data is loaded into the grid
      gridComplete: function() {
        //Get ids for all current rows
        var dataIds = $('#grid_id').jqGrid('getDataIDs');
        for (var i = 0;i < dataIds.length; i++) {
          //Put row in edit state
          $("#grid_id").jqGrid('editRow', dataIds[i], false);
        }
      }
    });
  });
</script>

This way we can be sure, that every row loaded by jqGrid will end up in edit state. Now we need to add a button which will trigger the batch update. In the click event of that button we want to save every row to local data array. We can achieve that by using saveRow method, we just need to put 'clientArray' in third parameter. One important thing to remember here is that saveRow may throw an exception in case of validation errors - in such a case we will restore the original row and skip sending it to the server. Actual sending will be done by jQuery.ajax() method:

$('#button_id').click(function() {
  var batch = new Array();
  //Get ids for all current rows
  var dataIds = $('#grid_id').jqGrid('getDataIDs');
  for (var i = 0; i < dataIds.length; i++) {
    try {
      //Save row only to the grid 
      $('#grid_id').jqGrid('saveRow', dataIds[i], false, 'clientArray');
      //Get row data
      var data = $('#grid_id').jqGrid('getRowData', dataIds[i]);
      //Data doesn't contains actual id
      data.Id = dataIds[i];
      //Add data to the batch
      batch.push(data);
    }
    catch (ex) {
      //If you are using editRules it might end up with exception
      $('#grid_id').jqGrid('restoreRow', dataIds[i]);
    }
  }
  //Send batch to the server
  $.ajax({
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    url: '@Url.Action("BatchUpdate", "Home")',
    dataType: 'json',
    data: $.toJSON(batch),
    success: function(result) {
      ...
      $('#grid_id').trigger('reloadGrid');
    }
  });
});

Now we have to receive the data on server side. Thanks to built in JSON model binding in ASP.NET MVC 3 we can do this with very simple action method:

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult BatchUpdate(List<ViewModel> viewModelsBatch)
{
  //Update your data storage here
  ...
}

Feel free to use this solution if you need something like this.

Making WebPI work with proxy authentication

noreply@blogger.com (Tomasz Pęczek) — Mon, 16 May 2011 20:40:00 +0000

Recently I had to use WebPI on a machine behind a proxy which required authentication. After some time with google all I have found was information, that WebPI doesn't support authenticated proxies. As I really needed the tool, I decided to try find some workaround.
First step was to get the offline installer for WebPI (it's available here). After installation, the first run attempt resulted in following error:

---------------------------
Microsoft Web Platform Installer
---------------------------
Url 'https://go.microsoft.com/fwlink/?LinkId=193533' returned HTTP status code: 407
---------------------------
OK  
---------------------------

The 407 error code stands for proxy authentication failure. If you are lucky, all what you need to do is enabling default credentials for proxy authentication. This can be easily done by modifying WebPlatformInstaller.exe.config file:

<configuration>
  ...
    <system.net>
      <defaultProxy enabled="true" useDefaultCredentials="true" />
    </system.net>
  ...
</configuration>

Things are getting a little bit more complicated, when you have to provide specific user and password combination for basic proxy authentication. The defaultProxy element can have a child element module, which can be used for adding a new proxy module to application. Such a proxy module is nothing more than a class which implements IWebProxy interface:

namespace WebPI.Net
{
  public class AuthenticatedProxy : IWebProxy
  {
    public ICredentials Credentials
    {
      //Put your user name and password into credentials
      get { return new NetworkCredential("user", "password"); }
      set { }
    }

    public Uri GetProxy(Uri destination)
    {
      //Proxy URI will be taken from the current user's IE proxy settings
      return WebRequest.GetSystemWebProxy().GetProxy(destination);
    }

    public bool IsBypassed(Uri host)
    {
      return false;
    } 
  }
}

The GetSystemWebProxy method guarantees support for IE proxy settings (automatically detect proxy settings, automatic configuration script, manual proxy server settings and advanced manual proxy server settings). Now only a small change to WebPlatformInstaller.exe.config file is needed:

<configuration>
  ...
  <system.net>
    <defaultProxy enabled="true" useDefaultCredentials="false">
      <module type="WebPI.Net.AuthenticatedProxy, WebPI.Net, Version=1.0.0.0, Culture=neutral, PublicKeyToken=79a8d77199cbf3bc" />
    </defaultProxy>
  </system.net>
  ...
</configuration>

That's it. This solution has been tested only on one machine but it has completely resolved the problem of proxy authentication for me, I hope it will do the same for some of you.

jqGrid and ASP.NET MVC – Form Editing with TinyMCE and file upload

noreply@blogger.com (Tomasz Pęczek) — Sun, 27 Mar 2011 16:24:00 +0000

In one of comments to my jqGrid strongly typed helper post I was asked for form editing demo with file upload and TinyMCE integration, so here it comes.
The demo will provide a CRUD functionality for Employees table from Northwind database. I will skip Employee and EmployeesRepository classes here (full source code for entire sample can be downloaded here) and go straight to ViewModel which will be used by the helper:

public class EmployeeViewModel
{
  #region Properties
  [ScaffoldColumn(false)]
  public int Id { get; set; }

  [JqGridColumnSortable(false)]
  [JqGridColumnFormatter("$.photoFormatter", UnFormatter = "$.photoUnFormatter")]
  [JqGridColumnLayout(JqGridAlignments.Center, Width = 35)]
  [JqGridColumnEditable(true, EditType = JqGridColumnEditTypes.File)]
  public string Photo { get; private set; }

  [StringLength(25)]
  [JqGridColumnSortable(true)]
  [DisplayName("Title of courtesy")]
  [JqGridColumnEditable(true, EditType = JqGridColumnEditTypes.Text)]
  public string TitleOfCourtesy { get; set; }

  [Required]
  [StringLength(10)]
  [DisplayName("First name")]
  [JqGridColumnSortable(true)]
  [JqGridColumnEditable(true, EditType = JqGridColumnEditTypes.Text)]
  public string FirstName { get; set; }

  [Required]
  [StringLength(20)]
  [DisplayName("Last name")]
  [JqGridColumnSortable(true)]
  [JqGridColumnEditable(true, EditType = JqGridColumnEditTypes.Text)]
  public string LastName { get; set; }

  [StringLength(30)]
  [JqGridColumnSortable(true)]
  [JqGridColumnEditable(true, EditType = JqGridColumnEditTypes.Text)]
  public string Title { get; set; }

  [AllowHtml]
  [JqGridColumnSortable(false)]
  [JqGridColumnLayout(JqGridAlignments.Left, Width = 450)]
  [JqGridColumnEditable(true, EditType = JqGridColumnEditTypes.TextArea)]
  public string Notes { get; set; }
  #endregion

  #region Constructors
  public EmployeeViewModel()
  { }

  public EmployeeViewModel(Employee employee)
  {
    this.Id = employee.Id;
    this.TitleOfCourtesy = employee.TitleOfCourtesy;
    this.FirstName = employee.FirstName;
    this.LastName = employee.LastName;
    this.Title = employee.Title;
    this.Notes = employee.Notes;

    RouteValueDictionary photoUrlRouteData = new RouteValueDictionary();
    photoUrlRouteData["controller"] = "Home";
    photoUrlRouteData["action"] = "EmployeePhoto";
    photoUrlRouteData["id"] = employee.Id;
    Photo = RouteTable.Routes.GetVirtualPathForArea(HttpContext.Current != null ? HttpContext.Current.Request.RequestContext : null, null, photoUrlRouteData).VirtualPath;
  }
  #endregion
}

That's a lot of attributes, but we will focus only on two properties - Photo for which we want file upload functionality and Notes which we want to integrate with TinyMCE. We will start with Notes. Two most important attributes here are AllowHtml (so TinyMCE can post some HTML for this property) and JqGridColumnEditable (we want jqGrid to generate a TextArea for us, so we can attach TinyMCE to it). The only problem with TinyMCE here is that it can't be attached to an element which is not visible. Because of that we have to recreate it every time the form is displayed. There are two events in jqGrid navigator action options, which will allow us to do it easily: afterShowForm and onClose. Here goes the JavaScript functions for those events:

$.onAfterShowForm = function(formSelector) {
  //Add TinyMCE editor instance
  $('textarea', formSelector).attr('cols', '50').attr('rows', '15').tinymce({
    theme : 'advanced',
    theme_advanced_toolbar_location : 'top'
  });
};

$.onClose = function(formSelector) {
  //Remove TinyMCE editor instance
  $('textarea', formSelector).tinymce().remove();
};

So TinyMCE is working, what about the file upload? We can set the edittype to file and than proper input element will be created by jqGrid, but this is where the support ends - jqGrid will not post the file for us. Tony Tomov suggests creating an additional submit button for this, but this way you need to post data in two steps. I really wanted to have all data posted at once, so I decided to go a little bit "hacky" here. Please be aware, that following solution will completely replace jqGrid built in post functionality - if you need any part of it, you need to write it yourself here. I'm going to use Ajax File Uploader plugin, to post entire form at once. To achieve this I will change some of the form attributes in onInitializeForm event:

//WARNING: This will completely replace build in jqGrid post behavior
$.onInitializeForm = function(formSelector) {
  //Set enctype='multipart/form-data'
  $(formSelector).attr('enctype', 'multipart/form-data')
                 //method='POST'
                 .attr('method', 'POST')
                 //remove onsubmit
                 .removeAttr('onsubmit')
                 //attach Ajax File Uploader plugin
                 .iframePostForm({
                   //When post request is completed
                   complete: function(response) {
                     //check if operation was successful
                     if(response != 'success') {
                       //if not, then display error message
                    $('#FormError>td', formSelector).html(response);
                    $('#FormError', formSelector).show();
                     } else {
                       var id = $('#id_g', formSelector).val();
                       //if yes, reload jqGrid
                       $('#employees').trigger('reloadGrid');
                       //and restore current selection
                       setTimeout(function(){
                         $('#employees').jqGrid('setSelection', id);
                       }, 1000);
                     }
                     //Remove class from submit button
                     $('#iframe_submit').removeClass('ui-state-active');
                   }
                 });
  //Create inputs for 'id' and 'oper' keys which jqGrid adds to request by default
  $('#id_g', formSelector).after($('<input />').attr('id', 'iframe_id').attr('type', 'text').attr('name', 'id'));
  $('#id_g', formSelector).after($('<input />').attr('id', 'iframe_oper').attr('type', 'text').attr('name', 'oper'));
  //Change the submit button id, so jqGrid will not attach its click event
  $('#sData').attr('id', 'iframe_submit')
             //and attach our click event
             .click(function(e) {
               //When user clicks the submit button hide error message
               $('#FormError', formSelector).hide();
               var id = $('#id_g', formSelector).val();
               //set values for 'id' and 'oper' inputs
               $('#iframe_id', formSelector).val(id);
               $('#iframe_oper', formSelector).val((id == '_empty') ? 'add' : 'edit');
               //set action url based on operation type
               $(formSelector).attr('action', (id == '_empty') ? '@Url.Action("InsertEmployee")' : '@Url.Action("UpdateEmployee")')
               //add class to submit button
               $('#iframe_submit').addClass('ui-state-active');
               //and submit form
               $(formSelector).submit();
               return false;
  });
};

Now we can create the view. First we should instantiate jqGrid helper with all the desired options:

@{
  ViewBag.Title = "jqGrid in ASP.NET MVC - Employees [Form Editing]";

  var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper<jqGrid.DungDepTrai.Models.EmployeeViewModel>("employees",
    dataType: Lib.Web.Mvc.JQuery.JqGrid.JqGridDataTypes.Json,
    methodType: Lib.Web.Mvc.JQuery.JqGrid.JqGridMethodTypes.Post,
    pager: true,
    rowsNumber: 10,
    sortingName: "LastName",
    sortingOrder: Lib.Web.Mvc.JQuery.JqGrid.JqGridSortingOrders.Asc,
    url: Url.Action("FindEmployees"),
    width: 1077,
    viewRecords: true
  ).Navigator(new Lib.Web.Mvc.JQuery.JqGrid.JqGridNavigatorOptions() { Search = false, View = false },
    editActionOptions: new Lib.Web.Mvc.JQuery.JqGrid.JqGridNavigatorActionOptions() { Url = Url.Action("UpdateEmployee"), OnInitializeForm = "$.onInitializeForm", OnAfterShowForm = "$.onAfterShowForm", OnClose = "$.onClose" },
    addActionOptions: new Lib.Web.Mvc.JQuery.JqGrid.JqGridNavigatorActionOptions() { Url = Url.Action("InsertEmployee"), OnInitializeForm = "$.onInitializeForm", OnAfterShowForm = "$.onAfterShowForm", OnClose = "$.onClose" },
    deleteActionOptions: new Lib.Web.Mvc.JQuery.JqGrid.JqGridNavigatorActionOptions() { Url = Url.Action("DeleteEmployee") }
  );
}

Then we can get required HTML out of it:

@grid.GetHtml()

And add the JavaScript:

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.locale-en-3.8.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid-3.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.iframe-post-form.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/TinyMCE/tiny_mce.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/TinyMCE/jquery.tinymce.js")" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function () {
    @grid.GetJavaScript()
  });

  //Every photo have constant URL, this formatter will make them refresh at every reload <-- only for presentation purposes
  $.photoFormatter = function(cellvalue, options, rowObject) {
    return "<img style='width:25px' src='" + cellvalue + "&rand=" + (Math.random() * 10000000) + "' />";
  };

  //Always unformat photo as empty value
  $.photoUnFormatter = function(cellvalue, options, cellobject) {
    return '';
  };

  //WARNING: This will completely replace build in jqGrid post behavior
  $.onInitializeForm = function(formSelector) {
    ...
  };

  $.onAfterShowForm = function(formSelector) {
    ...
  };

  $.onClose = function(formSelector) {
    ...
  };
</script>

The only thing that is missing here is some server side code for handling the requests:

public ViewResult Employees()
{
  return View();
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult FindEmployees(JqGridRequest request)
{
  int totalRecordsCount = _employeesRepository.GetCount();

  JqGridResponse response = new JqGridResponse()
  {
    TotalPagesCount = (int)Math.Ceiling((float)totalRecordsCount / (float)request.RecordsCount),
    PageIndex = request.PageIndex,
    TotalRecordsCount = totalRecordsCount
  };
  response.Records.AddRange(from employee in _employeesRepository.FindRange(String.Format("{0} {1}", request.SortingName, request.SortingOrder), request.PageIndex * request.RecordsCount, request.RecordsCount)
                            select new JqGridRecord<EmployeeViewModel>(Convert.ToString(employee.Id), new EmployeeViewModel(employee)));

  return new JqGridJsonResult() { Data = response };
}

[NoCache]
public ActionResult EmployeePhoto(int id)
{
  //We should keep images in file system
  string employeePhotoPath = GetEmployeePhotoPath(id);
  if (!System.IO.File.Exists(employeePhotoPath))
  {
    Employee employee = _employeesRepository.FindByKey(id);
    if (employee.Photo != null)
    {
      using (FileStream employeePhotoStream = new FileStream(employeePhotoPath, FileMode.Create, FileAccess.Write))
        //Skip Ole bytes array
        employeePhotoStream.Write(employee.Photo, 78, employee.Photo.Length - 78);
    }
    else
      //You might want to return some default image here
      return new EmptyResult();
  }
  return File(employeePhotoPath, "image/bmp");
}

[AcceptVerbs(HttpVerbs.Post)]
public ContentResult InsertEmployee([Bind(Exclude = "Id")]EmployeeViewModel viewModel, HttpPostedFileBase photo)
{
  if (ModelState.IsValid)
  {
    try
    {
      if (photo != null && photo.ContentLength > 0 && photo.ContentType != "image/bmp")
        return Content("Photo must be in BMP format.");
      else
      {
        Employee employee = new Employee();
        employee.LastName = viewModel.LastName;
        employee.Notes = viewModel.Notes;
        employee.Title = viewModel.Title;
        employee.TitleOfCourtesy = viewModel.TitleOfCourtesy;
        employee.FirstName = viewModel.FirstName;
        _employeesRepository.Add(ref employee);

        _employeesRepository.SaveChanges();

        photo.SaveAs(GetEmployeePhotoPath(employee.Id));
      }
    }
    catch
    {
      //There should be some decent exception handling here
      return Content("An error occurred during employee insert.");
    }

    return Content("success");
  }
  else
    return Content("Invalid employee data.");
}

[AcceptVerbs(HttpVerbs.Post)]
public ContentResult UpdateEmployee(EmployeeViewModel viewModel, HttpPostedFileBase photo)
{
  if (ModelState.IsValid)
  {
    try
    {
      Employee employee = _employeesRepository.FindByKey(viewModel.Id);
      if (employee != null)
      {
        if (photo != null && photo.ContentLength > 0)
        {
          if (photo.ContentType == "image/bmp")
            photo.SaveAs(GetEmployeePhotoPath(viewModel.Id));
          else
            return Content("Photo must be in BMP format.");
        }

        employee.LastName = viewModel.LastName;
        employee.Notes = viewModel.Notes;
        employee.Title = viewModel.Title;
        employee.TitleOfCourtesy = viewModel.TitleOfCourtesy;
        employee.FirstName = viewModel.FirstName;

        _employeesRepository.SaveChanges();
      }
      else
        return Content("Couldn't found employee for update.");
    }
    catch
    {
      //There should be some decent exception handling here
      return Content("An error occurred during employee update.");
    }

    return Content("success");
  }
  else
    return Content("Invalid employee data.");
}

[AcceptVerbs(HttpVerbs.Post)]
public HttpStatusCodeResult DeleteEmployee(int id)
{
  try
  {
    _employeesRepository.Delete(id);
    _employeesRepository.SaveChanges();

    return new HttpStatusCodeResult(200, "Succeeded");
  }
  catch
  {
    //There should be some decent exception handling here
    return new HttpStatusCodeResult(500, "An error occurred during employee delete.");
  }    
}

Now we can play with the demo.

I hope you will find it helpful.

jqGrid and ASP.NET MVC - Strongly typed helper

noreply@blogger.com (Tomasz Pęczek) — Thu, 17 Mar 2011 19:40:00 +0000

I've been using jqGrid a lot over last year. During this time I have created many helper classes for it. Recently I decided to put all those classes together, clean up, rewrite and publish for the community.
I made helper available as part of my Lib.Web.Mvc library, and you can download it here (source code included), or go for the NuGet package.

Now let me show you simple usage example. We will need a model class for our grid:

public class ProductViewModel
{
  #region Properties
  public int Id { get; set; }

  public string Name { get; set; }

  [JqGridColumnSortingName("SupplierId")]
  public string Supplier { get; set; }

  [JqGridColumnSortingName("CategoryId")]
  public string Category { get; set; }

  [DisplayName("Quantity Per Unit")]
  [JqGridColumnAlign(JqGridColumnAligns.Center)]
  public string QuantityPerUnit { get; set; }

  [DisplayName("Unit Price")]
  [JqGridColumnAlign(JqGridColumnAligns.Center)]
  public decimal? UnitPrice { get; set; }

  [DisplayName("Units In Stock")]
  [JqGridColumnAlign(JqGridColumnAligns.Center)]
  public short? UnitsInStock { get; set; }
  #endregion

  #region Constructor
  public ProductViewModel()
  { }

  public ProductViewModel(Product product)
  {
    this.Id = product.Id;
    this.Name = product.Name;
    this.Supplier = product.Supplier.Name;
    this.Category = product.Category.Name;
    this.QuantityPerUnit = product.QuantityPerUnit;
    this.UnitPrice = product.UnitPrice;
    this.UnitsInStock = product.UnitsInStock;
  }
  #endregion
}

Following standard DataAnnotations attributes are supported:

DisplayName - This will set the name for the column (default is property name).
DisplayFormat - Value set for NullDisplayText will be used as cell value if property value will be null. Value set for DataFormatString will be used for formatting property value (on server side).
HiddenInput - This will set JqGridColumnModel.Hidden to true.
Range - Value set for Maximum will be used for EditRules.MaxValue of editable column and value set Minimum for will be used for EditRules.MinValue.
Required - This will set EditRules.Required to true for editable column.
ScaffoldColumn - If set Scaffold to false, there will be no column created for property with this attribute.
StringLength - Value set for MaximumLength will be used for EditOptions.MaximumLength of editable column.

Additionaly the helper support those custom attributes (from Lib.Web.Mvc.JQuery.JqGrid.DataAnnotations namespace):

JqGridColumnLayout - This will set the layout attributes for the column (alignment, initial width etc.).
JqGridColumnSortable - This will set the sorting options for the column (by default every column is sortable with property name as sorting name).
JqGridColumnFormatter - This will set the predefined (with options) or custom formatter for the column.
JqGridColumnEditable - This will set the edit options for the column.
JqGridColumnSearchable - This will set the search options for the column.

When our model class is done, we can start creating the view. First we need to include some CSS and JavaScript files:

<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/jqGrid/jquery-ui-jqgrid.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.locale-en-3.8.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid-3.8.2.min.js")" type="text/javascript"></script>

Then we can instantiate the helper and set desired options:

@{
  var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper<jqGrid.Models.ProductViewModel>("products",
    dataType: Lib.Web.Mvc.JQuery.JqGrid.JqGridDataTypes.Json,
    methodType: Lib.Web.Mvc.JQuery.JqGrid.JqGridMethodTypes.Post,
    pager: true,
    rowsNumber: 10,
    sortingName: "Id",
    sortingOrder: Lib.Web.Mvc.JQuery.JqGrid.JqGridSortingOrders.Asc,
    url: Url.Action("Products"),
    viewRecords: true
  );
}

This instance can be used for rendering HTML and JavaScript required by jqGrid:

@grid.GetHtml()
...
<script type="text/javascript">
  $(document).ready(function () {
    @grid.GetJavaScript()
  });
</script>

All we have to do now is creating an action method, which will provide data for our grid:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Products(JqGridRequest request)
{
  int totalRecordsCount = _productsRepository.GetCount();

  JqGridResponse response = new JqGridResponse()
  {
    TotalPagesCount = (int)Math.Ceiling((float)totalRecordsCount / (float)request.RecordsCount),
    PageIndex = request.PageIndex,
    TotalRecordsCount = totalRecordsCount
  };
  response.Records.AddRange(from product in _productsRepository.FindRange(String.Format("{0} {1}", request.SortingName, request.SortingOrder), request.PageIndex * request.RecordsCount, request.RecordsCount)
                            select new JqGridRecord<ProductViewModel>(Convert.ToString(product.Id), new ProductViewModel(product)));

  return new JqGridJsonResult() { Data= response };
}

When you run it, you should see something similar to this:

You can download a sample project for this helper, which contains following examples:

Basics & Formatting
Configuration Import/Export
Cell Editing
CRUD - Inline Editing
CRUD - Form Editing
Searching - Single
Searching - Toolbar
Searching - Custom
Searching - Advanced
Subgrid
TreeGrid

The helper doesn't support all the functionality of jqGrid, it's just a compilation of what I've been using. There is also no roadmap for it at the moment. If you find some necessary for you features missing or discover some bugs, please create an issue here. I will continue to develop this helper if the community will find it useful.

An early look at jQuery UI Grid in ASP.NET MVC - Data Model

noreply@blogger.com (Tomasz Pęczek) — Mon, 14 Feb 2011 14:55:00 +0000

More than a week ago The jQuery UI Team has announced that they are building a grid widget. Don't get me wrong, I'm a huge fan of jqGrid but when jQuery UI will have its own widget I will strongly consider switching. That's why I decided to test the widget through some basic samples while it's being developed.
I have downloaded current widget sources from jQuery UI grid branch at GitHub. The widget development takes place in three subfolders: grid-datamodel, grid-markup and grid-type - in this post I will look only into the first one.
Lets start by referencing some CSS and JavaScript:

<link href="@Url.Content("~/Content/site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/grid-datamodel.css")" rel="stylesheet" type="text/css" />
...
<script src="@Url.Content("~/Scripts/jquery-1.4.4.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tmpl.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ui/jquery.ui.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ui/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/datamodel/dataitem.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/datamodel/datasource.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/datamodel/extractor-datasource.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/datamodel/datastore.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/datamodel/grid.js")" type="text/javascript"></script>

Now we will add a table, which will be extended by the widget:

<table id="products">
  <thead>
    <tr>
      <th data-field="ProductID">Product Id</th>
      <th data-field="ProductName">Product Name</th>
      <th data-field="Supplier">Supplier</th>
      <th data-field="Category">Category</th>
      <th data-field="QuantityPerUnit">Quantity Per Unit</th>
      <th data-field="UnitPrice">Unit Price</th>
      <th data-field="UnitsInStock">Units In Stock</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Moving on to JavaScript we should define datasource for the widget. The widget can work with local datasource, but I will go for a remote one, because this is much more fun ;).

//extend dataitem with our new type
$.ui.dataitem.extend('product', {});

//create datasource for our new type
$.ui.datasource({
  type: 'product',
  source: function (request, response) {
    $.getJSON('@Url.Action("Products", "Home")', request, response);
  }
});

At the moment datasource accepts data as an array of objects, so this simple action will be enough for sending data to the client:

public JsonResult Products()
{
  object[] products = (from product in _productsRepository.GetProducts()
                       select new
                       {
                         ProductID = product.ProductID,
                         ProductName = product.ProductName,
                         Supplier = product.Supplier.CompanyName,
                         Category = product.Category.CategoryName,
                         QuantityPerUnit = product.QuantityPerUnit,
                         UnitPrice = product.UnitPrice,
                         UnitsInStock = product.UnitsInStock
                       }).ToArray();

  return Json(products, JsonRequestBehavior.AllowGet);
}

All what is left for use is to apply the widget on our table. While doing this, we must tell the widget how to map objects fields into cells. There are two ways of doing it. We can pass an array of fields names for columns like this:

$('#products').grid({
  type: 'product',
  columns: [ 'ProductID', 'ProductName', 'Supplier', 'Category', 'QuantityPerUnit', 'UnitPrice', 'UnitsInStock' ]
});

Or tell the widget to use a row template:

$('#products').grid({
  type: 'product',
  rowTemplate: $('#products-row-tmpl').html()
});

In second case, we have to create a row template with jQuery Templates plugin:

<script type="text/x-jquery-tmpl" id="products-row-tmpl">
  <tr>
    <td>${ProductID}</td>
    <td>${ProductName}</td>
    <td>${Supplier}</td>
    <td>${Category}</td>
    <td>${QuantityPerUnit}</td>
    <td>${UnitPrice}</td>
    <td>${UnitsInStock}</td>
  </tr>
</script>

And this is all. The widget will pull the data from the server and render a nice grid for us:

You can download source code of this sample from my svn repository at CodePlex. I will continue to play around with this widget as the beginning is very promising.

Speaking at MTS 2010 on "Rich user interface in ASP.NET MVC applications with jQuery plugins"

noreply@blogger.com (Tomasz Pęczek) — Wed, 15 Sep 2010 22:04:00 +0000

In few weeks (October 5th and 6th) I will be attending the MTS 2010 conference by Microsoft. On first day (October 5th) I will be speaking on "Rich user interface in ASP.NET MVC applications with jQuery plugins". There will be a little bit of talking and a lot of samples. I'm planning to cover CascadingDropDown, jTemplates, jQuery Treeview, jqGrid and few more.

I will do my best to share the presentation here (video if possible) but it will be all in polish (as it is polish conference).

HttpHandler with cross-origin resource sharing support

noreply@blogger.com (Tomasz Pęczek) — Tue, 07 Sep 2010 22:02:00 +0000

Recently I was playing around with Cross-Origin Resource Sharing (you can read a W3C Working Draft for it here), which is a mechanism to enable client-side cross-origin requests. As you can see, the last working draft is from 27 July 2010, so the technology is still in development. Let's take a look, how we can use it from JavaScript:

...
try {
  //Create XMLHttpRequest and assign it to 'request' variable
  ...

  if (request) {
    //Our request URL
    var jsonUrl = 'http://localhost:60000/CrossOrigin';
    //Check if XMLHttpRequest support CORS
    if (request.withCredentials !== 'undefined') {
      //If it does, prepare request
      request.open('GET', jsonUrl, true);
      request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
      request.onreadystatechange = function () {
        if (request.readyState == 4) {
          if (request.status == 200) {
            document.getElementById('divTarget').innerHTML = request.responseText;
          }
        }
      };
    //If not, than check if XDomainRequest is available
    } else if (typeof XDomainRequest != 'undefined') {
      //If it is, prepare request
      request = new XDomainRequest();
      request.open('GET', jsonUrl);
      request.onload = function () {
        document.getElementById('divTarget').innerHTML = request.responseText;
      };
    } else {
      throw (null);
    }
  } else {
    throw (null);
  }

  //Send request
  request.send(null);
} catch (e) {
  //There is no support for CORS, use something else instead (for example JSONP)
  ...
}

The first condition checks for native support of CORS through XMLHttpRequest. This is the way to go for FireFox, Chrome and Safari - you don't need to write any special code, just standard XMLHttpRequest. The second condition is for Internet Explorer, which supports cross-origin requests through XDomainRequest. I didn't managed to get it to work in Opera.
So we know how to perform request, let's take a look underneath. What you see below, are requests from FireFox:

OPTIONS
Connection: keep-alive
Keep-Alive: 115
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset: ISO-8859-2,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: pl,en-us;q=0.7,en;q=0.3
Host: localhost:60000
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 ( .NET CLR 3.5.30729; .NET4.0E)
Origin: http://localhost:50000
Access-Control-Request-Method: GET
Access-Control-Request-Headers: x-requested-with

GET
Connection: keep-alive
Keep-Alive: 115
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset: ISO-8859-2,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: pl,en-us;q=0.7,en;q=0.3
Host: localhost:60000
Referer: http://localhost:50000/CORS.htm
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 ( .NET CLR 3.5.30729; .NET4.0E)
X-Requested-With: XMLHttpRequest
Origin: http://localhost:50000

The first request (OPTIONS) is a preflight request. Its job is to ensure that the resource is ok with the request. It uses following headers to perform check:

Origin - It contains the origin of the request. You should put Access-Control-Allow-Origin header with the same value into response if you accept the origin (you can also use '*' as a value if you consider your resource public).
Access-Control-Request-Method - The method which will be used in actual request. In response you should put Access-Control-Allow-Methods header with list of allowed methods separated by commas.
Access-Control-Request-Headers - Comma separated list of custom headers which will be attached to request. You should put a list of headers which you accept into Access-Control-Allow-Headers header in response.

The preflight request can be sometimes skipped when the methods are simple (for example IE does it with GET method). When the browser receives proper response, the actual request is being made. It differs from standard request by having Origin header - you should put a proper Access-Control-Allow-Origin into response. Unfortunately Chrome and Safari doesn't put Origin into request, but they still require Access-Control-Allow-Origin in response. That makes using '*" necessary if you want those browser to work.
We now have enough knowledge to start writing our HttpHandler:

public class CrossOriginHandler : IHttpHandler
{
  #region IHttpHandler Members
  public bool IsReusable
  {
    get { return true; }
  }

  public void ProcessRequest(HttpContext context)
  {
    //Clear the response (just in case)
    ClearResponse(context);

    //Checking the method
    switch (context.Request.HttpMethod.ToUpper())
    {
      //Cross-Origin preflight request
      case "OPTIONS":
        //Set allowed method and headers
        SetAllowCrossSiteRequestHeaders(context);
        //Set allowed origin
        SetAllowCrossSiteRequestOrigin(context);
        break;
      //Cross-Origin actual or simple request
      case "GET":
        //Disable caching
        SetNoCacheHeaders(context);
        //Set allowed origin
        SetAllowCrossSiteRequestOrigin(context);
        //Generate response
        context.Response.ContentType = "text/plain";
        context.Response.ContentEncoding = Encoding.UTF8;
        context.Response.Write("<h1>Hello World! [powered by Cross-Origin Resource Sharing]</h1>");
        break;
      //We doesn't support any other methods than OPTIONS and GET
      default:
        context.Response.Headers.Add("Allow", "OPTIONS, GET");
        context.Response.StatusCode = 405;
        break;
    }

    context.ApplicationInstance.CompleteRequest();
  }
  #endregion

  #region Methods
  protected void ClearResponse(HttpContext context)
  {
    context.Response.ClearHeaders();
    context.Response.ClearContent();
    context.Response.Clear();
  }

  protected void SetNoCacheHeaders(HttpContext context)
  {
    context.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
    context.Response.Cache.SetValidUntilExpires(false);
    context.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
    context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
    context.Response.Cache.SetNoStore();
  }
  #endregion
}

This code should be easy to understand, but there are two key methods missing. Let's start with the one which puts Access-Control-Allow-Methods and Access-Control-Allow-Headers headers into response:

private void SetAllowCrossSiteRequestHeaders(HttpContext context)
{
  //We allow only GET method
  string requestMethod = context.Request.Headers["Access-Control-Request-Method"];
  if (!String.IsNullOrEmpty(requestMethod) && requestMethod.ToUpper() == "GET")
    context.Response.AppendHeader("Access-Control-Allow-Methods", "GET");

  //We allow any custom headers
  string requestHeaders = context.Request.Headers["Access-Control-Request-Headers"];
  if (!String.IsNullOrEmpty(requestHeaders))
    context.Response.AppendHeader("Access-Control-Allow-Headers", requestHeaders);
}

Now let's add the one which deals with Origin:

private void SetAllowCrossSiteRequestOrigin(HttpContext context)
{
  string origin = context.Request.Headers["Origin"];
  if (!String.IsNullOrEmpty(origin))
    //You can make some sophisticated checks here
    context.Response.AppendHeader("Access-Control-Allow-Origin", origin);
  else
    //This is necessary for Chrome/Safari actual request
    context.Response.AppendHeader("Access-Control-Allow-Origin", "*");
}

As you can see, the method takes the absence of Origin header in Chrome and Safari into consideration.Complete sample application can be found here, go ahead and make some use of it.

Attempting to retrieve a user's real IP address

noreply@blogger.com (Tomasz Pęczek) — Tue, 31 Aug 2010 22:36:00 +0000

Lately, I was in need of retrieving user's IP address. The first place I went looking was REMOTE_ADDR server variable. Unfortunately, due to all proxy servers out there, this variable can be pretty far from user's real IP address. After some googling I have put together a list of HTTP headers that might contain the real IP address:

CLIENT-IP
X-FORWARDED-FOR
X-FORWARDED
X-CLUSTER-CLIENT-IP
FORWARDED-FOR
FORWARDED

It's important to know, that X-FORWARDED-FOR may contain a comma+space separated list of IP addresses. Having that list in mind, we can write a simple method which will attempt to retrieve user's real IP address:

public string DetermineIP(HttpContext context)
{
  if (context.Request.ServerVariables.AllKeys.Contains("HTTP_CLIENT_IP") && CheckIP(context.Request.ServerVariables["HTTP_CLIENT_IP"]))
    return context.Request.ServerVariables["HTTP_CLIENT_IP"];

  if (context.Request.ServerVariables.AllKeys.Contains("HTTP_X_FORWARDED_FOR"))
    foreach (string ip in context.Request.ServerVariables["HTTP_X_FORWARDED_FOR"].Split(','))
      if (CheckIP(ip.Trim()))
        return ip.Trim();

  if (context.Request.ServerVariables.AllKeys.Contains("HTTP_X_FORWARDED") && CheckIP(context.Request.ServerVariables["HTTP_X_FORWARDED"]))
    return context.Request.ServerVariables["HTTP_X_FORWARDED"];

  if (context.Request.ServerVariables.AllKeys.Contains("HTTP_X_CLUSTER_CLIENT_IP") && CheckIP(context.Request.ServerVariables["HTTP_X_CLUSTER_CLIENT_IP"]))
    return context.Request.ServerVariables["HTTP_X_CLUSTER_CLIENT_IP"];

  if (context.Request.ServerVariables.AllKeys.Contains("HTTP_FORWARDED_FOR") && CheckIP(context.Request.ServerVariables["HTTP_FORWARDED_FOR"]))
    return context.Request.ServerVariables["HTTP_FORWARDED_FOR"];

  if (context.Request.ServerVariables.AllKeys.Contains("HTTP_FORWARDED") && CheckIP(context.Request.ServerVariables["HTTP_FORWARDED"]))
    return context.Request.ServerVariables["HTTP_FORWARDED"];

  return context.Request.ServerVariables["REMOTE_ADDR"];
}

So how about this CheckIP method? The purpose of this method is to ensure that IP address is both a valid IP and does not fall within a private network range:

private bool CheckIP(string ip)
{
  if (!String.IsNullOrEmpty(ip))
  {
    long ipToLong = -1;
    //Is it valid IP address
    if (TryConvertIPToLong(ip, out ipToLong))
    {
      //Does it fall within a private network range
      foreach (long[] privateIp in _privateIps)
        if ((ipToLong >= privateIp[0]) && (ipToLong <= privateIp[1]))
          return false;
        return true;
    }
    else
      return false;
  }
  else
    return false;
}

Now we are missing only two things. The first one is a method which converts IP from string to long:

private long ConvertIPToLong(string ip)
{
  string[] ipSplit = ip.Split('.');
  return (16777216 * Convert.ToInt32(ipSplit[0]) + 65536 * Convert.ToInt32(ipSplit[1]) + 256 * Convert.ToInt32(ipSplit[2]) + Convert.ToInt32(ipSplit[3])); 
}

private bool TryConvertIPToLong(string ip, out long ipToLong)
{
  try
  {
    ipToLong = ConvertIPToLong(ip);
    return true;
  }
  catch
  {
    ipToLong = -1;
    return false;
  }
}

The second thing is an array of private network IP ranges:

private long[][] _privateIps = new long[][] {
  new long[] {ConvertIPToLong("0.0.0.0"), ConvertIPToLong("2.255.255.255")},
  new long[] {ConvertIPToLong("10.0.0.0"), ConvertIPToLong("10.255.255.255")},
  new long[] {ConvertIPToLong("127.0.0.0"), ConvertIPToLong("127.255.255.255")},
  new long[] {ConvertIPToLong("169.254.0.0"), ConvertIPToLong("169.254.255.255")},
  new long[] {ConvertIPToLong("172.16.0.0"), ConvertIPToLong("172.31.255.255")},
  new long[] {ConvertIPToLong("192.0.2.0"), ConvertIPToLong("192.0.2.255")},
  new long[] {ConvertIPToLong("192.168.0.0"), ConvertIPToLong("192.168.255.255")},
  new long[] {ConvertIPToLong("255.255.255.0"), ConvertIPToLong("255.255.255.255")}
};

Now we are good to go. Please keep in mind, that this approach doesn't guarantee that you will retrieve real IP address, as all of those headers are optional.

Reporting server side operation progress with jQuery UI Progressbar

noreply@blogger.com (Tomasz Pęczek) — Thu, 15 Jul 2010 22:46:00 +0000

A colleague of mine recently had a problem with using jQuery UI Progressbar for reporting progress of asynchronous server side operations initialized via AJAX request. I decided to create a short sample for him and everybody else who might need it. I'm going to show how to do it in ASP.NET MVC and ASP.NET WebForms.
We will start with ASP.NET MVC sample. First thing to do is adding some JavaScript and CSS references:

<link href="<%= Url.Content("~/Content/jquery-ui-1.8.2.css") %>" rel="stylesheet" type="text/css" />
<script src="<%= Url.Content("~/Scripts/jquery-1.4.2.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery-ui-1.8.2.min.js") %>" type="text/javascript"></script>

Markup for Progressbar is very simple (just one div), so we will need only two lines of HTML in this sample:

<button id="operation">Operation</button>
<div id="progressbar" style="width:500px"></div>

Now some interesting stuff begins. We need two controller actions. One for triggering actual process and one for reporting progress:

/// <summary>
/// Action for triggering long running operation
/// </summary>
/// <returns></returns>
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Operation()
{
  HttpSessionStateBase session = Session;

  //Separate thread for long running operation
  ThreadPool.QueueUserWorkItem(delegate
  {
    int operationProgress;
    for (operationProgress = 0; operationProgress <= 100; operationProgress = operationProgress + 2)
    {
      session["OPERATION_PROGRESS"] = operationProgress;
      Thread.Sleep(1000);
    }
  });

  return Json(new { progress = 0 });
}

/// <summary>
/// Action for reporting operation progress
/// </summary>
/// <returns></returns>
[NoCache]
public ActionResult OperationProgress()
{
  int operationProgress = 0;

  if (Session["OPERATION_PROGRESS"] != null)
    operationProgress = (int)Session["OPERATION_PROGRESS"];

  return Json(new { progress = operationProgress }, JsonRequestBehavior.AllowGet);
}

What is missing is JavaScript, which will initialize Progressbar, trigger the operation and set timer for updating progress:

<script type="text/javascript">
  $(document).ready(function () {
    //Progressbar initialization
    $("#progressbar").progressbar({ value: 0 });
    //Button click event
    $("#operation").click(function (e) {
      //Disabling button
      $("#operation").attr('disabled', 'disabled');
      //Making sure that progress indicate 0
      $("#progressbar").progressbar('value', 0);
      //Perform POST for triggering long running operation
      $.post('<%: Url.Action("Operation") %>', function (data) {
        //Updating progress
        $("#progressbar").progressbar('value', data.progress);
        //Setting the timer
        window.progressIntervalId = window.setInterval(function () {
          //Getting current operation progress
          $.get('<%: Url.Action("OperationProgress") %>', function (data) {
            //Updating progress
            $("#progressbar").progressbar('value', data.progress);
            //If operation is complete
            if (data.progress == 100) {
              //Clear timer
              window.clearInterval(window.progressIntervalId);
              //Enable button
              $("#operation").attr('disabled', '');
            }
          });
        }, 500);
      });
    });
  });
</script>

The result looks like this:

To make it work in ASP.NET WebForms, we need two PageMethods instead of actions:

/// <summary>
/// PageMethod for triggering long running operation
/// </summary>
/// <returns></returns>
[System.Web.Services.WebMethod(EnableSession=true)]
public static object Operation()
{
  HttpSessionState session = HttpContext.Current.Session;

  //Separate thread for long running operation
  ThreadPool.QueueUserWorkItem(delegate
  {
    int operationProgress;
    for (operationProgress = 0; operationProgress <= 100; operationProgress = operationProgress + 2)
    {
      session["OPERATION_PROGRESS"] = operationProgress;
      Thread.Sleep(1000);
    }
  });

  return new { progress = 0 };
}

/// <summary>
/// PageMethod for reporting progress
/// </summary>
/// <returns></returns>
[System.Web.Services.WebMethod(EnableSession = true)]
public static object OperationProgress()
{
  int operationProgress = 0;

  if (HttpContext.Current.Session["OPERATION_PROGRESS"] != null)
    operationProgress = (int)HttpContext.Current.Session["OPERATION_PROGRESS"];

  return new { progress = operationProgress };
}

and modified JavaScript:

<script type="text/javascript">
  $(document).ready(function () {
    //Progressbar initialization
    $("#progressbar").progressbar({ value: 0 });
    //Button click event
    $("#operation").click(function (e) {
      //Disabling button
      $("#operation").attr('disabled', 'disabled');
      //Making sure that progress indicate 0
      $("#progressbar").progressbar('value', 0);
      //Call PageMethod which triggers long running operation
      PageMethods.Operation(function(result) {
        if (result) {
          //Updating progress
          $("#progressbar").progressbar('value', result.progress)
          //Setting the timer
          window.progressIntervalId = window.setInterval(function () {
            //Calling PageMethod for current progress
            PageMethods.OperationProgress(function (result) {
              //Updating progress
              $("#progressbar").progressbar('value', result.progress)
              //If operation is complete
              if (result.progress == 100) {
                //Clear timer
                window.clearInterval(window.progressIntervalId);
                //Enable button
                $("#operation").attr('disabled', '');
              }
            });
          }, 500);
        }
      });
    });
  });
</script>

The effect is pretty much the same:

The samples for ASP.NET MVC and ASP.NET WebForms can be downloaded here. Enjoy.

Glance at jEditable in ASP.NET MVC

noreply@blogger.com (Tomasz Pęczek) — Fri, 25 Jun 2010 18:01:00 +0000

Recently one of my colleagues suggested that I should take a look at Jeditable plugin. This plugin allows in place edition of XHTML elements content. I can imagine few interesting scenarios with this plugin, so I decide to put together a simple sample.
Let's start with some markup, which will represent an NorthWind employee details (you can download NorthWind database from here):

TitleOfCourtesy: <u><%: Model.TitleOfCourtesy %></u><br />
FirstName: <u><%: Model.FirstName %></u><br />
LastName: <u><%: Model.LastName %></u><br />
Title: <b class="edit" id="Title"><%: Model.Title %></b><br />
Address: <b class="edit" id="Address"><%: Model.Address %></b><br />
PostalCode: <b class="edit" id="PostalCode"><%: Model.PostalCode %></b><br />
City: <b class="edit" id="City"><%: Model.City %></b><br />
Country: <b class="edit-select" id="Country"><%: Model.Country %></b><br />
Notes: <i class="edit-area" id="Notes"><%: Model.Notes %></i><br />
<br /><br /><button id="Submit">Submit</button>

I would like to keep this sample a simple as possible, so there will be no fancy design or architecture:

fields which will be edited in standard text input are wrapped in <b> element with class 'edit'
fields which will be edited in select are wrapped in <b> element with class 'edit-select'
fields which will be edited in textarea are wrapped in <i> element with class 'edit-area'

After making that clear, we can add Jeditable functionality to those elements. First we should reference two scripts:

<script src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.jeditable.mini.js") %>" type="text/javascript"></script>

Now we can write some JavaScript:

$(document).ready(function () {
  //Standard 'text' inputs
  $('.edit').editable($.updateEmployee, {
    //Element tooltip
    tooltip: 'Click to edit...',
    //Input style
    style: 'display: inline'
  });
  //Selects
  $('.edit-select').editable($.updateEmployee, {
    //Options for select (you can use loadurl if you want to request data from server)
    data: "{'USA':'USA','UK':'UK'}",
    //Type
    type: 'select',
    //Text for accept button
    submit: 'Accept',
    //Element tooltip
    tooltip: 'Click to edit...',
    //Select style
    style: 'display: inline'
  });
  //TextAreas
  $('.edit-area').editable($.updateEmployee, {
    //Type
    type: 'textarea',
    //Text for cancel button
    cancel: 'Cancel',
    //Text for accept button
    submit: 'Accept',
    //Element tooltip
    tooltip: 'Click to edit...',
    //TextArea style
    style: 'display: inline'
  });
});

The first parameter of editable is usually an URL where browser posts edited content. In that situation, every field is being posted as soon as user finishes editing. There is also a possibility of passing function in first parameter. As you can see, I'm using second approach here. The $.updateEmployee function looks like this:

$.updateEmployee = function (value, settings) {
  //Based on the current element, we update the corresponding property of employee
  switch ($(this).attr('id')) {
    case 'Title':
      window.Employee.Title = value;
      break;
    case 'Address':
      window.Employee.Address = value;
      break;
    case 'PostalCode':
      window.Employee.PostalCode = value;
      break;
    case 'City':
      window.Employee.City = value;
      break;
    case 'Country':
      window.Employee.Country = value;
      break;
    case 'Notes':
      window.Employee.Notes = value;
      break;
  }
  //We have to return string, it will be put into element for displaying
  return (value);
}

You may wonder where the window.Employee object came from. It's being initialized like this (I know it's ugly, but it's only for sample purposes):

(function ($) {
  window.Employee = {
    EmployeeID: '<%: Model.EmployeeID %>',
    Title: '<%: Model.Title %>',
    Address: '<%: Model.Address %>',
    PostalCode: '<%: Model.PostalCode %>',
    City: '<%: Model.City %>',
    Country: '<%: Model.Country %>',
    Notes: '<%: Model.Notes %>'
  };
})(jQuery);

This object allows me to perform a single POST for all fields, when user clicks Submit button:

$('#Submit').click(function () {
  $.ajax({
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    url: '<%=Url.Action("Details", "Home") %>',
    dataType: 'json',
    data: $.toJSON(window.Employee)
  });
});

You can go ahead and click around on our editable elements:

Complete sample code can be downloaded here, enjoy.

ASP.NET 3.5, ToolkitScriptManager 3.5.40412 and Sys.Services.AuthenticationService

noreply@blogger.com (Tomasz Pęczek) — Wed, 16 Jun 2010 23:15:00 +0000

Today I have updated AjaxControlToolkit in one of my ASP.NET 3.5 projects to version 3.5.40412 (there are few important bug fixes for me in this version). If someone would just replace the reference to AjaxControlToolkit.dll (like I did) he would see following error message:

AjaxControlToolkit requires ASP.NET Ajax 4.0 scripts. Ensure the correct version of the scripts are referenced. If you are using an ASP.NET ScriptManager, switch to the ToolkitScriptManager in AjaxControlToolkit.dll.

The message is pretty clear, so I replaced ScriptManager with ToolkitScriptManager:

<AjaxToolkit:ToolkitScriptManager ID="smContent" EnablePageMethods="true" EnableScriptGlobalization="true" EnableScriptLocalization="true" runat="server">
</AjaxToolkit:ToolkitScriptManager>

After that change everything seemed to work just fine, until I decided to log in. It happens that this project is using Sys.Services.AuthenticationService for login and logout operations. Any attempt to login resulted in 'object doesn't support this property or method' message. So something must be wrong with JavaScript's emitted by manager. I made a quick comparison of scripts referenced by ScriptManager and ToolkitScriptManager. Here are the headers of interesting one:

// Name:        MicrosoftAjax.js
// Assembly:    System.Web.Extensions
// Version:     3.5.0.0
// FileVersion: 3.5.30729.196


// Name:        MicrosoftAjax.js
// Assembly:    AjaxControlToolkit
// Version:     3.5.40412.0
// FileVersion: 3.5.40412.2

The MicrosoftAjax.js referenced by ToolkitScriptManager has a lot less content than the one referenced by ScriptManager. Judging by the first error message, this script should be the one from ASP.NET AJAX 4.0 scripts. If that's the case, lets take a look at Microsoft AJAX CDN for ASP.NET AJAX 3.5 and ASP.NET AJAX 4.0. As you can see, in ASP.NET AJAX 4.0 Microsoft has split MicrosoftAjax.js in a lot of smaller files. The one we need is MicrosoftAjaxApplicationServices.js, let's download it and add to ToolkitScriptManager scripts:

<AjaxToolkit:ToolkitScriptManager ID="smContent" EnablePageMethods="true" EnableScriptGlobalization="true" EnableScriptLocalization="true" runat="server">
  <Scripts>
    <asp:ScriptReference Path="~/Scripts/MicrosoftAjaxApplicationServices.js" />
  </Scripts>
</AjaxToolkit:ToolkitScriptManager>

Unfortunately this still doesn't work. The reason is that inline script, which sets default path for service, is executed before the script we have just added. We need to set the path for the service ourselves:

<script type="text/javascript">
  Sys.Application.add_init(function() { Sys.Services.AuthenticationService.set_path('<%= ResolveClientUrl("~/Authentication_JSON_AppService.axd") %>'); });
</script>

Now it will work. I hope that this will be helpful for people who will encounter similar problem.

Partial forms validation in ASP.NET MVC 2 (something like WebForms ValidationGroup)

noreply@blogger.com (Tomasz Pęczek) — Mon, 07 Jun 2010 12:19:00 +0000

In one of my recent ASP.NET MVC 2 projects I had to make a form divided into few tabs. Each tab had to be validated before user can move to next one. Unfortunately ASP.NET MVC 2 built in validation doesn't provide mechanism for this. Well we are developers, so if there is no built in mechanism, we should create our own. First lets create a ValidationAttribute, which will be used to add information about validation group:

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
public class ValidationGroupAttribute : ValidationAttribute
{
  #region Properties
  /// <summary>
  /// Name of the validation group
  /// </summary>
  public string GroupName { get; set; }
  #endregion

  #region Constructor
  public ValidationGroupAttribute(string groupName)
  {
    GroupName = groupName;
  }
  #endregion

  #region Methods
  public override bool IsValid(object value)
  {
    //No validation logic, always return true
    return true;
  }
  #endregion
}

We will also need a DataAnnotationsModelValidator for this attribute:

public class ValidationGroupValidator : DataAnnotationsModelValidator<ValidationGroupAttribute>
{
  #region Fields
  string _groupName;
  #endregion

  #region Constructor
  public ValidationGroupValidator(ModelMetadata metadata, ControllerContext context, ValidationGroupAttribute attribute)
: base(metadata, context, attribute) 
  {
    _groupName = attribute.GroupName;
  }
  #endregion

  #region Methods
  public override IEnumerable<ModelClientValidationRule> GetClientValidationRules()
  {
    //Add informations about validation group to metadata
    var validatioRule = new ModelClientValidationRule
    {
      ErrorMessage = String.Empty,
      ValidationType = "validationGroup"
    };
    validatioRule.ValidationParameters.Add("groupName", _groupName);

    return new[] { validatioRule };
  }
  #endregion
}

Don't forget to register above classes in your Global.asax:

DataAnnotationsModelValidatorProvider.RegisterAdapter(typeof(ValidationGroupAttribute), typeof(ValidationGroupValidator));

So this is all we need on server side (please remember, that we don't want to achieve any server side logic, only partial validation on client side before posting the whole form). To make it work on client side, first we need to modify Sys.Mvc.FormContext._parseJsonOptions in MicrosoftMvcValidation.debug.js (or corresponding part in MicrosoftMvcValidation.js):

Sys.Mvc.FormContext._parseJsonOptions = function Sys_Mvc_FormContext$_parseJsonOptions(options) {
  var formElement = $get(options.FormId);
  var validationSummaryElement = (!Sys.Mvc._validationUtil.stringIsNullOrEmpty(options.ValidationSummaryId)) ? $get(options.ValidationSummaryId) : null;
  var formContext = new Sys.Mvc.FormContext(formElement, validationSummaryElement);
  formContext.enableDynamicValidation();
  formContext.replaceValidationSummary = options.ReplaceValidationSummary;
  for (var i = 0; i < options.Fields.length; i++) {
    var field = options.Fields[i];
    var fieldElements = Sys.Mvc.FormContext._getFormElementsWithName(formElement, field.FieldName);
    var validationMessageElement = (!Sys.Mvc._validationUtil.stringIsNullOrEmpty(field.ValidationMessageId)) ? $get(field.ValidationMessageId) : null;
    var fieldContext = new Sys.Mvc.FieldContext(formContext);
    Array.addRange(fieldContext.elements, fieldElements);
    fieldContext.validationMessageElement = validationMessageElement;
    fieldContext.replaceValidationMessageContents = field.ReplaceValidationMessageContents;
    for (var j = 0; j < field.ValidationRules.length; j++) {
      var rule = field.ValidationRules[j];
      //Here goes our small modification
      if (rule.ValidationType == 'validationGroup') {
        fieldContext.validationGroup = rule.ValidationParameters['groupName'];
      }
      else {
        var validator = Sys.Mvc.ValidatorRegistry.getValidator(rule);
        if (validator) {
          var validation = Sys.Mvc.$create_Validation();
          validation.fieldErrorMessage = rule.ErrorMessage;
          validation.validator = validator;
          Array.add(fieldContext.validations, validation);
        }
      }
    }
    fieldContext.enableDynamicValidation();
    Array.add(formContext.fields, fieldContext);
  }
  var registeredValidatorCallbacks = formElement.validationCallbacks;
  if (!registeredValidatorCallbacks) {
    registeredValidatorCallbacks = [];
    formElement.validationCallbacks = registeredValidatorCallbacks;
  }
  registeredValidatorCallbacks.push(Function.createDelegate(null, function () {
    return Sys.Mvc._validationUtil.arrayIsNullOrEmpty(formContext.validate('submit'));
  }));
  return formContext;
}

Now we can write ourselves function, which will perform partial validation based on group name:

Sys.Mvc.FormContext.validateGroup = function Sys_Mvc_FormContext$validateGroup(formId, groupName) {
  //Get form element
  var formElement = $get(formId);
  //Get form context
  var formContext = Sys.Mvc.FormContext.getValidationForForm(formElement);
  //Get form fields
  var fields = formContext.fields;
  //Array for errors
  var errors = [];
  //For each field
  for (var i = 0; i < fields.length; i++) {
    var field = fields[i];
    //If field has validation group and its name matches the one we are looking for
    if (field.validationGroup && field.validationGroup == groupName) {
      //Validate field
      var fieldErrors = field.validate('submit');
      if (fieldErrors) {
        Array.addRange(errors, fieldErrors);
      }
    }
  }
  //Return true it there are no errors, otherwise false
  return (!errors || !errors.length);
}

And our job is done. Now we can call Sys.Mvc.FormContext.validateGroup('formId', 'validationGroup'); whenever we want to perform partial validation. I have created a sample application which make use of those modification, you can download it from my repository. If there is a need for same modification for jQuery validation, let me know and I will look into it.

Using AntiForgeryToken with other verbs than POST (and ActionLinks)

noreply@blogger.com (Tomasz Pęczek) — Fri, 28 May 2010 15:34:00 +0000

Today I have found this question on forums.asp.net and decided to take a look at it. I must warn you, the solution might be considered a little bit hacky.
So for starters, we have an ActionLink which looks like this:

<%= Ajax.ActionLink("Delete", "AjaxDeleteItem", new { ItemId = item.ItemId }, new AjaxOptions { Confirm = "Are you sure you want to delete the item?", HttpMethod = "Delete", UpdateTargetId = "divList"}) %>

and we want to secure this Delete action with AntiForgeryToken. First we need to add AntiForgeryToken helper to the view:

<%= Html.AntiForgeryToken() %>

Now let's modify our ActionLink:

<%= Ajax.ActionLink("Delete", "AjaxDeleteItem", new { ItemId = item.ItemId, __RequestVerificationToken = "_" }, new AjaxOptions { Confirm = "Are you sure you want to delete the item?", HttpMethod = "Delete", UpdateTargetId = "divList" })%>

Here comes the hacky part. We will use this additional route value (__RequestVerificationToken = "_") as a placeholder to inject the value of our AntiForgeryToken into links href with a little help of jQuery:

$(document).ready(function () {
  //Finding AntiForgeryToken input
  var antiForgeryToken = $('input[name=__RequestVerificationToken]');
  if (antiForgeryToken.length > 0) {
    //Serializing AntiForgeryToken
    var antiForgeryTokenSerialized = antiForgeryToken.serialize();
    //For each anchor in page
    $('a').each(function (index, element) {
      //Replace placeholder with serialized AntiForgeryToken
      $(element).attr('href', $(element).attr('href').replace('__RequestVerificationToken=_', antiForgeryTokenSerialized));
    });
  }
});

Our job on client side is done, all the links which had our placeholder in their href now have AntiForgeryToken. We should now add token verification to the controller action:

[AcceptVerbs(HttpVerbs.Delete)]
[ValidateAntiForgeryToken]
public ActionResult AjaxDeleteItem(string ItemId)
{
  ...
}

If you would run the code now, you would see that it's not working. That's because AntiForgeryToken is designed for POST requests and it expects the token in Request.Form collection. To work around this we will modify the following line of OnAuthorization method in ValidateAntiForgeryTokenAttribute class:

string formValue = filterContext.HttpContext.Request.Form[fieldName];

to this:

HttpVerbs verb;
//Parse HttpVerb from Request.GetHttpMethodOverride()
if (!Enum.TryParse<HttpVerbs>(filterContext.HttpContext.Request.GetHttpMethodOverride(), true, out verb))
  //If method couldn't be parsed, assume POST
  verb = HttpVerbs.Post;

//Extract token based on HttpVerb
string formValue = String.Empty;
if (verb == HttpVerbs.Post || verb == HttpVerbs.Put)
  formValue = filterContext.HttpContext.Request.Form[fieldName];
else
  formValue = filterContext.HttpContext.Request.Params[fieldName];

After that small change, this workaround works the way we wanted to. The code was tested only in few simple testcases, so it migth contain some flaws.

jQuery Autocomplete in ASP.NET MVC

noreply@blogger.com (Tomasz Pęczek) — Mon, 24 May 2010 00:11:00 +0000

This time I'm going to write about using jQuery Autocomplete plugin in ASP.NET MVC. If we want to use the plugin, we should reference following JavaScript and CSS:

<link href="<%= Url.Content("~/Content/jquery.autocomplete.css") %>" rel="stylesheet" type="text/css" />
<script src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.autocomplete.min.js") %>" type="text/javascript"></script>

We will start by creating simple autocomplete with static data (below JavaScript assumes that there is already a input with type text and id region):

//Static data for autocomplete
var regions = ['Eastern', 'Western', 'Northern', 'Southern'];

$(document).ready(function () {
  //Adding autocomplete to region input
  $("#region").autocomplete(regions, {
    //Minimum number of characters a user has to type before the autocompleter activates
    minChars: 0,
    //The number of items in the select box
    max: 4,
    //Fill the input while still selecting a value
    autoFill: true,
    //Only suggested values are valid
    mustMatch: true,
    //The comparison doesn't looks inside 
    matchContains: false
  });
});

Now we will extend regions so it contains objects with regionId and regionDescription properties. We want to display the regionDescription in autocomplete and put selected regionId into input of type hidden. To achieve this, we will use autocomplete callbacks for formatting data and result. But first let's change markup:

<%: Html.Hidden("regionId", -1) %>
<label for="regionDescription">Region:</label> <%: Html.TextBox("regionDescription")%>

And here is modified JavaScript:

//Static data for autocomplete
var regions = [
  { regionId: 1, regionDescription: 'Eastern' },
  { regionId: 2, regionDescription: 'Western' },
  { regionId: 3, regionDescription: 'Northern' },
  { regionId: 4, regionDescription: 'Southern' }
];

$(document).ready(function () {
  //Adding autocomplete to region input
  $("#regionDescription").autocomplete(regions, {
    //Minimum number of characters a user has to type before the autocompleter activates
    minChars: 0,
    //The number of items in the select box
    max: 4,
    //Fill the input while still selecting a value
    autoFill: true,
    //Only suggested values are valid
    mustMatch: true,
    //The comparison doesn't looks inside 
    matchContains: false,
    //Callback which will format items for autocomplete list
    formatItem: function (data, index, max) {
      //Display only descriptions in list
      return data.regionDescription;
    },
    //Callback which will format items for matching
    formatMatch: function (data, index, max) {
      //Match only descriptions
      return data.regionDescription;
    },
    //Callback which will format result
    formatResult: function (data, index, max) {
      //Display only description as result
      return data.regionDescription;
    }
  //Callback which will be called when user chooses value
  }).result(function (event, data, formatted) {
    //Set region id as hidden input value
    if (data)
      $("#regionId").val(data.regionId);
    else
      $("#regionId").val('-1');
  });
});

What if we want to achieve the same behavior, but with remotely loaded data? We should start by adding markup for new inputs:

<%: Html.Hidden("territoryId", -1)%>
<label for="territoryDescription">Territory:</label> <%: Html.TextBox("territoryDescription")%>

The JavaScript isn't that much different, we just need to pass URL instead of array with data (you can also adjust local cache size):

//Adding autocomplete to territoryDescription input
$("#territoryDescription").autocomplete('<%: Url.Action("Territories", "Home") %>', {
  //Don't fill the input while still selecting a value
  autoFill: false,
  //Only suggested values are valid
  mustMatch: true,
  //The comparison doesn't looks inside 
  matchContains: false,
  //The number of query results to store in cache
  cacheLength: 12,
  //Callback wich will format items for autocomplete list
  formatItem: function (data, index, max) {
    //Display only descriptions in list
    return data[1];
  },
  //Callback which will format items for matching
  formatMatch: function (data, index, max) {
    //Match only descriptions
    return data[1];
  },
  //Callback which will format result
  formatResult: function (data, index, max) {
    //Display only description as result
    return data[1];
  }
//Callback which will be called when user chooses value
}).result(function (event, data, formatted) {
  //Set territory id as hidden input value
  if (data)
    $("#territoryId").val(data[0]);
  else
    $("#territoryId").val('-1');
});

Controller action will receive three parameters: q - the string we should search for, limit - maximum number of items we should return (equal to max option) and timestamp. The plugin is expecting quite unusual response. It should be a string, where '\n' is a row delimeter and '|' is cells separator. So the action will look like this (I will skip database access code):

public ContentResult Territories(string q, int limit, Int64 timestamp)
{
  StringBuilder responseContentBuilder = new StringBuilder();
  IQueryable<Territory> territories = _repository.GetTerritories(q, limit);
  foreach (Territory territory in territories)
    responseContentBuilder.Append(String.Format("{0}|{1}\n", territory.TerritoryID, territory.TerritoryDescription));

  return Content(responseContentBuilder.ToString());
}

So our autocomplete is now populated from server. Lets take it one step further, and make territory dependant on region. We will use extraParams for this:

//Adding autocomplete to territoryDescription input
$("#territoryDescription").autocomplete('<%: Url.Action("Territories", "Home") %>', {
  //Don't fill the input while still selecting a value
  autoFill: false,
  //Only suggested values are valid
  mustMatch: true,
  //The comparison doesn't looks inside 
  matchContains: false,
  //The number of query results to store in cache
  cacheLength: 12,
  //Extra parameters which will be put into query string
  extraParams: {
    regionId: function () { return $("#regionId").val(); }
  },
  //Callback which will format items for autocomplete list
  formatItem: function (data, index, max) {
  //Display only descriptions in list
    return data[1];
  },
  //Callback which will format items for matching
  formatMatch: function (data, index, max) {
    //Match only descriptions
    return data[1];
  },
  //Callback which will format result
  formatResult: function (data, index, max) {
    //Display only description as result
    return data[1];
  }
//Callback which will be called when user chooses value
}).result(function (event, data, formatted) {
  //Set territory id as hidden input value
  if (data)
    $("#territoryId").val(data[0]);
  else
    $("#territoryId").val('-1')
});

After that change we will receive on more parameter in our action:

public ContentResult Territories(string q, int regionId, int limit, Int64 timestamp)
{
  StringBuilder responseContentBuilder = new StringBuilder();
  IQueryable<Territory> territories = _repository.GetTerritories(regionId, q, limit);
  foreach (Territory territory in territories)
    responseContentBuilder.Append(String.Format("{0}|{1}\n", territory.TerritoryID, territory.TerritoryDescription));

  return Content(responseContentBuilder.ToString());
}

This way we have finished our simple sample. There are few more interesting options in this plugin (for example you can attach it to textarea and/or allow multiply selection). Our sample application looks like this:

You can download source code from here.

Asynchronous TreeView in ASP.NET WebForms

noreply@blogger.com (Tomasz Pęczek) — Sun, 16 May 2010 19:18:00 +0000

Some time ago I have written about using jQuery TreeView plugin for creating an asynchronous TreeView in ASP.NET MVC. Recently I had to use the same plugin in WebForms application, so I decided to share my experience. First let's reference all JavaScript and CSS needed:

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.treeview.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.treeview.async.js" type="text/javascript"></script>
<link href="~/Styles/jquery.treeview.css" rel="stylesheet" type="text/css" />

We should also add the markup for TreeView (an empty list):

<ul id="trFileBrowser"></ul>

Now we should provide data for TreeView, there are generally two approaches in which we can do that.

WebService approach

If we want to use WebService as the data source, we should start by adding an Ajax-enabled WCF Service to the project:

[ServiceContract(Namespace = "AsyncTreeViewExample")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class TreeView
{
  ...
}

and enabling the Web programming model for this service (in web.config):


...
<system.serviceModel>
  <behaviors>
    <endpointBehaviors>
      <behavior name="AsyncTreeViewExample.TreeViewAspNetAjaxBehavior">
        <webHttp />
      </behavior>
    </endpointBehaviors>
  </behaviors>
  <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
  <services>
    <service name="AsyncTreeViewExample.TreeView">
      <endpoint address="" behaviorConfiguration="AsyncTreeViewExample.TreeViewAspNetAjaxBehavior" binding="webHttpBinding" contract="AsyncTreeViewExample.TreeView" />
    </service>
  </services>
</system.serviceModel>
...

In order to write WebService method properly, we need to remember that plugin performs GET request with application/x-www-form-urlencoded content type and expects bare JSON serialized array in response. Knowing all that, the method should look like this (TreeViewNode class was described in previous post about this plugin):


[OperationContract]
//Accept GET request and return bare JSON serialized result
[WebInvoke(Method = "GET", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)]
public List<TreeViewNode> FileBrowserData(string root)
{
  DirectoryInfo rootDirectory = null;
  if (root == "source")
    rootDirectory = new DirectoryInfo(@"E:\");
  else
    rootDirectory = new DirectoryInfo(root);
  
  var directoryChildren = from child in rootDirectory.GetFileSystemInfos()
                          orderby child is DirectoryInfo descending
                          select child;

  List<TreeViewNode> nodes = new List<TreeViewNode>();
  foreach (FileSystemInfo directoryChild in directoryChildren)
  {
    bool isDirectory = directoryChild is DirectoryInfo;
    nodes.Add(new TreeViewNode()
    {
      id = directoryChild.FullName,
      text = directoryChild.Name,
      classes = isDirectory ? "folder" : "file",
      hasChildren = isDirectory
    });
  }

  return nodes;
}

Last thing to do in this approach is adding some JavaScript for initialization purposes:

<script type="text/javascript">
  $(document).ready(function () {
    $('#trFileBrowser').treeview({
      url: '<% = ResolveClientUrl("~/TreeView.svc/FileBrowserData") %>'
    });
  });
</script>

PageMethod approach

Using PageMethod as a source of data is a little bit more tricky. First of all PageMethods requires request to have application/json content type (so all the parameters have to be properly JSON serialized). Also PageMethod always returns response with wrapped body. There are three ways in which we can workaround this.
First way is to modify the plugin in such a way that it will work with PageMethod requirements (I would recommend this way, as others should be considered nasty workarounds). This is modified load funtion from jquery.treeview.async.js (I'm also changing request from GET to POST here):

function load(settings, root, child, container) {
  $.ajax({
    //Changing request to POST
    type: "POST",
    url: settings.url,
    //Required content type
    contentType: 'application/json; charset=utf-8',
    //Properly JSON serialized data
    data: '{"root": "' + root + '"}',
    dataType: 'json',
    success: function(response) {
      function createNode(parent) {
        var current = $("<li/>").attr("id", this.id || "").html("<span>" + this.text + "</span>").appendTo(parent);
        if (this.classes) {
          current.children("span").addClass(this.classes);
        }
        if (this.expanded) {
          current.addClass("open");
        }
        if (this.hasChildren || this.children && this.children.length) {
          var branch = $("<ul/>").appendTo(current);
          if (this.hasChildren) {
            current.addClass("hasChildren");
            createNode.call({
              text:"placeholder",
              id:"placeholder",
              children:[]
              }, branch);
          }
          if (this.children && this.children.length) {
            $.each(this.children, createNode, [branch])
          }
        }
      }
      //Accessing wrapped array
      $.each(response.d, createNode, [child]);
      $(container).treeview({add: child});
    }
  });
}

After that we just need a regular PageMethod:

[System.Web.Services.WebMethod]
public static List<TreeViewNode> FileBrowserData(string root)
{
  //Method body is the same as in WebService
  ...
}

and initalization JavaScript:

<script type="text/javascript">
  $(document).ready(function () {
    $('#trFileBrowser').treeview({
      url: '<% = ResolveClientUrl("~/PageMethodPlugin.aspx/FileBrowserData") %>'
    });
  });
</script>

Second way we can call a 'client-side workaround'. The idea is to change some default settings for all Ajax requests (it's nasty and I wouldn't recommend using it):


<script type="text/javascript">
  $(document).ready(function () {
    //Default callback for creating the XMLHttpRequest object
    var xhr = $.ajaxSettings.xhr;

    //Changing default values for all Ajax requests
    $.ajaxSetup({
      //Required content type
      contentType: 'application/json; charset=utf-8',
      //New callback for creating the XMLHttpRequest object
      xhr: function () {
        //Wrapping url parameters with '"'
        if (this.url.indexOf('=') >= 0) {
          this.url = this.url.replace(/=/g, '="') + '"';
        }
        //Calling default callback
        return xhr.call(this);
      },
      //Sanitize the response (remove wrapping)
      dataFilter: function (data, dataType) {
        if (dataType == "json") {
          var result = $.parseJSON(data);
          if (result.d) {
            return result.d;
          } else {
            return data;
          }
        } else {
          return data;
        }
      }
    });
    $('#trFileBrowser').treeview({
      url: '<% = ResolveClientUrl("~/PageMethodClient.aspx/FileBrowserData") %>'
    });
  });
</script>

We also have to allow GET verb on PageMethod:


[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod(UseHttpGet = true)]
public static List<TreeViewNode> FileBrowserData(string root)
{
  //Method body is the same as in WebService
  ...
}

Third way is 'server-side workaround'. We will write PageMethod in a little bit different way, so it will work with TreeView:

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod(UseHttpGet = true)]
//Method doesn't take any parameters and return anything
public static void FileBrowserData()
{
  //We are getting 'root' directly from request params
  string root = HttpContext.Current.Request.Params.Get("root");

  //Nodes generation code is the same as in other cases
  ...

  //We are serializing nodes
  JavaScriptSerializer serializer = new JavaScriptSerializer();
  string nodesSerialized = serializer.Serialize(nodes);

  //And writing them directly into response
  HttpContext.Current.Response.Clear();
  HttpContext.Current.Response.ContentType = "application/json; charset=utf-8";
  HttpContext.Current.Response.AddHeader("Content-Length", nodesSerialized.Length.ToString());
  HttpContext.Current.Response.AddHeader("Connection", "Close");
  HttpContext.Current.Response.Write(nodesSerialized);
  HttpContext.Current.Response.Flush();
}

What is left is few lines of JavaScript:

<script type="text/javascript">
  $(document).ready(function () {
    //Changing default values for all Ajax requests
    $.ajaxSetup({
      //Required content type
      contentType: 'application/json; charset=utf-8'
    });
    $('#trFileBrowser').treeview({
      url: '<% = ResolveClientUrl("~/PageMethodClient.aspx/FileBrowserData") %>'
    });
  });
</script>

Now we have all approaches covered, the result of this work looks like this:

You can download source code from repository.

Making ASP.NET MVC 2 client side validation work with AJAX loaded forms

noreply@blogger.com (Tomasz Pęczek) — Thu, 29 Apr 2010 22:13:00 +0000

Few days ago I wrote a post in this thread on forums.asp.net. In one of the posts vazavi noticed, that client side validation works only until you reload form using AJAX. I decided to take a deeper look at this. After few hours I have found a solution. The solution depends on which client side validation script you are using (the one which works with jQuery or the one which not). First I will go with the one which doesn't use jQuery. To make it work we need to write one function (I have just added it to MicrosoftMvcValidation.js):

Sys.Mvc.FormContext.OnSuccessEnableClientValidation = function (ajaxContext) {
  //Getting the update target container
  var updateTarget = document.getElementById(ajaxContext.$4.id);
  //Getting all script elements in it (script elements injected with innerHtml are not executed)
  var mvcClientValidationMetadataOldScripts = updateTarget.getElementsByTagName('script');
  var mvcClientValidationMetadataNewScripts = [];
  //For every script element
  while (mvcClientValidationMetadataOldScripts.length > 0) {
    //Create a new one
    var mvcClientValidationMetadataNewScript = document.createElement('script');
    mvcClientValidationMetadataNewScript.type = 'text/javascript';
    mvcClientValidationMetadataNewScript.text = mvcClientValidationMetadataOldScripts[0].text;
    //Add it to collection
    mvcClientValidationMetadataNewScripts.push(mvcClientValidationMetadataNewScript);
    //And remove old one
    updateTarget.removeChild(mvcClientValidationMetadataOldScripts[0]);
  }
  //For every new script element
  while (mvcClientValidationMetadataNewScripts.length > 0) {
    //Append it to update target container, this way they will be executed and generate needed metadata
    updateTarget.appendChild(mvcClientValidationMetadataNewScripts.pop());
  }
  //Calling Microsoft validation initialization for new metadata
  Sys.Mvc.FormContext._Application_Load();
}

Now we can use our new function as OnSuccess handler for Ajax.BeginForm:

<% Html.EnableClientValidation(); %>
<% using (Ajax.BeginForm("...", "...", null, new AjaxOptions() { UpdateTargetId = "...", OnSuccess = "Sys.Mvc.FormContext.OnSuccessEnableClientValidation" }, new { id = "..." })) { %>
  ...
<% } %>

Now it should work. Let's do the same for MicrosoftMvcJQueryValidation.js. We will add the following function inside of it:

function __MVC_OnSuccessEnableClientValidation(ajaxContext) {
  //Getting the update target container
  var updateTarget = document.getElementById(ajaxContext.$4.id);
  //Getting all script elements in it (script elements injected with innerHtml are not executed)
  var mvcClientValidationMetadataOldScripts = updateTarget.getElementsByTagName('script');
  var mvcClientValidationMetadataNewScripts = [];
  //For every script element
  while (mvcClientValidationMetadataOldScripts.length > 0) {
    //Create a new one
    var mvcClientValidationMetadataNewScript = document.createElement('script');
    mvcClientValidationMetadataNewScript.type = 'text/javascript';
    mvcClientValidationMetadataNewScript.text = mvcClientValidationMetadataOldScripts[0].text;
    //Add it to collection
    mvcClientValidationMetadataNewScripts.push(mvcClientValidationMetadataNewScript);
    //And remove old one
    updateTarget.removeChild(mvcClientValidationMetadataOldScripts[0]);
  }
  //For every new script element
  while (mvcClientValidationMetadataNewScripts.length > 0) {
    //Append it to update target container, this way they will be executed and generate needed metadata
    updateTarget.appendChild(mvcClientValidationMetadataNewScripts.pop());
  }
  //Getting new metadata
  var allFormOptions = window.mvcClientValidationMetadata;
  if (allFormOptions) {
    //For every form in metadata
    while (allFormOptions.length > 0) {
      //Enable validation for form based on metadata
      var thisFormOptions = allFormOptions.pop();
      __MVC_EnableClientValidation(thisFormOptions);
    }
  }
}

We can use this function in the same way as previous one:

<% Html.EnableClientValidation(); %>
<% using (Ajax.BeginForm("...", "...", null, new AjaxOptions() { UpdateTargetId = "...", OnSuccess = "__MVC_OnSuccessEnableClientValidation" }, new { id = "..." })) { %>
  ...
<% } %>

I can't say that this solution has been tested in every possible scenario, so if you find any problems with it, just let me know.

'Unobtrusive' asynchronous Form in ASP.NET MVC 2

noreply@blogger.com (Tomasz Pęczek) — Sun, 18 Apr 2010 17:56:00 +0000

Some time ago I have written a post about creating asynchronous form with client-side validation in ASP.NET MVC. Since then few things have been changed. Now we have ASP.NET MVC 2 with built in client-side validation. So it's time to rewrite that sample (but we are still going to use jQuery Validation plugin).
First let's remove all the javascript from our view, and leave only those script references:

<script src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcJQueryValidation.js") %>" type="text/javascript"></script>

Now we will move our form to user control and make some changes in it:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<...>" %>
<% Html.EnableClientValidation(); %>
<% if (Model.UserRegistered) { %>
  User successfully registered.
<% } else { %>
  <% using (Ajax.BeginForm("AsynchronousForm", "Home", null, new AjaxOptions() { UpdateTargetId = "dvAccountInformationFormContainer" }, new { id = "frmRegister" })) { %>
    <%= Html.AntiForgeryToken() %>
    <div>
      <fieldset>
        <legend>Account Information</legend>
        <p>
          <%= Html.LabelFor(value => Model.UserName) %>
          <%= Html.TextBoxFor(value => Model.UserName) %>
          <%= Html.ValidationMessageFor(value => Model.UserName) %>
        </p>
        <p>
          <%= Html.LabelFor(value => Model.Email) %>
          <%= Html.TextBoxFor(value => Model.Email) %>
          <%= Html.ValidationMessageFor(value => Model.Email) %>
        </p>
        <p>
          <%= Html.LabelFor(value => Model.Password) %>
          <%= Html.TextBoxFor(value => Model.Password) %>
          <%= Html.ValidationMessageFor(value => Model.Password) %>
        </p>
        <p>
          <%= Html.LabelFor(value => Model.ConfirmPassword) %>
          <%= Html.TextBoxFor(value => Model.ConfirmPassword) %>
          <%= Html.ValidationMessageFor(value => Model.ConfirmPassword) %>
        </p>
        <p>
          <input type="submit" value="Register" />
        </p>
      </fieldset>
    </div>
  <% } %>
</div>

As you can see I have added Html.EnableClientValidation(); to the markup - this will enable native client-side validation. I have also changed Html.BeginForm into Ajax.BeginForm - we can use it now without any problems. Another important change you should notice is usage of new strongly typed helpers.
We now should adjust the view markup to use our user control:

<div id="dvAccountInformationFormContainer">
<% Html.RenderPartial("~/Views/Home/AccountInformationForm.ascx", Model); %>
</div>

Next thing is to modify our controller actions:

/// <summary>
/// GET Home/AsynchronousForm
/// </summary>
/// <returns>AsynchronousForm view</returns>
public ViewResult AsynchronousForm()
{
  return View(new AsynchronousFormViewModel());
}

/// <summary>
/// POST Home/AsynchronousForm
/// </summary>
/// <param name="viewModel">The form post data</param>
/// <param name="isAjaxRequest">Value indicating if it is an AJAX request</param>
/// <returns>AsynchronousForm view or json result</returns>
[AcceptVerbs(HttpVerbs.Post)]
[ValidateAntiForgeryToken]
[IsAjaxRequest("isAjaxRequest")]
public ActionResult AsynchronousForm(AsynchronousFormViewModel viewModel, bool isAjaxRequest)
{
  if (ModelState.IsValid)
  {
    try
    {
      _usersRepository.RegisterUser(viewModel.UserName, viewModel.Email, viewModel.Password);
      viewModel = new AsynchronousFormViewModel() { UserRegistered = true };
    }
    catch (Exception ex)
    {
      ModelState.AddModelError("_FORM", ex.Message);
    }
  }

  if (isAjaxRequest)
    return PartialView("AccountInformationForm", viewModel);
  else
    return View(viewModel);
}

/// <summary>
/// Validates username
/// </summary>
/// <param name="UserName">The username</param>
/// <returns>true or false</returns>
public JsonResult ValidateUserName(string UserName)
{
  return Json(_usersRepository.ValidateUserNameUnique(UserName), JsonRequestBehavior.AllowGet);
}

/// <summary>
/// Validates password
/// </summary>
/// <param name="Password">The password</param>
/// <returns>true or error message</returns>
public JsonResult ValidatePassword(string Password)
{
  string passwordInvalidMessage = _usersRepository.ValidatePassword(Password);
  if (String.IsNullOrEmpty(passwordInvalidMessage))
    return Json(true, JsonRequestBehavior.AllowGet);
  else
    return Json(passwordInvalidMessage, JsonRequestBehavior.AllowGet);
}

Most of changes are in action responsible for handling Post request - it should now return markup which will be injected in our page using script generated by Ajax.BeginForm. We also had to add JsonRequestBehavior.AllowGet to JsonResult because of changes in ASP.NET MVC 2 (by default JsonResult is allowed only for Post request).
Now it's time for key changes. We will remove IDataErrorInfo interface from ViewModel class and add DataAnnotations. The problem is, that by default we have only four rules: Required, Range, StringLength and RegularExpression. In our sample we can only use Required (I will also use DisplayName attribute for labels) and for the rest of rules we have to write our own attributes.
Let's go step by step through implementing a DataAnnotation attribute for minlength rule and making it work on client-side. First, we need to create an attribute delivered from ValidationAttribute:

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
public class MinLengthAttribute : ValidationAttribute
{
  #region Properties
  public int MinLength { get; set; }
  #endregion

  #region Constructor
  public MinLengthAttribute(int minLength)
  {
    MinLength = minLength;
  }
  #endregion

  #region Methods
  public override bool IsValid(object value)
  {
    if (value == null)
      return true;

    if ((value as String).Length < MinLength)
      return false;

    return true;
  }
  #endregion
}

The implementation is pretty straightforward and doesn't require any sophisticated comments. This is all we need to make it work on server-side, now let's make it work on client-side. We need to prepare a validator class (in this case it will be class delivered from DataAnnotationsModelValidator<TAttribute>):

public class MinLengthValidator : DataAnnotationsModelValidator<MinLengthAttribute>
{
  #region Fields
  int _minLength;
  string _errorMessage;
  #endregion

  #region Constructor
  public MinLengthValidator(ModelMetadata metadata, ControllerContext context, MinLengthAttribute attribute)
    : base(metadata, context, attribute)
  {
    _minLength = attribute.MinLength;
    _errorMessage = attribute.ErrorMessage;
  }
  #endregion

  #region Methods
  public override IEnumerable<ModelClientValidationRule> GetClientValidationRules()
  {
    var validatioRule = new ModelClientValidationRule
    {
      ErrorMessage = _errorMessage,
      ValidationType = "minlength"
    };
    validatioRule.ValidationParameters.Add("length", _minLength);

    return new[] { validatioRule };
  }
  #endregion
}

The most important method here is GetCleintValidationRules, it will be used for generating metadata which will be injected into the client script. Now, we have to register the validator with ASP.NET MVC 2 engine (preferably in Global.asax:

DataAnnotationsModelValidatorProvider.RegisterAdapter(typeof(MinLengthAttribute), typeof(MinLengthValidator));

We also have to modify MicrosoftMvcJQueryValidation.js in two places. First, we should add following function:

function __MVC_ApplyValidator_MinLength(object, length) {
object["minlength"] = length;
}

Then modify __MVC_CreateRulesForField function by extending switch statement inside of it:

switch (thisRule.ValidationType) {
  ...

  case "minlength":
    __MVC_ApplyValidator_MinLength(rulesObj,
      thisRule.ValidationParameters["length"]);
      break;

  ...
}

Following those steps we can implement attributes and validators for all needed rules. You can find here final source code of those used in sample.
You should take special interest in EqualToAttribute. ASP.NET MVC 2 has been built for .Net Framework 3.5, because of that there is no access to context in ValidatorAttribute. This is why cross properties check can't be done on property level, but has to be done on class level. On the other hand, class level attributes doesn't generate client-side validation. This is why this attribute must be placed on class and property to make it work on client and server side (nasty workaround but it is necessary).
When all the DataAnnotations attributes are finished, we can finally change our ViewModel:

[EqualTo("Password", "ConfirmPassword", typeof(AsynchronousFormViewModel), ErrorMessage = "Confirm password does not match password")]
public class AsynchronousFormViewModel
{
  #region Properties
  [DisplayName("Username:")]
  [Required(ErrorMessage = "Please enter username")]
  [MinLength(5, ErrorMessage = "Please enter username with at least 5 characters")]
  [Remote("ValidateUserName", "Home", typeof(DummyUsersRepository), "ValidateUserNameUnique", ErrorMessage = "Username is already in use")]
  public string UserName { get; set; }

  [DisplayName("Email:")]
  [Required(ErrorMessage = "Please enter email address")]
  [Email(ErrorMessage = "Please enter valid email address")]
  public string Email { get; set; }

  [DisplayName("Password:")]
  [Required(ErrorMessage = "Please enter password")]
  [Remote("ValidatePassword", "Home", typeof(DummyUsersRepository), "ValidatePassword", ErrorMessage = null)]
  public string Password { get; set; }

  [DisplayName("Confirm password:")]
  [Required(ErrorMessage = "Please repeat password")]
  [EqualTo("Password", "ConfirmPassword", typeof(AsynchronousFormViewModel), ErrorMessage = "Confirm password does not match password")]
  public string ConfirmPassword { get; set; }

  public bool UserRegistered { get; set; }
  #endregion
}

The sample is finished. We have achieved the same functionality, but the code fallows DRY principle now. You can download complete source code from Codeplex.

Rich file upload experience in ASP.NET MVC - part I

noreply@blogger.com (Tomasz Pęczek) — Mon, 08 Mar 2010 15:57:00 +0000

As you can figure out by the title, I'm going to write few posts about creating rich file upload experience in ASP.NET MVC. In my approach I will try to keep away from Flash (which is really often used for such scenarios) and stick only with jQuery.
So first, you should know how to handle file upload in ASP.NET MVC. The client side is simple, you need a form with enctype = "multipart/form-data" and an input of type file inside of it. On server side you can found files posted by user in Request.Files collection, where every file is represented by HttpPostedFileBase object.
Now, when we know the basics, we can start writting some code. First we will write some wrappers, which will allow us to keep our code unit testable:

public interface IHttpPostedFileBase
{
  #region Properties
  int ContentLength { get; }
  string ContentType { get; }
  string FileName { get; }
  Stream InputStream { get; }
  #endregion

  #region Methods
  void SaveAs(string filename);
  #endregion
}

public class HttpPostedFileBaseWrapper: IHttpPostedFileBase
{
  #region Fields
  private HttpPostedFileBase _postedFileBase;
  #endregion

  #region IHttpPostedFile Members
  public int ContentLength
  {
    get { return _postedFileBase.ContentLength; }
  }

  public string ContentType
  {
    get { return _postedFileBase.ContentType; }
  }

  public string FileName
  {
    get { return _postedFileBase.FileName; }
  }

  public System.IO.Stream InputStream
  {
    get { return _postedFileBase.InputStream; }
  }

  public void SaveAs(string filename)
  {
    _postedFileBase.SaveAs(filename);
  }
  #endregion

  #region Constructor
  public HttpPostedFileBaseWrapper(HttpPostedFileBase postedFileBase)
  {
    _postedFileBase = postedFileBase;
  }
  #endregion
}

So now, instead of HttpPostedFileBase object (which can't be created while unit testing), we have IHttpPostedFileBase which will allow us to provide different implementation when necessary.
Next we should take care of accessing Request.Files collection (remember, if you want to keep your controller unit testable, avoid accessing Request inside action method). We will prepare a class which will contain a collection of IHttpPostedFileBase and a model binder for this class:

[ModelBinder(typeof(HttpPostedFilesModelBinder))]
public class HttpPostedFiles
{
  #region Fields
  private List<IHttpPostedFileBase> _postedFiles;
  #endregion

  #region Properties
  public List<IHttpPostedFileBase> PostedFiles
  {
    get { return _postedFiles; }
  }
  #endregion

  #region Constructor
  public HttpPostedFiles()
  {
    _postedFiles = new List<IHttpPostedFileBase>();
  }
  #endregion
}

public class HttpPostedFilesModelBinder : IModelBinder
{
  #region IModelBinder Members
  public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
  {
    if (controllerContext == null)
      throw new ArgumentNullException("controllerContext");
    if (bindingContext == null)
      throw new ArgumentNullException("bindingContext");

    HttpPostedFiles postedFiles = new HttpPostedFiles();
    foreach (string postedInputName in controllerContext.HttpContext.Request.Files)
    {
      if (controllerContext.HttpContext.Request.Files[postedInputName] != null
          && controllerContext.HttpContext.Request.Files[postedInputName].ContentLength > 0)
        postedFiles.PostedFiles.Add(new HttpPostedFileBaseWrapper(controllerContext.HttpContext.Request.Files[postedInputName]));
    }
    return postedFiles;
  }
  #endregion
}

The issue of accessing Request.Files is solved.
In my sample solution I'm going to keep user uploads in Session, so I have to write two more classes which will take care of binding those for the action method:

[ModelBinder(typeof(SessionUploadedFilesModelBinder))]
public class SessionUploadedFiles
{
  #region Fields
  private List<FileInfo> _uploadedFiles;
  #endregion

  #region Properties
  public List<FileInfo> UploadedFiles
  {
    get { return _uploadedFiles; }
  }
  #endregion

  #region Constructor
  public SessionUploadedFiles()
  {
    _uploadedFiles = new List<FileInfo>();
  }
  #endregion
}

public class SessionUploadedFilesModelBinder : IModelBinder
{
  #region IModelBinder Members
  public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
  {
    if (controllerContext == null)
      throw new ArgumentNullException("controllerContext");
    if (bindingContext == null)
      throw new ArgumentNullException("bindingContext");

    SessionUploadedFiles uploadedFiles = (SessionUploadedFiles)controllerContext.HttpContext.Session["UPLOADED_FILES"];
    if (uploadedFiles == null)
    {
      uploadedFiles = new SessionUploadedFiles();
      controllerContext.HttpContext.Session["UPLOADED_FILES"] = uploadedFiles;
    }
    return uploadedFiles;
  }
  #endregion
}

After that, we can write our action methods:

public ActionResult FileUpload(SessionUploadedFiles uploadedFiles)
{
  return View(uploadedFiles);
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult FileUpload(SessionUploadedFiles uploadedFiles, HttpPostedFiles postedFiles)
{
  string uploadsPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Uploads");
  if (!Directory.Exists(uploadsPath))
    Directory.CreateDirectory(uploadsPath);

  foreach (IHttpPostedFileBase postedFile in postedFiles.PostedFiles)
  {
    string postedFilePath = Path.Combine(uploadsPath, Path.GetFileName(postedFile.FileName));
    postedFile.SaveAs(postedFilePath);
    uploadedFiles.UploadedFiles.Add(new FileInfo(postedFilePath));
  }
  return View(uploadedFiles);
}

Finally, we can write our view markup (it will be strong typed View for SessionUploadedFiles class):

<ul class="uploaded-files-list">
  <% foreach (System.IO.FileInfo file in Model.UploadedFiles) { %>
    <li><img src="<%= Url.Content("~/HttpHandlers/SystemIconsHandler.ashx?type=file&size=small&ext=" + file.Extension)%>" alt="<%= file.Extension%>" /> <%= Html.Encode(file.Name)%> <%= file.Length.ToString() + " B"%></li>
  <% } %>
</ul>
<% using (Html.BeginForm("FileUpload", "Home", FormMethod.Post, new { name = "frmUpload", enctype = "multipart/form-data" })) { %>
  <input type="file" name="fiUpload" id="fiUpload" />
  <input type="submit" name="btnUpload" id="btnUpload" value="Upload next file" />
<% } %>

Our sample looks like this (I'm using SystemIconsHandler for displaying icons):

It's hard to call it a rich user experience yet, you should rather treat it like a base, which will be extended in the fallowing parts.