Select File to Upload: <input id="file" name="file" type="file" />

<img id="fileView" />

<script type="text/javascript">

    $(document).ready(function () {

        $('#file').change(function () {

            var data = { ID: "b53dd6b4-f24c-4450-bf6a-246e5835a125" };

            $(this).upload(

                "FileUpload/AttachFileToEntity",

                data,

                function () {

                    $("#fileView").attr("src", "FileUpload/GetFileDataFromEntity/" + data.ID);

                }

            );

        });

    });

</script>

1. Uploads the selected file
2. Displays it. I am assuming that you are uploading an image (but not verifying this)

public class FileUploadController : Controller

{

    private readonly EntityRepository _entityRepository = new EntityRepository();

    public ActionResult Get()

    {

        return View();

    }

    public ActionResult AttachFileToEntity(Guid ID, HttpPostedFileBase file)

    {

        var entity = _entityRepository.Get(ID);

        entity.FileData = GetFileData(file);

        return Content("File saved");

    }

    private byte[] GetFileData(HttpPostedFileBase file)

    {

        var length = file.ContentLength;

        var fileContent = new byte[length];

        file.InputStream.Read(fileContent, 0, length);

        return fileContent;

    }

    public FileResult GetFileDataFromEntity(Guid ID)

    {

        return File(_entityRepository.Get(ID).FileData, "image");

    }

}

public class Entity

{

    public Guid ID { get; set; }

    public byte[] FileData { get; set; }

}

public class EntityRepository

{

    private static readonly IDictionary<Guid, Entity> _entities = new Dictionary<Guid, Entity>

    {

        { new Guid("b53dd6b4-f24c-4450-bf6a-246e5835a125"), new Entity { ID = new Guid("b53dd6b4-f24c-4450-bf6a-246e5835a125") }}

    };

    public Entity Get(Guid ID)

    {

        return _entities[ID];

    }

    public void Save(Entity entity)

    {

        if (entity.ID == Guid.Empty) entity.ID = Guid.NewGuid();

        if (_entities.ContainsKey(entity.ID)) _entities[entity.ID] = entity;

        else _entities.Add(entity.ID, entity);

    }

}

Starting off with the class we are going to return:

   1: public class Customer

   2: {

   3:     public int ID { get; set; }

   4:     public string Name { get; set; }

   5:     public string Company { get; set; }

   6:     public string StartDate { get; set; }

   7: }

Now the web method that returns the data:

   1: [System.Web.Script.Services.ScriptService]

   2: public class CustomerService : System.Web.Services.WebService

   3: {

   4:     [WebMethod]

   5:     public List<Customer> GetCustomers()

   6:     {

   7:         var list = new List<Customer>

   8:                        {

   9:                            new Customer { ID =1, Name = "Chris Brandsma", Company="Company 1", StartDate = new DateTime(2004, 3, 14).ToShortDateString()},

  10:                            new Customer { ID =2, Name = "Jason Grundy", Company="Company 2", StartDate = new DateTime(2005, 1, 1).ToShortDateString()},

  11:                            new Customer { ID =3, Name = "Scott Nickols", Company="Company 3", StartDate = new DateTime(2007, 7, 1).ToShortDateString()},

  12:                            new Customer { ID =4, Name = "Tony Rasa", Company="Company 4", StartDate = new DateTime(2009, 6, 14).ToShortDateString()},

  13:                        };

  14:         return list;

  15:     }

  16: }

So far nothing really special here.  Standard web method.  I uncommented the ScriptService attribute on the class to allow for JSON style results, just like I always do.  And I’m returning data.

Ok, on think you might have noticed: StartDate is a string – not a DateTime.  This is because DateTime gets converted to “DATE(1231231231231)” when passed to the browser.  Now I could parse that out using JavaScript and regular expressions, but I find it is much easier to just convert the date to a string that I want to look at in the first place.  If you think I am wacked, read Dave Ward.

Next I am going to load the data into a table in the most raw way I know how.  First the table:

   1: <table id="CustomerTable">

   2:     <thead><tr>

   3:         <td>ID</td>

   4:         <td>Name</td>

   5:         <td>Company</td>

   6:         <td>Start Date</td>

   7:         </tr>

   8:      </thead>

   9:     <tbody>

  10:     </tbody>

  11: </table>

That table just defines the bare structure of the table for us to load into.   Now to call the web method and then  load it into the table:

   1: function GetCustomerList() {

   2:     $.ajax({

   3:         type: "POST",

   4:         url: "CustomerService.asmx/GetCustomers",

   5:         data: "{}",

   6:         contentType: "application/json; charset=utf-8",

   7:         dataType: "json",

   8:         success: function(data) { LoadCustomers(data.d); },

   9:         failure: function() { alert("Sorry, we were unable to find the customers."); }

  10:     });

  11: }

The url is the relative url.  So in this case my page is in the same directory as my web service (CustomerService.asmx).  Then, in success, I take the data (data.d because Microsoft AJAX calls wrap everything in d for security purposes) and send the to LoadCustomers:

   1: function LoadCustomers(data) {

   2:     var tbody = $("#CustomerTable > tbody").html("");

   3:     

   4:     for (var i in data) {

   5:         var customer = data[i];

   6:  

   7:         var rowText = "<tr><td>" + customer.ID + "</td><td>" + customer.Name + "</td><td>" + customer.Company + "</td><td>" + customer.StartDate + "</td></tr>";

   8:         $(rowText).appendTo(tbody);

   9:     }

  10: }    

When I was talking about raw JQuery, I was really talking about the LoadCustomers method.  Here I am creating a table row as a string by hand, handing that to JQuery to load, the appending it to the table’s tbody.

Finally we call the method when the page loads:

   1: $(document).ready(function() {

   2:     GetCustomerList();

   3: });

Now complete, my table (as defined above) ends up looking like this:

   1: <table id="CustomerTable">

   2:    <thead><tr>

   3:             <td>ID</td>

   4:             <td>Name</td>

   5:             <td>Company</td>

   6:             <td>Start Date</td>

   7:             </tr>

   8:    </thead>

   9:    <tbody>

  10:      <tr><td>1</td><td>Chris Brandsma</td><td>Company 1</td><td>3/14/2004</td></tr>

  11:      <tr><td>2</td><td>Jason Grundy</td><td>Company 2</td><td>1/1/2005</td></tr>

  12:      <tr><td>3</td><td>Scott Nickols</td><td>Company 3</td><td>7/1/2007</td></tr>

  13:      <tr><td>4</td><td>Tony Rasa</td><td>Company 4</td><td>6/14/2009</td></tr>

  14:    </tbody>

  15:  </table>

Luckily I found the JQuery DatePicker.  This used be a separate download, you can find the original here, but it is now part of JQuery.UI.

But first, there are a few tricks to using it (or any other JavaScript control for that matter).  First things first, this is not a separate server control that replaces the text box with a date friendly text box.  This is a javascript library that extends a standard text box and gives it date functionality.

So the first thing you have to do is put a text box on your form.

<asp:TextBox ID="DateTextBox" runat="server" />

Next on my list is to add the DatePicker JavaScript file, ui.datepicker.js.  I still use the Microsoft AJAX Library which has the nice ScriptManager control, so typically I use that control to add my JavaScript files to the page.

<link rel="stylesheet" href="~\Scripts\ui.datepicker.css" type="text/css" media="screen"  charset="utf-8" />

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">

    <Scripts>

        <asp:ScriptReference Path="~/Scripts/jquery.js" />

        <asp:ScriptReference Path="~/Scripts/ui.datepicker.js"  />

    </Scripts>

</asp:ScriptManagerProxy>

Note: I also included a link to the CSS file used to "skin" the calendar control.

Now everything is in place, we still  have to tell the javascript which text box control (DateTextBox) to put a Calendar control on.  I typically make a quick little JavaScript function that I can call to hook them up.  It looks like this:

function LoadDateControls() {

    $('#<%= DateTextBox.ClientID %>').attachDatepicker(); 

}

This code block asks the ASP.Net page for the ClientId of the text box control (very handy when dealing with Master Pages or User Control), and then attaches the date picker to the text box.

OK, the final bit of hooking up we have to do is call this function once the page is loaded and ready.  If we are using the Microsoft AJAX Library then you can use the pageLoad method like this:

function pageLoad(sender, args) {

    LoadDateControls();

}

If you want to stick with "pure" JQuery then you can do this instead:

$(document).ready(function() {

   LoadDateControls();

 });

Either way works, it is up to you which you like better.

So lets review where we are now.  We have added the JavaScript to our page, and pointed it at a text box to display a calendar.  If everything has gone according to plan, you should see something like what you see to the right when you click on the text box.

I like it.  And as far as I know all of the colors and fonts are configurable via css.

OK, that covers most of my requirements, but there was one other requirement that isn't here yet: Min and Max dates.

This one is a little harder.  First we have to know what Min and Max dates to use, and that will have to come from the code behind.  Assuming you know that, you can call this C# code:

protected string MinDate;

protected string MaxDate;

private void UpdateDateRangeContols(DateTime minDate, DateTime maxDate)

{

    MinDate = EncodeJsDate(minDate);

    MaxDate = EncodeJsDate(maxDate);

}

public string EncodeJsDate(DateTime date)

{

    return date.ToString("U") + " UTC";

}

Now I have a MinDate and MaxDate fields that I can access from my aspx page.  To do that I'm going to rewrite my LoadDateControls function to look like this:

function LoadDateControls() {

 <%

    Response.Write("$.datepicker.setDefaults({dateFormat:'m/d/yy', minDate: new Date('"+MinDate+"'), maxDate:new Date('"+MaxDate+"')});");

 %>

    $('#<%=DateTextBox.ClientID %>').attachDatepicker();

}

One side effect of that bit of code is that I also use it to specify the date format.

But wait, did I really just use a Response.Write in my ASP.Net file?  Isn't that old school and lame?  Old school: yes.  Lame: no (if used in moderation).  I'm note writing an entire web site using Response.Write, just setting some JavaScript.  Besides, if you want to be one of the cool kids and start using the MVC framework, you had better get used to Response.Write again.  You're going to need it.

In my code behind, I set my calendar controls to only allow date entries that go back 2 weeks.  Take a look at what we get.

Today's date is May 6 (highlighted in pink), so my date range is April 28 to May 11.  When you are on the month of May, the Next button is disabled.  And, if I hit the drop downs for Month I only see April and May, and for Year I only get 2008.  Same for April, I can't go to March.

OK, so what if all of this is too much for you.  This is too much code, to much work, all you want is darn server control to use.  You are in luck.  Head over to West Wind Technologies and pick up Rich Strahl's JQuery Calendar ASP.Net Control.  Also subscribe to his blog, he is usually worth the read.

Well, I had to revisit that idea today.  My problem wasn't with the Check All button that I made, that works fine, the problem was with the the check boxes in the grid view column themselves.  I was using the built in Asp.Net AJAX UpdatePanel to handle talking to the code behind EVERY time a check box what checked.

Worked fine on small grids with good connections.  But large grids with bad connections...not so much.  The problem was that the entire grid was being reloaded with every check box click.  Not good.  If you want to see more reasons on why to beware UpdatePanel see Encosia's "Why ASP.Net AJAX UpdatePanels are Dangerous".

My solution was to replace the call-back/post-back with a JavaScript function and a WebService call.  Now, I have a web service class called (wait for it): WebService.asmx.  I'm going to use the ScriptManager to help me with this, by adding my WebService class to the ScriptManager's Services node.

<asp:ScriptManager ID="ScriptManager1" runat="server">

   <Services>

       <asp:ServiceReference Path="WebService.asmx" />

   </Services>

</asp:ScriptManager>

This tells the ScriptManager to generate some JavaScript wrappers that will make calling my web service call easier.  Bonus, I have my script manager in my Master Page, so now I can call this web service class from any content page.  Otherwise, I could change ScriptManager to ScriptManagerProxy and do the same thing on specific pages.

So, I have to add a web service method to my WebService class that I can call from JavaScript.  Here you go:

[WebMethod][ScriptMethod]

public void Reviewed(string userName, bool reviewed)

{

    // calls my database wrapper class that executes the sql command.

    // but I don't want to get into that right now, just go look up LINQ to SQL

    // or NHibernate, or SubSonic, or ...

    _dbo.Reviewed(userName, reviewed);

}

OK, that is the first easy part.  I now have a web service that I can call from my JavaScript.  Let's move onto the next easy part.  Hooking up a CheckBox control to execute the web service.

First thing I'm going to do is create a small JavaScript function on the page that actually calls the web service method.  I'll call it Reviewed:

<script type="text/javascript">

    function Reviewed(ctrl, UserName) {

        var isCheck = ctrl.checked;

        WebService.Reviewed(UserName,isCheck);

    }

</script>

Next comes up hooking up the CheckBox.  Now, if all I had to do was set the onclick property to call the function, it would be easy.  The code would look like this:

<asp:CheckBox ID="ReviewedCheckBox"  CssClass="ApprovalCheckBox" runat="server" onclick='CallJavacriptfunction(this)' />

But I need more data than that.  I also need to username.  Plus, this is in a GridView.  So I actually have to catch the OnRowDataBound event, and set the attribute programmatically.

protected void gvTimecard_RowDataBound(Object sender, GridViewRowEventArgs e)

{

    if (e.Row.RowType == DataControlRowType.DataRow)

    {

        string clickEventText = "Reviewed(this, \"{0}\");";

        string currentUser = HttpContext.Current.User.Identity.Name;

        clickEventText = string.Format(clickEventText, currentUser );

        CheckBox cb = (CheckBox)e.Row.FindControl("ReviewedCheckBox");

        cb.Attributes["onclick"] = clickEventText;

    }

}

And that is really about it.  This will now call the web service from the check box, using JavaScript, but without any post backs at all.  As a bonus, I'm passing around just the data that I need to execute the function.  No ViewState, no reloading the entire grid. 

Much, much, much better.

Display a Grid on the screen with a checkbox in each row.  At the bottom of the page have "Check All" button.

If you haven't had that, you will.  It is just a matter of time.  The traditional way of getting this to work is to use a post-back, check all of the check boxes, and return them to the browser.  Afterwards you don't like the browser resetting itself so you wrap it in an AJAX UpdatePanel.  But that still requires a post back!  I don't wanna post-back.  This should be easily handle-able with client side JavaScript -- well, it is with a bit of JQuery.

OK, lets start with the GridView.  I'm a stickler for a few things.  One of them is Template columns.  Typically if I need to do anything interesting I use a template column.  So my GridView will look like the one below (most other columns removed for readability).  The only interesting point to note is the CssClass="ApprovalCheckBox" in the CheckBox ItemTemplate.  Remember that for later.

GridView:

<asp:GridView ... >
   <Columns>
    <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
    <asp:TemplateField HeaderText="Approved" SortExpression="Approved">
      <ItemStyle HorizontalAlign="Center" />
      <ItemTemplate>
         <asp:CheckBox ID="chkApproved"  CssClass="ApprovalCheckBox" runat="server"  />
      </ItemTemplate>
    </asp:TemplateField>
   </Columns>
</asp:GridView>

And we need to add a Check all check box:

<asp:CheckBox ID="chkSelectAll" runat="server"  Text ="Select All" TextAlign="left"   />

First annoyance with check boxes.  You can't hook up JavaScript directly to the OnClick event.  But you can do it from the code behind.  My version of this is here:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        chkSelectAll.Attributes.Add("onclick", "JavaScript: checkAll(this.checked);");
    }
}

OK, so now when the web page user check the "Select All" check box it will run the checkAll JavaScript function.  I defined that with JQuery.

function checkAll(isChecked) {
  $(".ApprovalCheckBox > input").each(function() {
   this.checked = isChecked;
  });
}

Now some more back ground, and as I do I will explain that code above.  When you use the Asp.Net check box it creates a span tag that wraps the checkbox's input tag.  See code below (note: the span tag is my second annoyance with Asp.net. )

<span class="ApprovalCheckBox">
   <input id="ctl00_cphMain_gvApprovals_ctl06_chkApproved" 
          type="checkbox" 
          name="ctl00$cphMain$gvApprovals$ctl06$chkApproved" 
          onclick="JavaScript: valueChanged();" />
</span>

Of note: look where the "ApproveCheckBox" css class name is assigned -- to the span, not the input.  (Note: third annoyance with Asp.Net)

One of the great powers of JQuery it to use css as a personal JavaScript select language.  So I could say give me all of the html nodes with "ApproveCheckBox" class assigned to them, and it would.  In this case that would give me a bunch of span tags, and I want input tags. 

So just like with css, if I wanted to assign specific values to the input and not the span, but I could only specify the span directly, I use the ">" operator.  So if you look at the checkAll function above, you will see the line:

$(".ApprovalCheckBox > input").each(function()

Which says (in JQuery), give me all the input nodes whose parent has the "ApprovalCheckBox" css class assigned to it.  So now I have just the check box nodes (which is cool).  The "each" initializes a loop to run through all of the check boxes and check/uncheck them all.

So, to everyone out there doing web development: learn JQuery.  And happy hacking.