Integrating dot less css is pretty easy by default, as shown on its home page however I wanted something that could be configured by application users. We want to be able to specify the link html tag like the following.

<link href="/public/css/sites.less" rel="stylesheet" type="text/css" />

There are few steps involved in the solution I have come up with so bare with me as I go through them. Firstly we’ll start with the web.config:

        <compilation>
            <buildProviders>
                <add extension=".lessx" type="System.Web.Compilation.PageBuildProvider" />
            </buildProviders>
        </compilation>

Insert the builderProviders block inside the compilation section. The compilation section will be under the system.web section. This will enable us to use code blocks in our lessx files.

Secondly, is the routing.

        //Special Route for css so that images are relative to it
        routes.MapRoute("css",
                           "public/css/{filename}.less",
                           new { controller = "Css", action = "Index” },
                           new[] { "eLearning.Controllers" });

This specifies that any url matching /public/css/{filename}.less should be routed to the CssController passing the filename as the parameter to the Index method.

    public class CssController : BaseController
    {
        [OutputCache(Duration = 10, VaryByParam = "")]
        public ActionResult Index(string filename)
        {
            if (string.IsNullOrEmpty(filename))
                throw new ArgumentException("A filename must be supplied");

            ViewData["baseColor"] = "#aabbcc";

            var less = RenderViewToString(filename + ".lessx", null);
            var css = LessCss.Generate(less, true);
            return Content(css, "text/css");
        }
    }

    public static class LessCss
    {
        public static string Generate(string less, bool minify)
        {
            var lessEngine = new EngineFactory();
            lessEngine.Configuration.MinifyOutput = minify;
            var output = lessEngine.GetEngine().TransformToCss(less, null);
            return output;
        }
    }

This is the css controller class. It receives the filename as the input, finds the corresponding .lessx file and returns the file with appropriate view data replaced. Is then takes the less formatted string and runs it through the dot less parser to return a css string. This is then returned to the browser with the appropriate content-type. One method I have not shown is the RenderViewToString() and how the .lessx file is located. This method is located on the base controller class that the css controller inherits from. I have also turned Caching on so that it will cache the result for 10seconds.

        protected string RenderViewToString(string viewName, object model)
        {
            if (string.IsNullOrEmpty(viewName))
                viewName = ControllerContext.RouteData.GetRequiredString("action");

            ViewData.Model = model;

            using (StringWriter sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindView(ControllerContext, viewName, null);
                ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
                viewResult.View.Render(viewContext, sw);

                return sw.GetStringBuilder().ToString();
            }
        }

This method finds the .lessx file and returns the result as a string. Now usually the view engine will take controller name and method name and by convention look in the /Views/css/index.aspx file. It doesn’t quite make sense to put it in the views folder so I have overridden the default web forms view engine so that they can be placed in the /Public/Css folder. This can be configured to your liking (convention).

    public class CustomViewEngine : WebFormViewEngine
    {
        public CustomViewEngine()
        {
            var locs = new List<string>(base.ViewLocationFormats);
            locs.Add("~/Public/{1}/{0}"); //My personal choice
            locs.Add("~/Views/{1}/{0}");  //An alternative choice
            base.ViewLocationFormats = locs.ToArray();
        }
    }

Once your Custom View Engine has been overridden, you will need to add it to the ViewEngines.Engines collection in the application start method in the global.asax.cs.

        ViewEngines.Engines.Clear();
        ViewEngines.Engines.Add(new CustomViewEngine());

This will then allow us to write a *.lessx file like the following; you can also pass a strongly typed model to the .lessx file if you so wish in the same way you would to a regular aspx view.

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

@basecolor: <%= ViewData["baseColor"] %>;

body {
    background: @basecolor;
}

Which will be rendered to the browser as:

body {
    background: #aabbcc;
}

And that’s it. I’m still working on the finer details but I am liking how it works at the moment. If you have any thoughts or suggestions, please leave a comment.

Adam

Since then I have submitted a few patches for the framework, one of which is the Fluent Validation Model binder. Inspired by the Data Annotations Model binder, it works in much the same way. Once you have it set to your default model binder, it will validate any model which contains the specific attribute. This will become clear in the examples below.

Firstly lets take our model.

    [Validator(typeof(LineItemValidator))]
    public class LineItem
    {
        public int LineNumber { get; set; }
        public DateTime Date { get; set; }
        public string Description { get; set; }
        public decimal Net { get; set; }
        public decimal Tax { get; set; }
        public decimal Gross { get; set; }
    }

Attached to this simple LineItem class is a Validator attribute. This attribute is used by the Model Binder to locate the Class used for validation. Below I will define my LineItemValidator class which will hold the rules for the validation.

    public class LineItemValidator : AbstractValidator<LineItem>
    {
        public LineItemValidator()
        {
            RuleFor(x => x.Description)
                .NotEmpty().When(x => Settings.DescriptionRequired)
                .And
                .Length(0, 30);

            RuleFor(x => x.Date)
                .GreaterThanOrEqualTo(DateTime.Today);

            RuleFor(x => x.Net)
                .GreaterThan(0);

            RuleFor(x => x.Gross)
                .GreaterThan(0)
                .And
                .Equal(y => (y.Net + y.Tax))
                .WithName("Total Amount");
        }
    }

As you can see the class must inherit from AbstractValidator<T> where T is the model you want to define the rules for. The first rule uses the conditional When clause where it will only validate that the field is NotEmpty when the Settings.DescriptionRequired boolean is true. Also, another thing is the complex validation taking place on the Gross field. Not only does it validate that it is greater than 0, but that the value is equal to the net + tax amount. This is very elegant indeed. I have also specified the ‘WithName’ clause which has also been integrated into the model binder so that if an error occurs with the gross field, the WithName value will be displayed when an error happens. This is extremely handy for language localization or when the name of the field on the Model is insufficient.

Wiring this Model binder up in the Application_start event in the global.asax.cs is as easy as this.

     ModelBinders.Binders.DefaultBinder =
                new FluentValidationModelBinder(new AttributedValidatorFactory());

Note that we have to pass an instance of the AttributedValidatoryFactory into the Model Binder. This means if you have an alternate way of locating the Validator class other than via the attribute you can inherit from IValidatorFactory and create your own.

Now when a parameter of LineItem gets passed into a controller it will be validated against the model and all errors placed into the ModelState. This can then check the isValid property to determine if there are any errors and proceed accordingly.

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Edit(List<LineItem> lineItems)
        {
            if (ModelState.IsValid)
                return RedirectToAction("Edit");

            return View();
        }

And that’s it. I hope you enjoy using the Fluent Validation framework as much as I have and happy coding. For all you guys waiting for xVal integration, I will try and post a solution in the coming week.

Adam

The northwind database has a suppliers table. The info contained below is using that table with linq-to-sql.

After adding the table to the designer, a Supplier class gets constructed in the background. This class is a partial class which means we can add to it without changing the code auto-generated in the designer.cs file.

We can then create a partial class called Supplier inheriting from Custom Validation and add a MetadataType attribute to it. This attribute specifies the class for which use for validating the Supplier class.

    [MetadataType(typeof(SupplierValidation))]
    public partial class Supplier : CustomValidation
    {
    }

We can then create the SupplierValidation class specifying the properties of the Supplier class we would like to be validated. For instance here I only want to validate the ContactName and the ContactTitle of the Supplier.

        public class SupplierValidation
    {
        [Required]
        public string ContactName { get; set; }

        [Required, Range(0, 10)]
        public string ContactTitle { get; set; }
    }

This specifies that both fields are required and that the ContactTitle cannot be more than 10 characters in length.

The other benefit of using the buddy class here is that if you need to regenerate a table in the linq-to-sql designer, you won’t lose your changes because they’re contained in a separate file.

From here when a Supplier gets passed to in as a parameter on a Controller action it will be validated using the rules in the Supplier Validation class.

Cheers,

Adam

        var reference_number_old = "$##%@";
        while (recordsExist)
        {
            reference_number = String(rs(0));

            if (reference_number_old != reference_number)
            {
                Response.Write(reference_number);
                reference_number_old = reference_number;
            }

            //Do more stuff
        }

Sooo very very painful, and that’s only grouping by one column (reference number).

Now however with OO programming and the advance of Linq there is a much nicer and easier way to deal with this Master-Detail type one-to-many relationship.

Lets see how we do it now, still using our own custom sql.

Firstly here is our class to represent our flat data straight out of the database.

        public class FlatCustomerAndOrders
        {
            public int ReferenceNumber { get; set; }
            public string Name { get; set; }
            public string Address { get; set; }
            public int OrderId { get; set; }
            public string ProductName { get; set; }
            public string Description { get; set; }
            public decimal Amount { get; set; }
        }

Even filling this class used to be a bit painful before Linq. You would have to create a connection, create a reader, then instantiate the FlatCustomerAndOrders class. Set the properties then add the object to a list while records could still be read. Here’s how I do it now.

        DataContext dc = new DataContext(new SqlConnection(connString));
        IEnumerable<FlatCustomerAndOrders> flat =
            dc.ExecuteQuery<FlatCustomerAndOrders>("select c.referencenumber, c.name," +
            "c.address, o.orderid, o.productname, o.description, o.amount from customers " +
            "c inner join orders o on c.referencenumber = o.referencenumber");

Thats its. We have our List of FlatCustomerAndOrders.

The next step is to organise the data so that the data is nested so its easy to display with just two foreach loops. The two classes:

        public class Customer
        {
            public int ReferenceNumber { get; set; }
            public string Name { get; set; }
            public string Address { get; set; }
            public List<Order> Orders { get; set; }
        }

        public class Order
        {
            public int OrderId { get; set; }
            public string ProductName { get; set; }
            public string Description { get; set; }
            public decimal Amount { get; set; }
        }

To fill these two class we do some clever Linq using the GroupBy method. Here’s the code.

        IList<Customer> Customers =
            flat.GroupBy(cust => new { cust.ReferenceNumber, cust.Name, cust.Address })
                .Select(c => new Customer()
                {
                    ReferenceNumber = c.Key.ReferenceNumber,
                    Name = c.Key.Name,
                    Address = c.Key.Address,
                    Orders = c.Select(o => new Order()
                    {
                        OrderId = o.OrderId,
                        ProductName = o.ProductName,
                        Description = o.Description,
                        Amount = o.Amount
                    }).ToList()
                }).ToList();

And that’s it. It may look like a bit of a mouthful but its quite simple really.

It just takes the flat list and applies the groupby method to it grouping by the three customer columns. It then builds a new list to fill the Orders property with.

Its then super easy to display the data like so.

        foreach (Customer c in Customers)
        {
            //Display the customer details

            foreach (Order o in c.Orders)
            {
                //Display the orders for each customer
            }
        }

Well I hope this helps you as much as it has helped me.

Cheers

Schotime

Option 1:
Running IIS with Wildcard Application mapping.

This option allows extensionless URL’s but a what performance price. Every single request including images, files and css etc. will get passed through the aspnet_isapi.dll. For small sites this may not be a huge issue, but small sites soon because large sites and this then becomes an issue.

I’m not going to run through how to do this, because there are already some nice blogs about this and I don’t really recommend this option.

Option 2:
Running IIS with .mvc (or whatever you like) extensions.

I started out running my site (schotime.net) like this, however in the end I decided on Option 3.
URLs look like this.   /Home.mvc/Index   rather than /Home/Index  which is not that bad but again not as nice as the latter.

Anyways here’s how you set this up.
Firstly your global.asax.cs should look like this.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace MVCApplication1
{
    public class MvcApplication : System.Web.HttpApplication
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                "Default",                                              
                "{controller}.mvc/{action}/{id}",                       
                new { controller = "Home", action = "Index", id = "" }  
            );

            routes.MapRoute(
                "Defaultest",                                           
                "Default.aspx",                                         
                new { controller = "Home", action = "Index", id = "" }  
            );

        }

        protected void Application_Start()
        {
            RegisterRoutes(RouteTable.Routes);
            RouteTable.Routes.RouteExistingFiles = true;
        }
    }
}

This will get you started. All you need to do then is map the extension .mvc to the aspnet_isapi.dll in IIS under Home Directory -> Configuration -> Mappings or use an already mapped extension like .aspx and your mvc application should work.

Option 3:

This option requires the use of a clever isapi filter to rewrite the URLs.

I originally read an article on Bia Securities which uses the Isapi_rewrite 3rd party plugin however, Isapi_rewrite is not free so I thought I would find a suitable open source solution. Here it is: Ionic Rewriter -> http://www.codeplex.com/IIRF

It works in much the same way as the isapi_rewrite but will a few little differences. Once you download the IsapiRewrite4.dll, place the dll in a directory eg. C:\WINDOWS\system32\inetsrv\IIRF and run through the installation instructions included in the download (readme.txt) under Installation. Next comes the configuration. Firstly here is the IsapiRewrite4.ini configuration file ported from the Bia Securities article.

The [I,L] stands for a case-insensitive match and to stop processing if the current rule is a match.

Important Note:

Any physical files that you directly linked to should not be routed. In my MVC folder system I store all of these files under the /Content directory. Wherever you store your files replace the text Content with the folder that your files reside. otherwise images, css etc. will fail to display.

Now all that’s left to do is to modify the global.asax.cs to support this.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace MVCApplication1
{
    public class MvcApplication : System.Web.HttpApplication
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

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

            routes.MapRoute(
                "Defaultmvc",                                               // Route name
                "{controller}.mvc/{action}/{id}",                           // URL with parameters
                new { controller = "Home", action = "Index", id = "" },     // Parameter defaults
                new { controller = @"[^\.]*" }
            );
        }

        protected void Application_Start()
        {
            RegisterRoutes(RouteTable.Routes);
        }
    }
}

Note:  The line with this on it -> new { controller = @"[^\.]*" }   is very important. The routes won’t work without it.

And that’s it! You’re done.

Personally I like the last option but if you have no access to your hosting web server then Option 2 is probably the best.

Schotime

If you break a Datatable down it is really only a List of Dictionary objects so that’s how we’ll approach this problem. This is compatible with .NET 2.0 and above, with the Ajax installed.

I’d like to acknowledge RichardD for the idea.

Below is the solution.

using System.Collections.Generic;
using System.Data;

public static class JsonMethods
{
    private static List<Dictionary<string, object>>
        RowsToDictionary(DataTable table)
    {
        List<Dictionary<string, object>> objs =
            new List<Dictionary<string, object>>();
        foreach (DataRow dr in table.Rows)
        {
            Dictionary<string, object> drow = new Dictionary<string, object>();
            for (int i = 0; i < table.Columns.Count; i++)
            {
                drow.Add(table.Columns[i].ColumnName, dr[i]);
            }
            objs.Add(drow);
        }

        return objs;
    }

    public static Dictionary<string, object> ToJson(DataTable table)
    {
        Dictionary<string, object> d = new Dictionary<string, object>();
        d.Add(table.TableName, RowsToDictionary(table));
        return d;
    }

    public static Dictionary<string, object> ToJson(DataSet data)
    {
        Dictionary<string, object> d = new Dictionary<string, object>();
        foreach (DataTable table in data.Tables)
        {
            d.Add(table.TableName, RowsToDictionary(table));
        }
        return d;
    }
}

The static class JsonMethods exposes two public static methods and a private method. The public method ToJson() takes either a Dataset or a Datatable, and returns a Dictionary<string,object> object. The key to this class is the RowsToDictionary() method.

This method iterates through all the rows creating a dictionary entry for each column in the row using the column name as the key and storing the data value into the object. It then adds the Dictionary object to a List of Dictionary Objects and returns this to the ToJson() method. This Dictionary list is then added to another Dictionary object using the table name as the key. We’ll see how this all works together soon.

Lets have a look at the code behind now.

[System.Web.Script.Services.ScriptMethod(ResponseFormat = ResponseFormat.Json)]
[System.Web.Services.WebMethod]
public static Dictionary<string, object> getTable()
{
    string sql = "select user_name, active_indicator, create_date from users";
    string connString = "database=db; server=localhost; user id=sa;";

    return JsonMethods.ToJson(GetDataTable(sql, connString));
}

private static DataTable GetDataTable(string sql, string connString)
{
    using (SqlConnection myConnection = new SqlConnection(connString))
    {
        using (SqlCommand myCommand = new SqlCommand(sql, myConnection))
        {
            myConnection.Open();
            using (SqlDataReader myReader = myCommand.ExecuteReader())
            {
                DataTable myTable = new DataTable();
                myTable.TableName = "mydt";
                myTable.Load(myReader);
                myConnection.Close();
                return myTable;
            }
        }
    }
}

So what I have above is two static methods. One is GetTable which is the one we will access from the client. The other is a generic method for loading a results set into a Datatable. Note how I have set the TableName property. You will see why soon.

So using the jMsAjax plugin as below will return the following JSON object.

$.jmsajax({
    type: "POST",
    url: "Default.aspx",
    method: "getTable",
    data: {},
    dataType: "msjson",
    success: function(data) {
        $(outputDT(data.mydt)).appendTo("body");
    }
});

Results (data):

In the resulting data, the table name is the key to referencing the array of values. In this case we use ‘mydt’ as the key. In the success function on the client request you may also notice an outputDT function. This is a little helper function which takes a JSON Datatable and returns a the results in a table. This is very useful for debugging. Here is the client side code.

function outputDT(dataTable)
{
    var headers = [];
    var rows = [];

    headers.push("<tr>");
    for (var name in dataTable[0])
        headers.push("<td><b>"+name+"</b></td>");
    headers.push("</tr>");

    for (var row in dataTable)
    {
        rows.push("<tr>");
        for (var name in dataTable[row])
        {
            rows.push("<td>");
            rows.push(dataTable[row][name]);
            rows.push("</td>");
        }
        rows.push("</tr>");
    }            

    var top = "<table border='1'>";
    var bottom = "</table>";  

    return top + headers.join("") + rows.join("") + bottom;
}

So as you can see, its now very easy to return a Datatable or Dataset as a JSON object ready for use on the client.

Hope this is as useful for you as it is for me.

Cheers,

Schotime

It not only accepts a raw JSON object as input for method parameters, but safely parses and stringify’s the object using Crockford’s implementation (http://www.json.org/js.html). The syntax of the call doesn’t change if it is a “POST” or a “GET” as it is all handled inside the plugin. It also returns Dates without a problem.

I have add a Home page for the plugin at http://schotime.net/jMsAjax.aspx and also added it to the plugins pages on the jQuery website (http://plugins.jquery.com/project/jMsAjax).

Here is the basic syntax:

$.jmsajax({
    type: "POST",
    url: "jMsAjax.aspx",
    method: "getTime",
    data: { date_in: new Date() },
    success: function(data) {
        $("#div").html(String(data));
    }
});

You can find more information, a demo and the download at http://schotime.net/jMsAjax.aspx
Update: Just fixed the download page. Sorry for the inconvenience.

And at only 4kb + jQuery its significantly less size than MsAjax.

I hope this is as helpful to you as it is for me.

Schotime

Updated 04/07/08: Please see my latest post for a jQuery plugin that works perfectly with Asp.net. Dates and all.

So here I show you my solution which works pretty well and suits my needs. Maybe you might find it useful.

Firstly I’ll show you the aspx page and code behind use to make the AJAX call.
ASPX Page:

<html>
<head>
    <title>My jQuery Test</title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function() {
            $("#mybutton").click(function() {
                  $.ajax({
                      type: "POST",
                      url: "Default.aspx/jQueryTest",
                      contentType: "application/json; charset=utf-8",
                      data: "{ 'dt_in': "+(new Date()).toMSJSON()+" }",
                      success: function(response) {
                        var data = parseMSJSONString(response);
                        alert(data.d.name);
                        alert(data.d.dt);
                      }
                  });
             });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" id="mybutton" value="GetDate" />
    </div>
    </form>
</body>
</html>  

Code Behind:

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    [System.Web.Script.Services.ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    [System.Web.Services.WebMethod]
    public static Test jQueryTest(DateTime dt_in)
    {
        Test t = new Test() { name = "My Name", dt = dt_in.AddDays(5) };
        return t;
    }

    public class Test
    {
        public string name { get; set; }
        public DateTime dt { get; set; }
    }
}

Note: I have not set a dataType setting of ‘json’ in the Ajax call to prevent the JSON string being evaluated into a JSON object before I can parse it. Also note that the name of the parameter passed in through the JSON string data must be the same as the static WebMethod parameter name. In this case “dt_in”.

So what we have above is a simple input button with the value of “GetDate” which is going to send the current date from JavaScript to the WebMethod, add 5 days to the Date, then add it to a custom class called Test and return an instance of it. At that point the Name and Date will be alerted to the screen, all without a PostBack.

Now usually this would not work however I have created to handy scripts to make it pretty seamless. One to convert a JavaScript Date object to a Date String that ASP.NET will accept, and the other to parse the JSON string returned into a JavaScript Date. Here are those two functions.

Date.prototype.toMSJSON = function () {
      var date = '"\\\/Date(' + this.getTime() + ')\\\/"';
      return date;
};

function parseMSJSONString(data)
{
    try {
        var newdata = data.replace(
            new RegExp('"\\\\\/Date\\\((-?[0-9]+)\\\)\\\\\/"', "g")
                        , "new Date($1)");
        newdata = eval('('+newdata+')');
        return newdata;
    }
    catch(e) { return null; }
}

The first of these two functions toMSJSON extends the Date object by adding the toMSJSON method to it. By doing this any Date object created in JavaScript can be converted to its MS JSON equivalent ready to be sent via Ajax.

The second one is a plain method used to parse the JSON string returned by the WebMethod to a JSON string that is ‘evaled’ and made a proper JSON object. Thereby making data.d.dt in the example above a Date object.

After managing to get some lines of communication going between the client and server applications, I couldn’t help but notice that it was taking a little bit longer than it probably should have. I decided to have a closer look.

Using some basic timestamping in the console/website application the whole process was taking just over 1 second. This was to connect, send and then receive a response. Further investigation revealed only 1 statement was causing the time to blow out. Below is the statement.

TcpClient socketForServer = new TcpClient("localhost", 200);

Now in all the demos and tutorials this is how it showed to connect to the server. Pretty straightforward and simple. Or so I thought. Whilst having a look through the methods associated with the TcpClient, there was one that stood out: Connect(). Hmmm…this also took a host name and a port. I decided to give it a try.

TcpClient socketForServer = new TcpClient();
socketForServer.Connect("localhost", 200);

I bet you’re wondering right now. What is the difference?? At this point in time I’m not quite sure but I’m determined to figure it out because after making that change the time to execute the previous two statements was about 1 millisecond or so. Much better.

One thing that did seem odd was if the TcpClient failed to make a connection, the response time was almost exactly the same (~1sec).

If anyone knows the reason, please leave a comment. Until then, two lines will have to do.

When I first put the GridView together, I was surprised to find that there was no Value property for the asp:checkbox nor could you bind any other column in a database but a ‘bit’ column to it.

The only solution I could come up with was to create a custom Checkbox and implement the feature. Below is the code for the custom Checkbox.

using System;

using System.ComponentModel;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace ServerControls

{

    [Bindable(true)]

    [Category("Appearance")]

    [DefaultValue("")]

    [Localizable(true)]

    [ToolboxData("<{0}:CheckBoxValue runat=server></{0}:CheckBoxValue>")]

    public class CheckBoxValue : CheckBox

    {

        private string _value;

        private string _unCheckedValue;

        private string _checkedValue;

        public string Value

        {

            get { return _value; }

            set

            {

                _value = value;

                if (value != null && this.CheckedValue != null && this.UnCheckedValue != null)

                    base.Checked = value == this.CheckedValue;

            }

        }

        public string CheckedValue

        {

            get { return _checkedValue; }

            set { _checkedValue = value; }

        }

        public string UnCheckedValue

        {

            get { return _unCheckedValue; }

            set { _unCheckedValue = value; }

        }

        public override bool Checked

        {

            get { return base.Checked; }

            set

            {

                base.Checked = value;

                if (this.Value != null && this.CheckedValue != null && this.UnCheckedValue != null)

                    this.Value = value ? this.CheckedValue : this.UnCheckedValue;

            }

        }

        protected override void OnInit(EventArgs e)

        {

            Page.RegisterRequiresControlState(this);

            base.OnInit(e);

        }

        protected override object SaveControlState()

        {

            object[] state = new object[2];

            state[0] = base.SaveControlState();

            state[1] = this.Value;

            return state;

        }

        protected override void LoadControlState(object state)

        {

            object[] stateTmp = (object[])state;

            base.LoadControlState(stateTmp[0]);

            this.Value = (string)stateTmp[1];

        }

    }

}

The magic in the custom checkbox occurs in the Value property and the overridden Checked property.

When the value property is set, if it is the same as the ‘CheckedValue’ property then we set the base.Checked value to true else false. The same principles apply to the overridden Checked property. When the property is set we set the Value property to the ‘CheckedValue’ property if Checked equals true else we set it to the ‘UnCheckedValue’.

Once compiled we can then use this inside our GridView template and bind a varchar column from a database to it. Here is the syntax.

<Custom:CheckBoxValue
        ID="cbv1"
        runat="server"
        CheckedValue="Y"
        UnCheckedValue="N"
        Value='<%# Bind("valueyn") %>' />

So when the GridView databinds and evaluates the ‘valueyn’ column; if the value is ‘Y’ then the checkbox will be checked and if the value is ‘N’ then the checkbox will be unchecked. Then if I choose to edit a line with the checkbox and change its value, the value stored in the database will match the value of the checkbox. eg. if the checkbox is checked, ‘Y’ will be entered into the database and if it is left unchecked then ‘N’ will be entered.

This seems to work extremely well for my project and suits my needs. It will even work if the ‘valueyn’ column is an Int, as long as you modify the ‘CheckedValue’ and ‘UnCheckedValue’ to something that can be implicitly converted to an Int.

Hope this helps. If you find any issues or have other ideas please don’t hesitate to leave a comment.