Insert multiple oData records with a single post

A few months ago I was playing around with some user interface ideas. I used the jQuery sortable which will save to my oData service after the user had made a change. This caused multiple posts to the database, depending on the amount of items added, removed or reordered should the user navigate away before it was all completed.
After some searching I found a way around this which I decided to play around with again today for a project I will be doing soon. The idea is to combine all the updates/inserts into a sequence and then submit it in a single post. This will make it a lot quicker and also have a lot less code to display a single message when all the updates are complete.

This post will not go into much detail about getting the whole lot set up, so here is what you need already set up:

• ASP.NET website building and running
• WCF Data Service set up to return values when queried through the browser
• MS AJAX Toolkit (Had to download the source to get all the .js libraries I needed)

For the sake of not struggling I copied all the files from the .\MS Ajax\SampleWebSites\AjaxClientWebSite\Scripts\MicrosoftAjax folder into my website’s Scripts folder and referenced only Start.debug.js (or Start.js for release). This takes care of loading all the rest of the required libraries.

My data service was called TestDataService.svc with a single table containing two columns since this was just the bare minimum to get my head around it again.

In my html page I have the following code to load, display and insert data.

    
    
        // We require this library
        Sys.require([Sys.components.dataView, Sys.components.openDataContext, Sys.components.openDataServiceProxy]);
        
        // A reference to our service
        var exampleService;

        // Page loaded and DOM ready
        Sys.onReady(function () {
            // Create the proxy to our data service
            exampleService = new Sys.Data.OpenDataServiceProxy("/TestDataService.svc");
            // Load the data from the service
            loadData();
        });

        function loadData() {
            // Query the service
            exampleService.query("/testTables", cbSuccess, cbFailure);
        }

        // Success callback for the loadData query
        function cbSuccess(result, context, operation, userContext) {
            // Clear the list
            $("#dbData").children().remove();
            // Add all the items from the database/service to the list
            $.each(result, function (index, row) {
                $("#dbData").append("<li>" + row.name + ": " + row.value + "</li>");
            });
        }

        // Failure callback for the loadData query
        function cbFailure() {
            alert("Error contacting service");
        }

        // Insert multiple recors into the database using a single post
        function insertMultiple() {
            // Sequence action for inserting data
            var actionSequence = exampleService.createActionSequence();
            // Creating 3 records
            for (var i = 0; i &lt; 3; i++) {
                var tmpData = {
                    name: "Sequence" + i, // Column name for the table
                    value: "" + i // Column name for the table
                };
                // Add the freshly create item to the sequence for testTable
                actionSequence.addInsertAction(tmpData, "/testTables");
            }
            // Execute the sequence
            actionSequence.execute(cbInsertComplete, "Inserted all three records");
        }

        // Success callback for the bulk insert
        function cbInsertComplete(results) {
            // Results returned after successful insert as _result. 
            $.each(results, function (index, row) {
                $("#dbData").append("<li>" + row._result.name + ": " + row._result.value + "</li>");
            });
        }
    

There is not much to the HTML

        <p>
            <ul id="dbData">
                        <!-- Data gets loaded here -->
            </ul>
        </p>
        <p>            
            <input id="Button2" type="button" value="Reload Data" onclick="loadData();" />
            <input id="Button1" type="button" value="Insert Data" onclick="insertMultiple();" />
        </p>

As you can see in the image below, when running this through FireBug you can see the first request to load the data which is currently empty, then there is a single post which posts the data and get the results back. We use the results to add the new data to the list.

This code is a very rough guide to executing a sequence of actions using oData services and should not be used as is in a live environment. No error checking is done and no best practices are followed in this post, it is purely the very basics to getting started.

If you would like more detailed information then please do contact me, I will be more than happy to help where I can.

jEditable Dropdown Text

I was stuck for a few minutes trying to figure out how to display the text of the selected item in the dropdown when using jEditable.

My script was querying an odata service (WCF Data Service) which returned a list of values with their ids.  I wanted this to be represented in a dropdown with the text displayed instead of the default “selected value”.  After struggling for a bit I came up with an idea, since someone else was struggling with the same problem I decided to create a post about it.

Here is my JavaScript code:

var settings = new Array(); // holds settings
function loadSettings(selected) {
    // loads the settings from the database via oData service
    $.ajax({
        type: "GET",
        url: "dataService.svc/Settings?$orderby=Code%20asc",
        data: {}, // required for Chrome
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false, // wait until it's done before setting up jEditable
        success: function (data) {
            /* Settings
             *   int SettingId (PK)
             *   string Title
             */
            // step through all the results
            $.each(data.d, function () {
                // add them to a hashtable
                settings[this.SettingId] = this.Title;
            });
            // check if a selected one was passed in
            if (selected != undefined)
                settings["selected"] = selected; // set the selected one
        },
        error: function (msg, a) {
            // call error method
            // TODO: Display correct error here by checking resulting code
            showError("ERROR: Could not load the settings from the database");
        }
    });

    // get the selected one's TEXT from the hashtable
    var set = settings[val];
    // TODO: Make this code better, use .append("<span />");
    $('#settings').html('<span id="ddSettings">' + set + '</span>');

    // setup field for inline editing
    $('#ddSettings').editable(function (value, settings) {
        saveSettings(value, docId, settings); // function to save settings
        return suffixes[value]; // return the text from the hastable
    }, 
    {
        data: settings, // my hashtable
        cancel: 'Cancel',
        placeholder: '---',
        submit: 'Save',
        tooltip: 'Click to edit',
        type: 'select',
        style: 'display: inline;'
    });
}

And my html:

<html>
<head>
    <script src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.jeditable.mini.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            loadSettings();  // load the settings dropdown
        });

        // put the JavaScript source from above in here
    </script>
</head>
    <body>
        Settings:&nbsp;<div id="settings"></div>
    </body>
</html>

I hope this will help someone get around this problem.

ETag value in header different from object ETag

This is more a note to self which will hopefully help someone.

The last couple of weeks I have been working on a web application that uses WCF Data Services (oData) and jQuery.  I started receiving the following error: "The etag value in the request header does not match with the current etag value of the object.".  After hours of struggling I found out that it was the oninsert trigger in my database causing the problem.  It seems that when you insert the data the trigger changes that and then it is different from what you inserted and it then throws an error instead of returning the record you have just inserted.