public HttpResponseMessage PutCustomer(Customer customer)
        {
            using (var context = new ChinookContext())
            {
                var request = context.Customers.Single(c => c.CustomerId == customer.CustomerId);

                // todo this has to have an easier way.  Customer.Attach throws an error
                request.FirstName = customer.FirstName;
                request.LastName = customer.LastName;
                request.Address = customer.Address;
                request.City = customer.City;
                request.PostalCode = customer.PostalCode;
                request.State = customer.State;
                request.Country = customer.Country;
                request.Fax = customer.Fax;
                request.Email = customer.Email;
                request.Company = customer.Company;

                context.SaveChanges();

                var response = Request.CreateResponse(HttpStatusCode.Accepted, customer);
                response.Headers.Location = new Uri(Request.RequestUri, string.Format("Customer/{0}", customer.CustomerId));
                return response;
            }
        }

As you may notice this can get tedious and rather large as more fields need updating.   In Entity Framework 5  we get a wonderful new method ‘SetValues’.  With this new method we can change the above code from that to this:

 public HttpResponseMessage PutCustomer(Customer customer)
        {
            using (var context = new ChinookContext())
            {
                var original = context.Customers.Find(customer.CustomerId);

                if (original != null)
                {
                    context.Entry(original).CurrentValues.SetValues(customer);
                    context.SaveChanges();
                }

                var response = Request.CreateResponse(HttpStatusCode.Accepted, customer);
                response.Headers.Location = new Uri(Request.RequestUri, string.Format("Customer/{0}", customer.CustomerId));
                return response;
            }
        }

Before the RC release of MVC4/WebAPI JsonArray and JsonObject lived in System.Runtime.Serialization.  Once you upgrade your project these options disappear.

The fix is pretty simple.  In the latest RC release of MVC4/WebApi Microsoft switched the JSON handler to JSON.NET

The project should have a reference to Newtonsoft.Json (if it does not, you might need to load the NuGet package.

Once this is complete add a using statement

using Newtonsoft.Json.Linq

After that you can now use:

• JArray in place of JsonArray
• JObject in place of JsonObject
• so on and so forth.

First issue I ran into was that the Nuget packages did not upgrade from Beta to RC.  I found many different ways online to resolve this issue.  In the end I found it the easiest to do the following.

1. Open the packages folder and delete everything.
2. Start in the Data Access project and upgrade the package.

The next thing I ran into for an error was that generic HttpResponseMessage’s were removed. I personally think the new format is a nice change.

The old format looked something like this:

new HttpResponseMessage<someGenericCollection>(someValue)

The new format should look something similar to this:

Request.CreateResponse(HttpStatusCode.OK, someMessage)

The final upgrade issue I ran into was the removal of GetUserPrincipal.  It was changed to System.Threading.Thread.CurrentPrincipal.Identity.

Note: As Larry pointed out in the comments his is also exposed to the APIController and is accessible by this.User.Identity 

The last part of the local CRUD application is update.  We will be following a similar pattern that was conducted in Day 12.

Open CustomerController.cs and create a new method named PutCustomer that returns a HttpResponseMessage.    In order to improve the user experience, check the passed in customer ID.  Check the database to see if the user exist.  If it does not, it will pass the customer object off  the post method.  If the customer object does exit, it will update the existing customer and save the changes.  If the update is accepted it will pass back the updated customer object and an accepted http response back to the client.

The PutCustomer method should look similar to the following:

// Update = Put
public HttpResponseMessage PutCustomer(Customer customer)
{
   using (var context = new ChinookContext())
   {
      Customer request = null;

      if (customer.CustomerId != 0)
      {
          request = context.Customers.Single(c => c.CustomerId == customer.CustomerId);
      }

      if (request == null)
      {
          return this.PostCustomer(customer);
      }

      // todo this has to have an easier way.  Customer.Attach throws an error
         request.FirstName = customer.FirstName;
         request.LastName = customer.LastName;
         request.Address = customer.Address;
         request.City = customer.City;
         request.PostalCode = customer.PostalCode;
         request.State = customer.State;
         request.Country = customer.Country;
         request.Fax = customer.Fax;
         request.Email = customer.Email;
         request.Company = customer.Company;

         context.SaveChanges();

         var response = Request.CreateResponse(HttpStatusCode.Accepted, customer);
         response.Headers.Location = new Uri(Request.RequestUri, string.Format("Customer/{0}", customer.CustomerId));
         return response;
   }
}

Next a new button to update the selected customer needs to be added to jqueryUILocal.htm.

In the tools div add a new button to the tools div named Edit Customer.

This div should not look like this:

<div id="tools" class="tools">
        <button id="newCustomer">New Customer</button>
        <button id="editCustomer">Edit Customer</button>
        <button id="removeCustomer">Remove Customer</button>
        <button id="clearSelection">Clear selection</button>
</div>

For now below the tools div we will add a new form with the id of editForm.  You can copy the previously created newForm and change the label.  This should look like this:

<form id="editForm" title="Edit Customer">
        <fieldset>
        </fieldset>
        <input type="submit" value="Save changes" />
</form>

In jQueryUIExampleLocal.js it is time to wire up the edit button.  Create a new function with the name of jQueryExample.EditCustomer.  Below is the example followed by the explanation.

jQueryExample.EditCustomer = function() {
    var customer;
    $("#editCustomer").click(function() {
        if (!selected.length) {
            alert("None selected");
            return;
        }
        customer = selected[0];
        $("#edit-tmpl").tmpl(meta(customer)).appendTo(editForm.find("fieldset").empty());
        editForm.dialog("open");
    });
    $("[type=submit]").button();
    var editForm = $("#editForm").dialog({
        autoOpen: false,
        width: 350,
        modal: true
    }).hide().submit(function(event) {
        event.preventDefault();

        var customerId = $("#CustomerId").val();
        var firstName = $("#FirstName").val();
        var lastName = $("#LastName").val();
        var address = $("#Address").val();
        var city = $("#City").val();
        var postalCode = $("#PostalCode").val();
        var state = $("#State").val();
        var country = $("#Country").val();
        var email = $("#Email").val();
        var phone = $("#Phone").val();
        var fax = $("#Fax").val();
        var company = $("#Company").val();

        var sentData = {
            CustomerId: customerId,
            FirstName: firstName,
            LastName: lastName,
            Address: address,
            City: city,
            PostalCode: postalCode,
            State: state,
            Country: country,
            Email: email,
            Phone: phone,
            Fax: fax,
            Company: company
        };

        $.ajax({ 
            type: 'POST', 
            dataType: 'json', 
            url: 'http://localhost:60025/api/customer', 
            data: sentData }

    );
        $.observable(customer, localCustomers).property(serializeForm(this));
        customers.refresh();
        // TODO hide tooltip
        editForm.dialog("close");
    });
};

• Click event is wired to the edit customer button.
• Then we verify that a customer has been selected, if not an alert box is displayed
• The selected customer is passed to the template and the form is opened.
• After the data has been updated, the submit button wraps up the data
• An Ajax call with the verb put is sent to the server.
• The page collection is then updated and then refreshed

We now have a fully working CRUD application that will work on the same domain as the web server.  In the next we series I will demonstrate utilizing cross domain techniques.

In our quest to create a CRUD application we have completed the read and the delete portion.  In this article we will generate the create functionality.  For now I am using the jQuery Templates in the future I will be switching to something else.

First thing that needs to be done is to open up the CustomerController.cs in the web api and create a new method with the name of PostCustomer.  It will return an HttpResponseMessage and will look for a parameter of Customer.

To improve on the user experience I am first checking to verify if the customer currently exist.  Going back to my note above, I am doing this in case a user uses the reverse logic then the customer object will be placed in the correct method.

If the user does not exist we will call Entity Framework and execute SaveChanges().  We will then create our HttpResponseMessage and pass in the customer object and an HttpStatusCode.Created.  This is considered good practice for one to notify the contact that something happened and the ajax call can check that the return message was a 201.  jQuery’s ajax call mechanism can check for specific return messaged and conduct different actions.

An example might could be if the message is 201 display a message that says “Customer ID xxxxx has been successfully created.”  Since the customer object with the new ID back is being passed back, the message could display the correct ID.

Included in this HttpResponseMessage the Headers.Localtion with the RequestUri that will give the address to this new user.

The PostCustomer method should look similar to the following:

 // Create = Post
public HttpResponseMessage PostCustomer(Customer customer)
{
   using (var context = new ChinookContext())
   {
       Customer request = null;

       if (customer.CustomerId != 0)
       {
           request = context.Customers.Single(c => c.CustomerId == customer.CustomerId);
       }

       if (request == null)
       {
           context.Customers.Add(customer);
           context.SaveChanges();

           var response = Request.CreateResponse(HttpStatusCode.Created, customer);
           response.Headers.Location = new Uri(Request.RequestUri, string.Format("Customer/{0}", customer.CustomerId));
           return response;
       }

       return this.PutCustomer(customer);
   }
}

Now to update the HTML file.

• Open jqueryUILocal.htm,
• In the tools div add a new button to create a new customer.

It should look like this now:

<div id=”tools” class=”tools”> <button id=”newCustomer”>New Customer</button> <button id=”removeCustomer”>Remove Customer</button> <button id=”clearSelection”>Clear selection</button> </div>

Below the tools div

• Add a form with the id of “newForm”
• Add a title of “New Customer”
• Add open and close fieldset
• add an input of type submit and give it a value of “Save Changes”

If should look like this:

<form id="newForm" title="New Customer">
    <fieldset>
    </fieldset>
    <input type="submit" value="Save changes" />
</form>

The last thing that needs to be done in the HTML (when I move off jQuery Templates I will move this out of the html).  we will add out template script.  This will go though the array and generate the fields and labels for the object (or model for those familiar with MVC) passed in.  This code looks like this:

<script id="edit-tmpl" type="text/x-jsrender">
  {{if $.isArray(value)}}
  <label>${label}</label>
  <ul>
      {{each(index, valueX) value}}
      <li><input type="text" class="ui-widget-content ui-corner-all" name="${name}" placeholder="${label}" value="${valueX}" title="${label}" /></li>
      {{/each}}
  </ul>
  {{else}}
  <label for="${name}">${label}</label>
  <input type="text" class="ui-widget-content ui-corner-all" id="${name}" name="${name}" placeholder="${label}" value="${value}" title="${label}" />
  {{/if}}
</script>

Now to wire it all the modules together.  Since this part the code is a little long I will post the example first for jQueryUIExampleLocal.js:

jQueryExample.NewCustomer = function() {
    $("#newCustomer").click(function() {
        var newCustomer = {
            FirstName: "",
            LastName: "",
            Address: "",
            City: "",
            PostalCode: "",
            State: "",
            Country: "",
            Email: "",
            Phone: "",
            Fax: "",
            Company: ""
        };

        $("#edit-tmpl").tmpl(meta(newCustomer)).appendTo(newForm.find("fieldset").empty());
        newForm.dialog("open");
    });

    $("[type=submit]").button();
    var newForm = $("#newForm").dialog({
        autoOpen: false,
        width: 350,
        modal: true
    }).hide().submit(function (event) {
        event.preventDefault();

        var firstName = $("#FirstName").val();
        var lastName = $("#LastName").val();
        var address = $("#Address").val();
        var city = $("#City").val();
        var postalCode = $("#PostalCode").val();
        var state = $("#State").val();
        var country = $("#Country").val();
        var email = $("#Email").val();
        var phone = $("#Phone").val();
        var fax = $("#Fax").val();
        var company = $("#Company").val();

        var sentData = {
            FirstName: firstName,
            LastName: lastName,
            Address: address,
            City: city,
            PostalCode: postalCode,
            State: state,
            Country: country,
            Email: email,
            Phone: phone,
            Fax: fax,
            Company: company
        };

        $.ajax({ type: 'POST', dataType: 'json', url: 'http://localhost:60025/api/customer', data: sentData,
            success: function (result) {
                $.observable(localCustomers).insert(result);
                customers.refresh();
            }
        });

        newForm.dialog("close");
    });
};

• Add a new function of jQueryExample.NewCustomer=function(){
• Add a click event and define the new customer object

Note: Edit is a little easier because we can use the object in the jQuery observable, this was the easiest way I found.  JSRender/JSView might offer an easier or dynamic option.

• then select the #edit-tmp and pass into the template the newCustomer model
• Append it to the newform fieldset
• then add a call to the dialog(“open”)
• Wireup the submit button
• In the submit button grab the values of the form
• Package those values in a object called sentData
• Call $.ajax with the verb of POST and then the sentData.
• Add a success function to the Ajax call.  If no errors are returned the new customer will be added to the observable object that the data grid is bound to.
• Call a refresh on the customers collection
• and finally close the dialog.
• Add jQueryExample.NewCustomer() to the jQueryExample.jQueryWireUp function

Run the code, click the New Customer button and the following form should open.

Add some data and click save changes.  In the Grid the new customer should show up.

In sessions 8-10 we added some get functionality along with paging and selection support to our grid.  Now what if we want to prune out customer database and remove one of those customers.

• In the Web Api Open CustomerController.cs
• Create a new method named DeleteCustomer that excepts an integer of id
• DeleteCustomer will also return a HttpResponseMessage
• initialize an empty message named reponse

In this sample application we do not technically allow anyone except the DBA access to delete records. If you have been following this series we added a new column to our customer database to signify that a record is deleted.  We then modified our Get method not to return those records.

So because of this we are going to do something slightly different.  First we will check to see if the record exist while also checking to ensure it has not already been marked as deleted.  If it has not, then we will set to deleted and return and Accepted 202 HTTP message.  If it has already been deleted or is not found we will return a Not found 404 HTTP message.  Our new deleted method should look similar to this;

// Delete = DELETE
public HttpResponseMessage DeleteCustomer(int id)
{
    using (var context = new ChinookContext())
    {
      var request = context.Customers.Single(c => c.CustomerId == id && c.Deleted == false);

      if (request != null)
      {
         request.Deleted = true;
         context.SaveChanges();
         return Request.CreateResponse(HttpStatusCode.Accepted, request);
       }
        return Request.CreateResponse(HttpStatusCode.NotFound);
    }
}

• Open up jQueryUILocal.htm
• In the tools div tab we created in Day 10 add a new button with the id removeCustomer.

<div class="tools">
        <button id="removeCustomer">Remove Customer</button>
        <button id="clearSelection">Clear selection</button>
    </div>

• Open Up jQueryUIExampleLocal.js
• Create a new function in our jQueryExample and name it Remove Button
• Add the follow code to the function

jQueryExample.RemoveButton = function () {
    $("#removeCustomer").click(function () {
        if (!selected.length) {
            alert("None selected");
            return;
        }
        var customerId = selected[0].CustomerId;
        $.ajax({ type: "DELETE", url: "http://localhost:60025/api/customer/" + customerId });

        $.observable(localCustomers).remove(selected);
        $.observable(selected).remove(0, selected.length);
        customers.refresh();
    });
};

In this function we do a few things.

First we check upon click if something has been selected.  If not we display an alert box (I am not a fan of alert boxes so this will be changed later).

Currently this function only supports deleting one record at a time, it could be easily expanded to allow multiple deletes.

The function then removes the row from the client side dataview and refresh the object.

To finish up we need to add this new function to our jQueryWireUp, it should now look like this:

jQueryExample.jQueryWireUp = function () {
    jQueryExample.GetAllCustomer();
    jQueryExample.LoadDataView();
    jQueryExample.LoadDataGrid();
    jQueryExample.PageSizeOptions();
    jQueryExample.SelectedGridOptions();

    customers.refresh();

    jQueryExample.RemoveButton();
    jQueryExample.RefreshButton();
    jQueryExample.ClearButton();
};

Save and run the application.  Select the customer with the ID of one, then click the Remove Customer button.

If Fiddlers is running you should see the following address being sent to web api.

http://localhost:60025/api/customer/1 with the verb of DELETE.

Upon completion that customer should disappear from the grid and if you check the database you will notice the Deleted column is not true.

• Open up jQueryUILocal.htm
• Below our customers-selected table add a new div, we will give it a class name of tools.  This will hold our button controls.
• Add a buttons for our clear selection

<div class="tools">
     <button id="clearSelection">Clear selection</button>
</div>

• Next open up jQueryUIExampleLocal.js
• Add a new function to bind it to the click event of the clear selection button

jQueryExample.ClearButton = function () {
    $("#clearSelection").click(function () {
        $.observable(selected).remove(0, selected.length);
        customers.refresh();
    });
};

• What this function does it selects the selected object in the observable section of the dataviewer, removes all the rows in and then refreshes the customer dataviewer.
• The jQueryWireUp should not look like this.

jQueryExample.jQueryWireUp = function () {
    jQueryExample.GetAllCustomer();
    jQueryExample.LoadDataView();
    jQueryExample.LoadDataGrid();
    jQueryExample.PageSizeOptions();
    jQueryExample.SelectedGridOptions();
    
    customers.refresh();

    jQueryExample.ClearButton();
};

• Add some fields to the Customer selection and click the button ‘Clear selection’

In this session we will enhance the grid by allowing the end user to change the paging size.  We are going to setup a second grid so that when one or more rows are selected from the top grid they will show up in the bottom grid.

• First thing, open up jQueryUILocal.htm.
• Go to the customers-local table
• After the </tbody> tag  at a <tfoot> tag (open and close)
• Inside the table footer we will then add pager span, page size drop down and some row view information.  It should look similar to this

<tfoot>
        <tr>
            <td>
                 <span id="pager"></span>
            </td>
            <td>
                <label for="pagesize">Pagesize</label>
                <select id="pagesize">
                    <option>10</option>
                    <option>20</option>
                    <option>30</option>
                </select>
            </td>
            <td>
                Viewing rows <span class="paging-from">0</span> to <span class="paging-to">0</span> of <span class="paging-total">0</span>
            </td>
        </tr>
    </tfoot>

Below the table (grid view) to show a separation we will add a break, line, break.  Then setup another table, for now we will make it identical (minus the paging information) and give it an id of ‘customers-selected

<table id="customers-selected">
        <caption>Selected Customer</caption>
        <thead>
            <tr>
                <th data-property="CustomerId">ID</th>
                <th data-property="FirstName">First Name</th>
                <th data-property="LastName">Last Name</th>
                <th data-property="Address">Address</th>
                <th data-property="City">City</th>
                <th data-property="PostalCode">PostalCode</th>
                <th data-property="State">State</th>
                <th data-property="Country">Country</th>
                <th data-property="Email">Email</th>
                <th data-property="Phone">Phone</th>
                <th data-property="Fax">Fax</th>
                <th data-property="Company">Company</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

To wire up the paging options create a new function named PageSizeOptions.  In this function we will do two things.  First we will bind our customers collection to the pager source.  This will give us that left, right, and page number functionality that we wall love. Secondly we will add a change event to the page size drop down.  This will allow the end users to change the page size from 10, 20, or 30 rows.  When the page size changes we will also call a refresh so that the grid can adjust for the change.  It should look like this:

jQueryExample.PageSizeOptions = function() {
    $("#pager").pager({
        source: customers
    });

    $("#pagesize").change(function() {
        customers.option("paging.limit", +$(this).val()).refresh();
    });
};

Next we will create a new function named SelectedGridOptions.  This function will bind the selected rows from ‘customers-local’ to the selected object and sets the source of the customers-selected grid to the selected object.  This function should look like this:

jQueryExample.SelectedGridOptions = function() {
    // update status when selection changes
    $.observable(selected).bind("insert remove", function() {
        $(".selected-status").text(selected.length);
    });

    $("#customers-selected").grid({
        source: selected
    });

    $("#customers-local").grid({
        source: customers,
        heightStyle: "fill"
    }).gridFilter().gridSort();
};

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Refresh http://localhost:60025/jQueryUILocal.htm, click and hold on customer 2 and drag to 7.  You should notice that as a new row is selected, the selected grid populates.  Do the opposite and you will see them disappear.

Adjust the page size and use the page buttons to verify they all work.

First lets open up the jQueryUILocal.htm file

Between the body tags we want to add the following

<body>
<h2>jQuery UI Grid</h2>
<table id="customers-local">
    <caption>Customers Grid</caption>
   
    <thead>
        <tr>
            <th data-property="CustomerId">ID</th>
            <th data-property="FirstName">First Name</th>
            <th data-property="LastName">Last Name</th>
            <th data-property="Address">Address</th>
            <th data-property="City">City</th>
            <th data-property="PostalCode">Postal Code</th>
            <th data-property="State">State</th>
            <th data-property="Country">Country</th>
            <th data-property="Email">Email</th>
            <th data-property="Phone">Phone</th>
            <th data-property="Fax">Fax</th>
            <th data-property="Company">Company</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

    <script type="text/javascript">
        $(document).ready(function () {
            jQueryExample.jQueryWireUp();
        })
    </script>

</body>

In these examples we are hard coding the column names.  For the jQuery UI Data grid it currently uses the tag <thread> to represent the column names.  We utilize the data-property attribute to bind our json data field to the corresponding column name.  For the value we can change the name to display something that is better for user experience.  An example could be that instead of displaying CustomerId we can change it to be just ID.

Right before the closing body tab we are going to add some JavaScript that will call our soon to be created wire up function as soon as the document is ready. 

Open up jQueryUIExampleLocal.js

We are going to create a few global objects to hold some data.  At the top of the JavaScript file add the following:

var jQueryExample = {}; // holds our functions
var localCustomers;     // used for the ajax calls and part of the dataview
var customers;          // used for the data view
var selected = [];      // used to hold which rows were selected.
var grid;               // the datagrid

Create a new function for our jQueryExample object named GetAllCustomers .  It will look like this:

jQueryExample.GetAllCustomer = function() {
    $.ajax({
        dataType: "json",
        url: "http://localhost:60025/api/customer",
        async: false,
        success: function (result) {
            localCustomers = result;
        }
    });
};

This function will use the jQuery ajax function to call our local Web API controller and return json. Adjust the port number to match what yours is.  If this function executes successfully we take those results and save them to our global variable localCustomers.

Create another function that establishes our DataView object that will be utilized by the UI, name it LoadDataView.  In the data view we are setting a default paging to 10.  This can be changed at anytime which we will see in a later session.

jQueryExample.LoadDataView = function() {
    customers = $.ui.dataviewlocal({
        input: localCustomers,
        paging: {
            limit: 10
        }
    });
};

Now we need a function that will allow us to manipulate the data grid.  Create another function called LoadDataGrid.  The function should look like this:

jQueryExample.LoadDataGrid = function() {
    grid = $("#customers-local").grid({
        source: customers.result,
        refresh: function() {
            var paging = customers.options.paging,
                total = customers.totalCount;
            $(".paging-from").text(paging.offset + 1);
            var to = paging.offset + paging.limit + 1;
            if (to > total) {
                to = total;
            }
            $(".paging-to").text(to);
            $(".paging-total").text(total);
        }
    });

    grid.gridSelectable({
        selected: selected
    });
};

This function will select the grid ‘customes-local’ and save it to our grid global variable.  In this function we are settings the source to the dataviewlocal customers.  Setting up paging based off our default paging.

Finally we need to create the wire up function mentioned in the HTML section.  Create a new function called jQueryWireUp.   We will then call each of the functions that were just created above.  It should look like this:

jQueryExample.jQueryWireUp = function () {
    jQueryExample.GetAllCustomer();
    jQueryExample.LoadDataView();
    jQueryExample.LoadDataGrid();
   
    customers.refresh();
};

At the end we call customers.refresh();.  This is a base function that jQuery UI has added to the dataviewlocal object.  It tells the collection/grid to refresh and redisplay the data in the collection.

Run the application and navigate to http://localhost:60025/jQueryUILocal.htm (adjust port number as needed).  You should get a page that looks similar to the following:

• Add the following files to the project ChlodnyWebApi
• HTML page and name it jQueryUILocal.htm (to the main folder)
• JavaScript file and name is jQueryUIExampleLocal.js (to the scripts folder)

Since we are using the jQuery UI Grid (alpha build) we need to use the jQuery UI files from that project, the released version do not contain the references to the grid scripts.

First lets build out the content folder for our CSS files

• Create a new folder under Content and name it jqueryGrid
• In jqueryGrid create a folder named themes
• In jqueryGrid create a new css file named jQueryUICssLocal.css
• In the themes folder add another folder with the name base
• Under base add the following CSS files from the alpha build
  • jquery.ui.accordion.css
  • jquery.ui.all.css
  • jquery.ui.autocomplete.css
  • jquery.ui.base.css
  • jquery.ui.button.css
  • jquery.ui.core.css
  • jquery.ui.datapicker.css
  • jquery.ui.dialog.css
  • jquery.ui.grid.css
  • jquery.ui.menu.css
  • jquery.ui.progressbar.css
  • jquery.ui.resizable.css
  • jquery.ui.selectable.css
  • jquery.ui.slider.css
  • jquery.ui.spinner.css
  • jquery.ui.tabs.css
  • jquery.ui.theme.css
  • jquery.ui.tooltip.css

In the Scripts folder create a folder named jqueryGrid.
In that folder create another folder named ui. 
Copy the following files from the project copied from link above to the ui folder

• jquery.ui.button.js
• jquery.ui.core.js
• jquery.ui.dataview.js
• jquery.ui.dataviewlocal.js
• jquery.ui.dialog.js
• jquery.ui.grid.js
• jquery.ui.menu.js
• jquery.ui.mouse.js
• jquery.ui.observable.js
• jquery.ui.position.js
• jquery.ui.selectable.js
• jquery.ui.spinner.js
• jquery.ui.tooltip.js
• jquery.ui.widget.js

Copy the following files to the jqueryGrid folder

• dataview-odata.js
• globalize.js
• grid-filter.js
• grid-sort.js
• grid.selectable.js
• helpers.js
• jquery.mousewheel-3.0.4.js
• jquery.tmpl.js
• localstore.js
• navigator.js
• pager.js

Open the jqueryUILocal.htm we need to add our CSS and JS files to the file.  (before I get hate mail… please note that this is for demo purposes only, I know that some of these ways go against web standards and there are better/proper ways of doing things.)

You can either type in all the files needed or from solution explorer drag and drop them into the htm page.  Add CSS and jquery first.  After completed it should look similar to the following:

<head>
    <title>jQuery BABY (Local) !!!!</title>
    <link href="Content/jqueryGrid/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <link href="Content/jqueryGrid/jQueryUICssLocal.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/globalize.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/jquery.tmpl.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/jquery.mousewheel-3.0.4.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.core.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.button.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.spinner.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.tooltip.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.menu.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.position.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.dialog.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.mouse.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.selectable.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.observable.js" type="text/javascript"></script>    
    <script src="Scripts/jqueryGrid/ui/jquery.ui.dataview.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.dataviewlocal.js" type="text/javascript"></script> 
    <script src="Scripts/jqueryGrid/ui/jquery.ui.grid.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/dataview-odata.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/pager.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/grid-filter.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/grid-sort.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/grid.selectable.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/navigator.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/localstore.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/helpers.js" type="text/javascript"></script>
    <script src="Scripts/jQueryUIExampleLocal.js" type="text/javascript"></script>
</head>