RESTful Methods ( GET / POST / PUT / DELETE )

Before we get going, it’s important to remember the following rules when building WCF Services.

1. The UriTemplate can only use parameters of type string
2. Uri Templates can have many forms, here are a few examples:

   Sample Uri Templates for .svc-less function calls

           [WebGet(UriTemplate = "Products/{name}")]
           public Product GetProduct(string name)
           // URL = "/InventoryService/Products/ProductXYZ"
   
           [WebGet(UriTemplate = "Products/Product({name})")]
           public Product GetProduct(string name)
           // URL = "/InventoryService/Products/Product(ProductXYZ)"
   
           [WebGet(UriTemplate = "Products/API.Service?Product={name}")]
           public Product GetProduct(string name)
           // URL = "/InventoryService/Products/API.Service?Product=ProductXYZ"
   

3. When passing multiple objects, you must make the following changes:

   WCF Service (Sending 1 object vs 2 objects)

           //  PASS 1 Object.
   
           [WebInvoke(UriTemplate = "Products/API.Service?Product={productName}", Method = "POST")]
           public string APIGet(string productName, Product product1)
   
           // Passing 2 Objects or more.
           // Added "BodyStyle = WebMessageBodyStyle.WrappedRequest".
   
           [WebInvoke(UriTemplate = "Products/API.Service?Product={productName}", Method = "POST", BodyStyle = WebMessageBodyStyle.WrappedRequest )]
           public string APIGet(string productName, Product product1, Product product2)
   

   jQuery Ajax Call (Sending 1 object vs 2 objects)

               // Common Objects to use in examples below
               var Product1 = {};
               Product1.Name = 'Name1';
               Product1.Description = 'Desc1';
               Product1.Price = 1.0;
               Product1.Quantity = 1;
               Product1.IsDiscontinued = false;
   
               var Product2 = {};
               Product2.Name = 'Name2';
               Product2.Description = 'Desc2';
               Product2.Price = 2.0;
               Product2.Quantity = 2;
               Product2.IsDiscontinued = false;
   
               //  PASS 1 Object.
               $.ajax({
                   type: 'POST',
                   url: '/InventoryService/Products/API.Service?Product=ProductXYZ',
                   contentType: 'application/json; charset=utf-8',
                   dataType: 'json',
                   data: JSON.stringify(Product1),  // Here we are sending the 1 object, no wrapper.
                   success: function (response)
                   {
                       // Do Something
                   }
               });
   
               // Passing 2 Objects or more.
   
               // Here we created a new jsonRequest object that wraps our 2 objects we want to send to our service.
               jsonRequest = { 'product1': Product1, 'product2': Product2 };
   
               $.ajax({
                   type: 'POST',
                   url: '/InventoryService/Products/API.Service?Product=ProductXYZ',
                   contentType: 'application/json; charset=utf-8',
                   dataType: 'json',
                   data: JSON.stringify(jsonRequest),  // Here we are sending a object that wraps our 2 product objects.
                   success: function (response)
                   {
                       // Do Something
                   }
               });
   

GET / POST / PUT / DELETE WCF Services and their jQuery Ajax Calls

GET Method

Service

        [WebGet(UriTemplate = "Products/{name}")]
        [OperationContract]
        public Product GetProduct(string name)
        {
            // Get a Product
        }

jQuery Call

                    var name = 'ProductXYZ';

                    $.ajax({
                        type: 'GET',
                        url: '/InventoryService/Products/' + name,
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        data: '',
                        success: function (response)
                        {
                            // Do Something
                        }
                    });

                    // Alternative to $.ajax for a GET request is using $.getJSON.
                    $.getJSON('/InventoryService/' + name, '', function (result) { // Do Something });

This is probably the simplest service call to issue, but the amazing jQuery team made the process even easier with the getJSON() call that wraps up a ajax() GET request. Notice the svc-less call above, there’s no ugly “.svc” telling your consumers… Hay, I’m using WCF!!!

POST Method

Service

        [WebGet(UriTemplate = "Products/{name}", Method = "POST")]
        [OperationContract]
        public Product GetProduct(string name, Product product)
        {
            // Insert New Product
        }

jQuery Call

                    var name = 'ProductXYZ';
                    var Product = {};
                    Product.Name = 'ProductXYZ';
                    Product.Description = 'Product XYZ Description';

                    $.ajax({
                        type: 'POST',
                        url: '/InventoryService/Products/' + name,
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        data: JSON.stringify(Product),
                        success: function (response)
                        {
                            // Do Something
                        }
                    });

This has always been my go to method for sending data to a service, but according to a few RESTful people this method is only supposed to be used for inserts. I’m not really sure how “firm” this rule is, so I decided to do all Inserts and Updates with the POST method, since I almost always handle this in the same function call in my DAL. In addition to posting my Object to the service, I also include the primary key (“PK”) in the service path so I can use the IIS logs to show who touched a specific record.

PUT Method

Service

        [WebInvoke(UriTemplate = "Products/{name}", Method = "PUT")]
        [OperationContract]
        public Product GetProduct(string name)
        {
            // Update Product
        }

jQuery Call

                    var name = 'ProductXYZ';
                    var Product = {};
                    Product.Name = 'ProductXYZ';
                    Product.Description = 'Product XYZ Description';

                    $.ajax({
                        type: 'PUT',
                        url: '/InventoryService/Products/' + name,
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        data: JSON.stringify(Product),
                        success: function (response)
                        {
                            // Do Something
                        }
                    });

I don’t use this much, but when I do the calls look exactly the same as a POST except for the change in request type.

DELETE Method

Service

        [WebGet(UriTemplate = "Products/{name}", Method = "DELETE")]
        [OperationContract]
        public bool GetProduct(string name)
        {
            // Delete Product
        }

jQuery Call

                    var name = 'ProductXYZ';

                    $.ajax({
                        type: 'DELETE',
                        url: '/InventoryService/Products/' + name,
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        data: '',
                        success: function (response)
                        {
                            // Do Something
                        }
                    });

Since I always like “confirmation” when something has been done, I always return a boolean from my delete services. This allows me to confirm something was able to be deleted, if you expect to have various failure states you might want to consider using a string return type to provide a detailed “error” message whey the request failed (e.g. “Successfully Deleted”, “You don’t have permission.”, “Product is associated with other orders.”).

Enough with the background, let’s start by creating a new “ASP.NET Web Application”.

1. Remove everything inside the Scripts folder.
2. Right Click on Project, and choose “Manage NuGet Packages…”

   Hopefully your familiar with NuGet, it’s a package manager for Visual Studio and you can install it by going to Tools -> Extension Manager… -> Online Gallery -> Download “NuGet Package Manager”. This is the most popular extension and it allows you to quickly add bits to your projects (e.g. Install jQuery, and be notified when a new version is available.).
   
   

3. Use search to install the following NuGet Packages.
   • jQuery
   • JSON-js json2

   
   
   

4. Edit your “site.master” to and include your new scripts:

   	   <script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
   	   <script src="Scripts/jquery-ui-1.8.19.js" type="text/javascript"></script>
   	   <script src="Scripts/jquery.validate.js" type="text/javascript"></script>
   	

5. Also in the “site.master”, edit your asp:Menu to include 4 pages called Part1 – Part4:

                   <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                       <Items>
                           <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                           <asp:MenuItem NavigateUrl="~/Part1.aspx" Text="Part 1"/>
                           <asp:MenuItem NavigateUrl="~/Part2.aspx" Text="Part 2" />
                           <asp:MenuItem NavigateUrl="~/Part3.aspx" Text="Part 3" />
                           <asp:MenuItem NavigateUrl="~/Part3.aspx" Text="Part 4" />
                           <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />
                       </Items>
                   </asp:Menu>
   	

   ** We are only going to use Part1.aspx right now, but I plan on 4 posts on this topic.
   

6. Add 4 new “Web Form using Master Page” to the project called Page1.aspx, Page2.aspx, Page3.aspx, Page4.aspx.
   ** These will match the named used in the navigation menu in the site.master.
   
7. Add a new folder to the root of the project called Service.
8. Add a new “AJAX-enabled WCF Service” to the Service folder called “InventoryService.svc”.
   • Note, this will add the following references to your project.

     	     System.Runtime.Serialization
     	     System.ServiceModel
     	     System.ServiceModel.Web
     	

   • It will also add the following lines to your Web.config

     	  <system.webServer>
     		 <modules runAllManagedModulesForAllRequests="true"/>
     	  </system.webServer>
     
     	  <system.serviceModel>
     		<behaviors>
     		  <endpointBehaviors>
     			<behavior name="RESTfulWCF.Service.Service1AspNetAjaxBehavior">
     			  <enableWebScript />
     			</behavior>
     		  </endpointBehaviors>
     		</behaviors>
     		<serviceHostingEnvironment aspNetCompatibilityEnabled="true"
     		  multipleSiteBindingsEnabled="true" />
     		<services>
     		  <service name="RESTfulWCF.Service.Service1">
     			<endpoint address="" behaviorConfiguration="RESTfulWCF.Service.Service1AspNetAjaxBehavior"
     			  binding="webHttpBinding" contract="RESTfulWCF.Service.Service1" />
     		  </service>
     		</services>
     	  </system.serviceModel>
     	

   • Change the “system.serviceModel” section of your web.config to the following.

     	    <system.serviceModel>
     	        <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
     	        <standardEndpoints>
     	            <webHttpEndpoint>
     	                <standardEndpoint name="" helpEnabled="true" automaticFormatSelectionEnabled="true"/>
     	            </webHttpEndpoint>
     	        </standardEndpoints>
     	    </system.serviceModel>
     	

     Web.Config Key Points

     	// This allows your services to run under your sites app pool, giving access
     	// to your HttpContext.
     	aspNetCompatibilityEnabled="true"
     	

     	// See below, this allows you to type <service>/help to get information on your service
     	helpEnabled="true"
     	

     	// This is AWESOME, this tag allows your service to respond in any format you
     	// specify in your request (e.g. XML, JSON, etc...).
     	automaticFormatSelectionEnabled="true"
     	

     
     
     ** One last item to note, every time you add an additional AJAX service, it will edit your web.config and put back in the bad configuration. I strongly suggest you make a backup of your web.config, incase you run into problems in the future!!!

   • Manually add a project reference to System.ServiceModel.Activation.
9. At this point, your project in solution explorer should look like this:

   

10. Now, open InventoryService.svc and make the following changes:
    • Erase everything and add the following C# code:

      using System.ServiceModel;
      using System.ServiceModel.Activation;
      using System.ServiceModel.Web;
      
      namespace RESTfulWCF.Service
      {
          [ServiceContract(Namespace = "")]
          [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
          public class InventoryService
          {
              [WebGet(UriTemplate = "Part1")]
              [OperationContract]
              public string Part1GetRequest()
              {
                  return "I did work";
              }
          }
      }
      	

      In the code above, we are mapping the function “Part1GetRequest” to the name “Part1″. This will allow us to call the service with the following syntax “/InventoryService/Part1″ using a GET request.
      

11. Add a route to call the service without referencing a “.svc” file.
    Open Global.asax and replace your Applicaiton_Start with the following.

            void Application_Start(object sender, EventArgs e)
            {
                // Code that runs on application startup
                RouteTable.Routes.Add(new ServiceRoute("InventoryService", new WebServiceHostFactory(), typeof(Service.InventoryService)));
            }
    	

12. Now we are ready to create a jQuery test call, open “Page1.aspx” in Source View:

    Erase everything and add the following HTML code

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Part1.aspx.cs" Inherits="RESTfulWCF.Part1" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <script type="text/javascript">
            $(document).ready(function ()
            {
                $('#doWork').click(function ()
                {
                    $.getJSON('/InventoryService/Part1', '', function (result) { alert(result); });
                });
            });
        </script>
        <h2>
            ASP.NET 4.0 WCF RESTful Demo - Part 1
        </h2>
        <p>
            <input type="button" id="doWork" value="Issue GET Request" />
        </p>
    </asp:Content>
    	

    We are able to use the $.getJSON() jQuery function because we applied the “WebGet” attribute to the WCF function “Part1GetRequest()”.
    

13. Launch the application and navigate to “Page 1″. Click on the “Issue GET Request” button and you should see the followign results:

    

14. To get a list of all the functions your service offers, pass the “/help” parameter to your service.

    

As noted, here is the project I built above following all the steps one-by-one.
    >> ASP.NET 4.0 RESTful Web Application Project

Solution Goals

1. Allow users to add 1 to 2,000 rows
2. Keep the page quick when working with 500+ rows
3. Make all edits in memory
4. Create a Undo/Cancel button to undo a edit
5. Capture dynamic HTML TABLE row contents for use in a server side postback
6. (Not in DEMO) Enable validation for rows in Edit Mode
7. (Not in DEMO) Enable default values for manually added rows

All of the goals above were in the final solution and 95% of the work is done client-side in ~300 lines of jQuery & JavaScript code. I choose to use jQuery templates for the rows, since it offers a simple model for merging data/HTML along with some advanced features to perform logic in how elements are rendered (e.g. If my Cross object has a Status set, it will display an alert icon on the row and notify the user something in wrong). Since most of these other features were case specific, I left them out of the demo to focus on doing the basic CRUD in HTML and how I got the dynamic rows back to ASP.NET

Final Product

My solution was designed to leverage ASP.NET, but all of the code below is 100% HTML.  You can take this code and apply it to any table and choose to leverage any server technology you want.  Part of step 5 is ASP.NET specific, but this shows a neat trick for getting the HTML table rows back to the server so you can access them in a traditional ASP.NET postback event.

Step 1: Prerequisites (Accessible via CDN)

1. jQuery
2. jQuery tmpl plug-in
3. JSON.org library

    <!-- jQuery on GOOGLE CDN -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <!-- JSON.org on CDNJS CDN -->
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <!-- jQuery tmpl() plug-in on ASPNET CDN -->
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

Step 2: HTML Layout

<body>
    <h1>
        CRUD My Table</h1>
    <!-- Table where we will perform CRUD operations, data loaded via jQuery tmpl() -->
    <table id="CRUDthisTable" class="mediumTable">
        <thead>
            <tr class="rowHeader">
                <th></th>
                <th>Change Type </th>
                <th>Update Type </th>
                <th>Customer Part </th>
                <th>ROHM Part </th>
                <th>Rank Start </th>
                <th>Rank End </th>
                <th>Price </th>
                <th>UOM </th>
                <th>Apply Date </th>
                <th>Remarks </th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <!-- jQuery tmpl() Templates -->
    <!-- Edit Rows -->
    <script id="editRowTemplate" type="text/x-jquery-tmpl">
        <tr class="editRow">
            <td>
                <span id="cancel" name="cancel" tooltip="Cancel" class="ui-icon ui-icon-close CancelRow">Cancel</span>
                <span id="save" name="save" tooltip="Save" class="ui-icon ui-icon-disk SaveRow">Save</span>
            </td>
            <td>
                <select id="field1" name="field1" class="changeType">
                    <option></option>
                    <option>All</option>
                    <option>Part</option>
                    <option>Price</option>
                </select></td>
            <td>
                <select id="field2" name="field2" class="updateType">
                    <option></option>
                    <option>Add</option>
                    <option>Update</option>
                    <option>Delete</option>
                </select></td>
            <td>
                <input type="text" id="field3" name="field3" class="customerPart required part" value="${CustomerPart}" /></td>
            <td>
                <input type="text" id="field4" name="field4" class="rohmPart validROHMpart part" value="${ROHMPart}" /></td>
            <td>
                <input type="text" id="field5" name="field5" class="rankStart rank" value="${RankStart}" /></td>
            <td>
                <input type="text" id="field6" name="field6" class="rankEnd rank" value="${RankEnd}" /></td>
            <td>
                <input type="text" id="field7" name="field7" class="price required number" value="${Price}" /></td>
            <td>
                <select  id="field8" name="field8" class="uomType required">
                    <option></option>
                    <option>1</option>
                    <option>1000</option>
                </select></td>
            <td>
                <input type="text" id="field9" name="field9" class="applyDate required date" value="${ApplyDate}" /></td>
            <td>
                <input type="text" id="field10" name="field10"class="remarks" value="${Remarks}" /></td>
        </tr>
    </script>
    <!-- View Rows -->
    <script id="viewRowTemplate" type="text/x-jquery-tmpl">
        <tr>
            <td style="width:50px;">
                <span id="edit" name="edit" title="Edit" class="ui-icon ui-icon-pencil EditRow">Edit</span>
                <span id="delete" name="delete" title="Delete" class="ui-icon ui-icon-trash DeleteRow">Delete</span>
            </td>
            <td style="width:120px;">${ChangeType}</td>
            <td style="width:120px;">${UpdateType}</td>
            <td>${CustomerPart}</td>
            <td>${ROHMPart}</td>
            <td style="width:45px;">${RankStart}</td>
            <td style="width:45px;">${RankEnd}</td>
            <td>${Price}</td>
            <td style="width:64px;">${UOM}</td>
            <!-- **** TIP: Here we use a function to format the date mm/dd/yyyy -->
            <td style="width:80px;">${FormatDate(ApplyDate)}</td>
            <td>${Remarks}</td>
        </tr>
    </script>
</body>

Step 3: Example Loading Data ( NO CRUD Functionality )

        // Helper Function to Format Date in View Row
        function FormatDate(date)
        {
            return date.getMonth() + 1 + "/" + date.getDate() + "/" + date.getFullYear();
        }

        // After the DOM has loaded, take the sample data and inject it into the table using the View Row template.
        $(document).ready(function ()
        {
            // Sample Data - Could be returned via AJAX or could be manual rows added to the TABLE
            var crosses = [
            { "ChangeType": "All", "UpdateType": "Add", "CustomerPart": "1SS355TE-17", "ROHMPart": "1SS355TE-17", "RankStart": "", "RankEnd": "", "Price": 0.0151, "UOM": 1, "ApplyDate": new Date(1335337200000), "Remarks": "", "Status": null, "StatusNote": null },
            { "ChangeType": "All", "UpdateType": "Add", "CustomerPart": "RB160M-60TR", "ROHMPart": "RB160M-60TR", "RankStart": "", "RankEnd": "", "Price": 0.0605, "UOM": 1, "ApplyDate": new Date(1335337200000), "Remarks": "", "Status": null, "StatusNote": null },
            { "ChangeType": "All", "UpdateType": "Add", "CustomerPart": "RR264M-400TR", "ROHMPart": "RR264M-400TR", "RankStart": "", "RankEnd": "", "Price": 0.031, "UOM": 1, "ApplyDate": new Date(1335337200000), "Remarks": "", "Status": null, "StatusNote": null },
            { "ChangeType": "All", "UpdateType": "Add", "CustomerPart": "1SR154-400TE25", "ROHMPart": "1SR154-400TE25", "RankStart": "", "RankEnd": "", "Price": 0.0309, "UOM": 1, "ApplyDate": new Date(1335337200000), "Remarks": "", "Status": null, "StatusNote": null },
            { "ChangeType": "All", "UpdateType": "Add", "CustomerPart": "RF071M2STR", "ROHMPart": "RF071M2STR", "RankStart": "", "RankEnd": "", "Price": 0.0638, "UOM": 1, "ApplyDate": new Date(1335337200000), "Remarks": "", "Status": null, "StatusNote": null}];

            if (crosses) {
                $("#viewRowTemplate").tmpl(crosses).appendTo("#CRUDthisTable");
            }
        });

CRUD Table – Data Loaded no CRUD Functions Activated

** As you can see, I’m not using images links similar to the final product since I was aiming for simplicity.  If you want to use images, I suggest you use the jQuery UI icons as I did in the final product, they can easily be added to a span by adding two class values (e.g. class=”ui-icon ui-icon-close”).

Step 4: Enable CRUD

        // Global Parameters
        var rowNum = 1;
        var rowRemovedNum;
        var rowRemovedContents;

        // Read a row in Edit Mode into a Cross Object
        function GetEditRowObject()
        {
            var row = $('#CRUDthisTable tbody tr.editRow');

            var cross = {};

            cross.ChangeType = row.find('.changeType').val();
            cross.UpdateType = row.find('.updateType').val();
            cross.CustomerPart = row.find('.customerPart').val();
            cross.ROHMPart = row.find('.rohmPart').val();
            cross.RankStart = row.find('.rankStart').val();
            cross.RankEnd = row.find('.rankEnd').val();
            cross.Price = row.find('.price').val();
            cross.UOM = row.find('.uomType').val();
            var dateString = row.find('.applyDate').val();
            cross.ApplyDate = new Date(dateString);
            cross.Remarks = row.find('.remarks').val();

            return cross;
        }

        // Read a row in View Mode into a Cross Object
        function GetViewRowObject(rowNum)
        {
            var row = $('#CRUDthisTable tbody tr').eq(rowNum);

            var cross = {};

            cross.ChangeType = row.find('td:eq(1)').text();
            cross.UpdateType = row.find('td:eq(2)').text();
            cross.CustomerPart = row.find('td:eq(3)').text();
            cross.ROHMPart = row.find('td:eq(4)').text();
            cross.RankStart = row.find('td:eq(5)').text();
            cross.RankEnd = row.find('td:eq(6)').text();
            cross.Price = row.find('td:eq(7)').text();
            cross.UOM = row.find('td:eq(8)').text();
            cross.ApplyDate = row.find('td:eq(9)').text();
            cross.Remarks = row.find('td:eq(10)').text();

            return cross;
        }

        // Read all rows into Cross Object Array
        function GetAllViewRowsAsCrossObjects()
        {
            var crossTableRows = [];

            $('#CRUDthisTable tbody tr').each(function (index, value)
            {
                var row = GetViewRowObject(index);
                crossTableRows.push(row);
            });

            return crossTableRows;
        }

        // Check if any rows are in Edit Mode
        function IsExistingRowInEditMode()
        {
            var rowsInEditMode = $('#CRUDthisTable tbody tr.editRow').length;

            if (rowsInEditMode > 0) {
                alert('You have a row in Edit mode, please save or cancel the row changes before you continue.');
                return true;
            }

            return false;
        }

        // After the DOM has loaded, bind the CRUD events
        $(document).ready(function ()
            // Events
            $('.AddRow').click(function ()
            {
                if (IsExistingRowInEditMode())
                    return;

                rowRemovedNum = 0;
                rowRemovedContents = null;

                var data = { data: 1 };
                var output = $("#editRowTemplate").tmpl(data).html()

                $('#CRUDthisTable tbody').prepend('<tr class="editRow">' + output + '</tr>');
                var $rowEdit = $('#CRUDthisTable tbody tr.editRow');

                $('#CRUDthisTable tbody tr:first')[0].scrollIntoView();
            });

            $('.EditRow').live('click', function (e)
            {
                if (IsExistingRowInEditMode())
                    return;

                var row = $(this).parent().parent().parent().children().index($(this).parent().parent());

                var data = GetViewRowObject(row);

                var output = $("#editRowTemplate").tmpl(data).html()

                rowRemovedNum = row;
                rowRemovedContents = $('#CRUDthisTable tbody tr').eq(row).html();

                $('#CRUDthisTable tbody tr').eq(row).after('<tr class="editRow">' + output + '</tr>');

                var $editRow = $('#CRUDthisTable tbody tr.editRow');

                var changeType = $editRow.find('.changeType');
                $(changeType).val(data.ChangeType);

                var updateType = $editRow.find('.updateType');
                $(updateType).val(data.UpdateType);

                var uomType = $editRow.find('.uomType');
                $(uomType).val(data.UOM);

                $('#CRUDthisTable tbody tr').eq(row).remove();
            });

            $('.SaveRow').live('click', function (e)
            {
                var savedData = GetEditRowObject();

                var row = $(this).parent().parent().parent().children().index($(this).parent().parent());

                var output = $("#viewRowTemplate").tmpl(savedData).html();

                $('#CRUDthisTable tbody tr').eq(row).remove();

                var tableRows = $('#CRUDthisTable tbody tr').length;

                if (tableRows == 0 || row == 0) {
                    $('#CRUDthisTable tbody').prepend('<tr>' + output + '</tr>');
                }
                else {
                    $('#CRUDthisTable tbody tr').eq(row).before('<tr>' + output + '</tr>');
                }
            });

            $('.CancelRow').live('click', function (e)
            {
                var row = $(this).parent().parent().parent().children().index($(this).parent().parent());

                $('#CRUDthisTable tbody tr').eq(row).remove();

                if (rowRemovedContents)
                    $('#CRUDthisTable tbody tr').eq(row).before('<tr>' + rowRemovedContents + '</tr>');

                rowRemovedContents = null;
            });

            $('.DeleteRow').live('click', function (e)
            {
                e.preventDefault;
                $(this).parent().parent().remove();
            });
        });

Step 5: Ajax POST Table Contents to the Server (before button event)

There is a ton of ways to do this, but my goal was to allow users to edit the table and when they were all done with all their edits they could hit “Save” and everything would then be written to the DB. Since ASP.NET doesn’t give you access to dynamic table rows, I bound a AJAX post event to the “Save” button that sends the table contents to the server, stores in cache, and then uses the cache in the traditional postback “Save” event.

        // After the DOM has loaded, bind the ASP.NET save button
        $(document).ready(function ()
            $('#<%= btnSave.ClientID %>').click(function (e) {
                return PostTable();
            });
        }

        // Post all rows to the server and put into Cache
        function PostTable()
        {
            // Normally I'll get the ID from the QueryString, but it could also be grabbed from a hidden element in the form.
            var crossId = 1;
            var jsonRequest = { crosses: GetAllViewRowsAsCrossObjects(), crossId: crossId };

            $.ajax({
                type: 'POST',
                url: 'Demo.aspx/CacheTable',
                data: JSON.stringify(jsonRequest),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (data, text)
                {
                    return true;
                },
                error: function (request, status, error)
                {
                    return false;
                }
            });
        }

Important Note: If you want to access a page method via jQuery $.ajax(), then you must make the function static and pass the case sensitive parameters with the expected data type(s) in the ajax call.

    public partial class Demo: System.Web.UI.Page
    {
        private static string _cacheKey = "CacheTable_" + HttpContext.Current.User.Identity.Name;

        [WebMethod]
        public static void CacheTable(List<Cross> crosses, int crossId)
        {
            if (crosses != null && crosses.Count > 0)
            {
                HttpContext.Current.Cache.Remove(_cacheKey);
                HttpContext.Current.Cache.Insert(_cacheKey, crosses, null, DateTime.Now.AddSeconds(3600), Cache.NoSlidingExpiration);
            }
        }
    }

    // Custom Data Transfer Object (DTO)
    public class Cross
    {
        public string ChangeType { get; set; }
        public string UpdateType { get; set; }
        public string CustomerPart { get; set; }
        public string ROHMPart { get; set; }
        public string RankStart { get; set; }
        public string RankEnd { get; set; }
        public double Price { get; set; }
        public int UOM { get; set; }
        public DateTime ApplyDate { get; set; }
        public string Remarks { get; set; }
        public string Status { get; set; }
        public string StatusNote { get; set; }
    }

Working Demo of using jQuery to allow CRUD edits to a HTML TABLE.

ASP.NET Note **If you run into issues on the amount of rows you can postback to the server in ASP.NET via AJAX & JSON, you’ll need to edit your “maxJsonLength” in your web.config.

    <system.web.extensions>
        <scripting>
            <webServices>
                <jsonSerialization maxJsonLength="2097152"/>
            </webServices>
        </scripting>
    </system.web.extensions>

Generating Random Passwords

using System;
using System.Collections.Generic;
using System.Linq;

public static class StringHelper
{
    // Shared Static Random Generator
    private static readonly Random CommonRandom = new Random();

    public static string GenerateRandomPassword(int passwordLength, bool canRepeatCharacters = false)
    {
        char[] chars = "$%#@!*abcdefghijklmnopqrstuvwxyz1234567890?;:ABCDEFGHIJKLMNOPQRSTUVWXYZ^&".ToCharArray();

        string randomPassword = string.Empty;

        for (int l = 0; l < passwordLength; l++)
        {
            int x = CommonRandom.Next(1, chars.Length);

            if (canRepeatCharacters || !randomPassword.ToCharArray().Any(ch => ch == chars[x]))
                randomPassword += chars[x].ToString();
            else
                l--;
        }

        return randomPassword;
    }

    public static List<string> GenerateRandomPasswords(int quantity, int passwordLength = 8)
    {
        List<string> passwords = new List<string>();

        for (int i = 0; i < quantity; i++)
        {
            passwords.Add(GenerateRandomPassword(passwordLength));
        }

        return passwords;
    }
}

There are a few options on the generator, like not repeating a character and configuring the password length. In addition to the main method, I also have a helper that also returns a list of multiple passwords, to return in a list to give your users options.

Important note, Random() is not very random when your making quick consecutive calls. If you want to call Random() in a loop, you should move your instance of the Random() class to the outside to prevent duplicate seeds, which will result in duplicate passwords.

    public static string GetCallsignSpelling(string password)
    {
        if (string.IsNullOrEmpty(password))
            return string.Empty;

        Dictionary<char, string> callsigns = new Dictionary<char, string>()
            {
                {'$',"Dollar Symbol"},
                {'%',"Percent Symbol"},
                {'#',"Number Symbol"},
                {'@',"At Symbol"},
                {'!',"Exclamation Symbol"},
                {'*',"Asterisk Symbol"},
                {'a',"alpha"},
                {'b',"bravo"},
                {'c',"charlie"},
                {'d',"delta"},
                {'e',"echo"},
                {'f',"foxtrot"},
                {'g',"golf"},
                {'h',"hotel"},
                {'i',"india"},
                {'j',"juliet"},
                {'k',"kilo"},
                {'l',"lima"},
                {'m',"mike"},
                {'n',"november"},
                {'o',"oscar"},
                {'p',"papa"},
                {'q',"quebec"},
                {'r',"romeo"},
                {'s',"sierra"},
                {'t',"tango"},
                {'u',"uniform"},
                {'v',"victor"},
                {'w',"whiskey"},
                {'x',"xray"},
                {'y',"yankee"},
                {'z',"zulu"},
                {'1',"One"},
                {'2',"Two"},
                {'3',"Three"},
                {'4',"Four"},
                {'5',"Five"},
                {'6',"Six"},
                {'7',"Seven"},
                {'8',"Eight"},
                {'9',"Nine"},
                {'0',"Zero"},
                {'?',"Question Symbol"},
                {';',"SemiColon Symbol"},
                {':',"Colon Symbol"},
                {'A',"ALPHA"},
                {'B',"BRAVO"},
                {'C',"CHARLIE"},
                {'D',"DELTA"},
                {'E',"ECHO"},
                {'F',"FOXTROT"},
                {'G',"GOLF"},
                {'H',"HOTEL"},
                {'I',"INDIA"},
                {'J',"JULIET"},
                {'K',"KILO"},
                {'L',"LIMA"},
                {'M',"MIKE"},
                {'N',"NOVEMBER"},
                {'O',"OSCAR"},
                {'P',"PAPA"},
                {'Q',"QUEBEC"},
                {'R',"ROMEO"},
                {'S',"SIERRA"},
                {'T',"TANGO"},
                {'U',"UNIFORM"},
                {'V',"VICTOR"},
                {'W',"WHISKEY"},
                {'X',"XRAY"},
                {'Y',"YANKEE"},
                {'Z',"ZULU"},
                {'^',"Caret Symbol"},
                {'&',"Ampersand Symbol"}
            };

        char[] wordCharacters = password.ToCharArray();

        string callsignSpelling =
            wordCharacters.Aggregate(string.Empty,
                                         (current, passwordCharacter) =>
                                         current + (callsigns[passwordCharacter] + " - ")).TrimEnd(' ', '-');

        return callsignSpelling;
    }

The spelling is done using a Key/Value dictionary, and iterating over each character of the password one-by-one.

The result of using these two helpers is below.

Demo Screenshot

In the image above, we use an inline object that will feed the dForm “buildForm()” method. I’m using a static value here, but you could have easily setup dForm to load the data remotely using ajax.

Here is the jQuery dForm 0.1.3 Plug-in Demo used in the screenshot above, which includes everything you need to get up and running fast. If you have problems making dForm work, make sure you have included “ALL” the dForm libraries. The dForm.js file has dependencies on the other libraries, if you don’t load the correct libraries, you’ll end up with a blank form.

Here is an example of what it looks like.

** The text after the heading, is the code that was used to trigger the message box.

The control is pretty straight forward, on the server it works by “re-injecting” the rendered control when you call Show function. Since the control does not use viewstate, every time you post back to the server and call show again, the last message disappears and the new message is displayed. If you want the message to disappear “automatically” after a few seconds, you can can set the timeout in milliseconds. On the client (via JavaScript), you can create a simple function that will provide access to throwing alerts from the client without a postback.

Client Side Example

    <script type="text/javascript">
        function ShowSuccess(message) {
            $alert = $('#MBWrapper1');

            $alert.removeClass().addClass('MessageBoxInterface');
            $alert.children('p').remove();
            $alert.append('<p>' + message + '</p>').addClass('successMsg').show().delay(8000).slideUp(300);
        }
    </script>

Server Side Example

    public partial class _Default : System.Web.UI.Page
    {
        protected void Success_Click(object sender, EventArgs e)
        {
            MessageBox1.ShowSuccess("Success, page processed.", 5000);
        }
    }

ASP.NET MessageBox User Control – Full Working Demo

Download and try the demo, if you like what you see… Here is what you need to include to make the control work in your project.

• MessageBox User Control (ASMX & CS)
• jQuery
• IMessageBox.css stylesheet
• All the graphics from the Images folder

** Note: If you move the images into a different directory, you’ll need to update the CSS to use the correct path to the images.

1. Create a hidden field (that has a text property)

<select size="5" id="users">
    <option value="Kelly">Kelly</option>
    <option value="Kylee">Kylee</option>
    <option value="Nathan">Nathan</option>
</select>

<input type="hidden" id="userList" runat="server" value="Kelly,Kylee,Nathan"/>

Here is how you would add/parse the client side change.

var $users = $('#users');
var $usersList = $('#usersList');

$users.append($('<option></option>').val('New Entry Value').html('New Entry Text'));

var newUserList = '';
var $options = $('#users').children('option');

$.each($options, function(index, value) {
	newUserList = newUserList + $options[index].value + ',';
}); 			

$usersList.val(newUserList.substr(0, newUserList.length-1));

** In this example, you maintain a hidden input element that matches the items in the select list. When you change the select list in JavaScript, you change the value of the hidden element. During post back, you read and parse this list to make your updates.

2. Wrap your lists in an update panel

<asp:UpdatePanel ID="UpdateRoles" runat="server">
    <ContentTemplate>
        <table>
            <tr>
                <td style="height: 180px; vertical-align: top;">
                    Active Roles<br />
                    <asp:ListBox ID="lstAdd" runat="server" Width="300px" OnSelectedIndexChanged="lstAdd_SelectedIndexChanged" Rows="10"></asp:ListBox>
                </td>
                <td style="height: 180px">
                    <asp:Button ID="AddRole" runat="server" Text="->" OnClick="AddRole_Click1" />
                    <br />
                    <asp:Button ID="RemoveRole" runat="server" Text="<-" OnClick="RemoveRole_Click" />
                </td>
                <td style="height: 180px; vertical-align: top;">
                    InActive Roles<br />
                    <asp:ListBox ID="lstRemove" runat="server" Width="300px" OnSelectedIndexChanged="lstRemove_SelectedIndexChanged" Rows="10"></asp:ListBox>
                </td>
            </tr>
        </table>
    </ContentTemplate>
</asp:UpdatePanel>

Here are the events that are fired when you click the Add / Remove buttons the move items between the lists.

        protected void AddRole_Click1(object sender, EventArgs e)
        {
            if (lstAdd.SelectedIndex > -1)
            {
                lstRemove.Items.Add(lstAdd.SelectedItem);
                lstAdd.Items.RemoveAt(lstAdd.SelectedIndex);
            }
        }

        protected void RemoveRole_Click(object sender, EventArgs e)
        {
            if (lstRemove.SelectedIndex > -1)
            {
                lstAdd.Items.Add(lstRemove.SelectedItem);
                lstRemove.Items.RemoveAt(lstRemove.SelectedIndex);
            }
        }

** You could fire the events using any type of event, in the sample I highlighting a item in one of the two lists and click Add/Remove to switch the items between the lists.

3. Post back using Ajax

This is currently my preferred approach, since it ride on top of jQuery Ajax and follows my normal design approach to building widgets (ajax load / add / edit / delete). Using this approach you can do real-time updates as they edit the list, or you can post back your entire form including all your list changes without a post back. There are so many options when you start using ajax calls to pass data back and forth between the client and server.

My example below is using a WCF service, you can also use ASMX to do this in earlier versions of .NET. This solution has a lot more steps, but it really encompasses a whole “form submit” vs. propagating your LIST changes to the server.

To start, I also build some simple objects to pass between the client & server. The objects go both ways and are defined as a DataContract in C#.

    [DataContract]
    public class Member
    {
        [DataMember]
        public int MemberId;

        [DataMember]
        public string CustomerCode;

        [DataMember]
        public string DelToCode;
    }

    [DataContract]
    public class Rule
    {
        [DataMember]
        public int RuleId;

        [DataMember]
        public string Name;

        [DataMember]
        public bool Enabled;

        [DataMember]
        public List<Member> Members;
    }

One we have an opject to pass, we define a method that will use this object.

    [OperationContract]
    [WebInvoke(
        RequestFormat = WebMessageFormat.Json,
        ResponseFormat = WebMessageFormat.Json,
        BodyStyle = WebMessageBodyStyle.WrappedRequest)
    ]
    bool UpdateRule(Rule rule);

    public bool UpdateRule(Rule rule)
    {
        // Do Update Using Object
    }

Next we build a form that will be used with our server, everything on the form can be build during page load or it can be populate via Ajax.

<fieldset class="withborder" id="manageRule">
<legend>Rule Update</legend>
<ol>
	<li>
		<label class="left">
			Rule ID<em>*</em></label>
		<input type="text" class="medium disabled" id="ruleId">
	</li>
	<li>
		<label class="left">
			Name<em>*</em></label>
		<input type="text" class="medium" maxlength="5" id="ruleName">
	</li>
	<li>
		<label class="left">
			Enabled<em>*</em></label>
		<input type="checkbox" class="checkBox" id="ruleEnabled" checked="checked">
	</li>
	<li>
		<label class="left">
			Assigned<em>*</em></label>
		<div>
			<div class="dropZone available">
				<ul class="connectedSortable ui-sortable" id="available" style="">
					<li id="MemberId_1" class="ui-state-highlight">Red</li>
					<li id="MemberId_2" class="ui-state-highlight">Green</li>
				</ul>
			</div>
			<div class="dropZone included">
				<ul class="connectedSortable ui-sortable" id="included" style="">
					<li id="MemberId_3" class="ui-state-highlight">Blue</li>
					<li id="MemberId_4" class="ui-state-highlight">Yellow</li>
					<li id="MemberId_5" class="ui-state-highlight">Orange</li>
				</ul>
			</div>
		</div>
	</li>
	<li style="text-align: right;">
		<input type="button" value="Update Rule" text="Add" id="updateRule">
	</li>
</ol>
</fieldset>

Finally, we put it all together with JavaScript function that uses jQuery and JSON.org’s libraries to build and transfer data between the client and sever.

    function UpdateRule() {
        var rule;

        rule.RuleId = parseInt($('#ruleId').val());
        rule.Name = $('#ruleName').val();
        rule.Enabled = $('#ruleEnabled').is(':checked');

        var $includedMembers = $('#included > li');

        rule.Members = [];

        // This is where you parse / add the values of your list (listbox, li, etc...)
        if ($includedMembers.length > 0) {
            $.each($includedMembers, function (index, value) {
                var id = $includedMembers[index].id.replace('MemberId_', '');
                var name = $includedMembers[index].firstChild.data.split(' - ');
                var member = { 'CustomerCode': name[0], 'DelToCode': name[1], 'MemberId': id };
                rule.Members.push(member);
            });
        }

        $.ajax({
            url: '/Service/ExampleWCFService.svc/UpdateRule',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: 'POST',
            data: JSON.stringify({ 'rule': rule }),
            success: function (rule) {
                // Do Something On Success
            }
        });
    }

** Don’t forget, you could have your service store this data in the cache/session/etc… if you don’t want to store it real-time. In my sample, I send the whole form to be process and not just the list. This gets rid of the entire post back process.

Each has it’s own unique requirements, the only one I tend not to use anymore is #2 since it requires the addition of the ASP.NET Ajax Library. Having an additional library and added content in a project for this one feature isn’t worth it to me. I know the library has got more compact, but in general it’s quite heavy (size wise), and since I already “always” include jQuery there really isn’t a need for this baggage.

<html>
<head>
    <title>Demo - Covnert JSON to CSV</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="https://github.com/douglascrockford/JSON-js/raw/master/json2.js"></script>

    <script type="text/javascript">
		// JSON to CSV Converter
        function ConvertToCSV(objArray) {
            var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
            var str = '';

            for (var i = 0; i < array.length; i++) {
                var line = '';
                for (var index in array[i]) {
                    if (line != '') line += ','

                    line += array[i][index];
                }

                str += line + '\r\n';
            }

            return str;
        }

		// Example
        $(document).ready(function () {

			// Create Object
            var items = [
				  { name: "Item 1", color: "Green", size: "X-Large" },
				  { name: "Item 2", color: "Green", size: "X-Large" },
				  { name: "Item 3", color: "Green", size: "X-Large" }];

			// Convert Object to JSON
			var jsonObject = JSON.stringify(items);

			// Display JSON
            $('#json').text(jsonObject);

			// Convert JSON to CSV & Display CSV
            $('#csv').text(ConvertToCSV(jsonObject));
        });
    </script>
</head>
<body>
    <h1>
        JSON</h1>
    <pre id="json"></pre>
    <h1>
        CSV</h1>
    <pre id="csv"></pre>
</body>
</html>

Here is the output using the script and above.

JSON

Created with “JSON.stringify()” function from json.org.

[{"name":"Item 1","color":"Green","size":"X-Large"},{"name":"Item 2","color":"Green","size":"X-Large"},{"name":"Item 3","color":"Green","size":"X-Large"}]

CSV

Created with “ConvertToCSV()” function I created above.

Item 1,Green,X-Large
Item 2,Green,X-Large
Item 3,Green,X-Large

        /// <summary>
        /// Compare values of two SubSonic objects for differences.  You can also pass an exclusion list
        /// of columns/properties to exclude,  like a primary key or CreatedOn date.
        /// </summary>
        /// <param name="comparableObject">Object to Compare</param>
        /// <param name="ignoreColumnList">Comma separated list of ColumnNames to ignore</param>
        /// <returns></returns>
        public bool ColumnsAreEqual(T comparableObject, string ignoreColumnList = null)
        {
            if (comparableObject == null)
                return false;

            // If ignore list is set, build array of column names to skip
            string[] ignoreColumnNames = new string[] {};
            if (ignoreColumnList != null && ignoreColumnList.IndexOf(',') > 0)
            {
                ignoreColumnNames = ignoreColumnList.Split(',');
            }

            foreach (TableSchema.TableColumnSetting setting in columnSettings)
            {
                // If there are columns to ignore, check the current ColumnName against ignore list and skip.
                if (ignoreColumnNames.Length > 0)
                {
                    bool ignored = false;

                    foreach (string ignoreColumnName in ignoreColumnNames)
                    {
                        if (ignoreColumnName.Trim().ToLower() == setting.ColumnName.ToLower())
                        {
                            ignored = true;
                            break;
                        }
                    }

                    // If this is a ignore column, skip.
                    if (ignored)
                    {
                        continue;
                    }
                }

                var before = setting.CurrentValue;
                var after = comparableObject.GetColumnValue<object>(setting.ColumnName);

                // If both are null, then they are equal
                if (before == null && after == null)
                    continue;

                // If one is null then they are not equal
                if (before == null || after == null)
                    return false;

                // Compare two non-null objects
                if (!before.Equals(after))
                    return false;
            }

            return true;
        }

// Example Usage
bool areEqual = before.Packaging.ColumnsAreEqual(after.Packaging,"PackagingId,CreatedOn,ModifiedOn");

I came up with a T-SQL Optional Update Parameter solution, which is based on using the “COALESCE” function along with typed null values. Normally, you pass in a bunch of values and it returns the first non null value, but… There is a hidden gem, you can pass in typed null values and it will return null… Knowing this, I created the code below.

-- CREATE DEMO TABLE
CREATE TABLE [dbo].[Product](
	[PartNumber] [nvarchar](20) NULL,
	[Description] [nchar](20) NULL,
	[Comments] [nchar](20) NULL
) ON [PRIMARY];

GO

-- DEMO TABLE DATA
PRINT '';
PRINT 'INSERT SAMPLE DATA';
PRINT '---------------------------------------------------------- '
INSERT INTO [PRODUCT] VALUES (N'PART1', N'PART 1 Description', N'PART 1 Comment');

GO

-- CREATE DEMO PROCEDURE
CREATE PROCEDURE [dbo].[spProduct_Update]
	@PartNumber AS NVARCHAR(20),
	@Description AS NCHAR(20),
	@Comments AS NCHAR(20)
AS
BEGIN
	DECLARE @BEFORE AS NVARCHAR(200);
	DECLARE @AFTER AS NVARCHAR(200);

	SELECT @BEFORE = 'BEFORE: ' + [PartNumber] + '  |  ' + [Description] + '  |  ' + [Comments] FROM [Product] WHERE [PartNumber] = @PartNumber;

	UPDATE [Product]
		SET [Description] = COALESCE(@Description,[Description]),
			[Comments] = COALESCE(@Comments,[Comments])
	WHERE [PartNumber] = @PartNumber;

	SELECT @AFTER = ' AFTER: ' + [PartNumber] + '  |  ' + [Description] + '  |  ' + [Comments] FROM [Product] WHERE [PartNumber] = @PartNumber;

	PRINT @BEFORE;
	PRINT @AFTER;

END

GO

-- Fails : Both values are non-typed null values
PRINT '';
PRINT '';
PRINT 'FAIL = COALESCE(null,null)';  --2 non-typed null value

GO

DECLARE @MyField AS NVARCHAR(50);
SET @MyField = COALESCE(null, null);
PRINT @MyField;

GO

-- Pass : The second value is a typed null value
PRINT '';
PRINT '';
PRINT 'PASS = COALESCE(null,<typed null parameter>)';  --1 non-typed null value, 1 typed null value

GO

DECLARE @MyField AS NVARCHAR(50);
DECLARE @MyTypedParameter AS NVARCHAR(50);
SET @MyField = COALESCE(null, @MyTypedParameter);
PRINT @MyField;

GO

-- Using the COALESCE with a typed parameter to create an optional "column" update.
PRINT '';
PRINT '---------------------------------------------------------- '
PRINT 'NO UPDATES';
EXEC spProduct_Update 'PART1', null, null;

PRINT '';
PRINT '---------------------------------------------------------- '
PRINT 'UPDATE DESCRIPTION ONLY';
EXEC spProduct_Update 'PART1', 'PART 1 *** UPDATE DESCRIPTION ***', null;

PRINT '';
PRINT '---------------------------------------------------------- '
PRINT 'UPDATE COMMENTS ONLY';
EXEC spProduct_Update 'PART1', null, 'PART 1 *** UPDATE COMMENT ***';

PRINT '';
PRINT '---------------------------------------------------------- '
PRINT 'UPDATE DESCRIPTION & COMMENTS';
EXEC spProduct_Update 'PART1', '*** UPDATE BOTH ***', '*** UPDATE BOTH ***';

-- DELETE DEMO PROCEDURE
DROP PROCEDURE [dbo].[spProduct_Update];

GO

-- DELETE DEMO TABLE
DROP TABLE [dbo].[Product];

GO

In a nutshell, we can only use COALESCE with typed nullable values… this means COALESCE(null,null,null) will fail because null is not a defined type, but COALESCE(@nullvalue, @nullvalue, @nullvalue) will work since we had to declare a type of @nullvalue [e.g. DECLARE @nullvalue AS nvarchar(20)]

INSERT SAMPLE DATA
----------------------------------------------------------
(1 row(s) affected)

FAIL = COALESCE(null,null)
Msg 4127, Level 16, State 1, Line 3
At least one of the arguments to COALESCE must be a typed NULL.

PASS = COALESCE(null,<typed null parameter>)

----------------------------------------------------------
NO UPDATES

(1 row(s) affected)
BEFORE: PART1  |  PART 1 Description    |  PART 1 Comment
 AFTER: PART1  |  PART 1 Description    |  PART 1 Comment      

----------------------------------------------------------
UPDATE DESCRIPTION ONLY

(1 row(s) affected)
BEFORE: PART1  |  PART 1 Description    |  PART 1 Comment
 AFTER: PART1  |  PART 1 *** UPDATE DE  |  PART 1 Comment      

----------------------------------------------------------
UPDATE COMMENTS ONLY

(1 row(s) affected)
BEFORE: PART1  |  PART 1 *** UPDATE DE  |  PART 1 Comment
 AFTER: PART1  |  PART 1 *** UPDATE DE  |  PART 1 *** UPDATE CO

----------------------------------------------------------
UPDATE DESCRIPTION & COMMENTS

(1 row(s) affected)
BEFORE: PART1  |  PART 1 *** UPDATE DE  |  PART 1 *** UPDATE CO
 AFTER: PART1  |  *** UPDATE BOTH ***   |  *** UPDATE BOTH ***