Two Way Binding to Client Side Template Using ASP.NET AJAX 4.0

CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Introduction

In my previous article “Two Way Binding To Client Side Template in ASP.NET AJAX 4.0” we looked at how to bind data to a client side template. In this article we will look at how we can create some input controls and provide a list-detail (two way) kind of flow and selecting, updating and deleting the bound data to the database in AJAX 4.0 client templates.

To demonstrate the two operations in client side templates let us take ClientTemplateBindingDemoWebsite which we created in my previous article and extend it.

Selecting record in the Client Template and displaying the details

In the EmployeeUI.aspx of the website, go to the TR section of the “EmployeeTemplate” TBODY and set the sys:command attribute with value as “select” as shown in the below fig 1.0. You also set the pointer to the hand icon and provide an alternate record style to make it look good.

Fig 1.0

Now create a details section with a few input controls. The purpose of creating this section is to display the details of the selected record. Below is the HTML code:

       <h2>Detail Info</h2>

            <table id=”EmployeeDetailsTemplate” class=”sys-template”>

                <tr>

                    <td style=”width:85px”>

                        ID:

                    </td>

                    <td style=”width:435px”>

                        <asp:Label ID=”IDLabel” Text=”{binding ID}” runat=”server”></asp:Label>

                    </td>

                </tr>

                <tr>

                    <td style=”width:85px”>

                        First Name:</td>

                    <td style=”width:435px”>

                        <asp:TextBox ID=”FirstNameTextBox” Text=”{binding FirstName, mode=twoWay}” runat=”server”></asp:TextBox>

                    </td>

                </tr>

                <tr>

                    <td style=”width:85px”>

                        Last Name:</td>

                    <td style=”width:435px”>

                        <asp:TextBox ID=”LastNameTextBox” Text=”{binding LastName, mode=twoWay}” runat=”server”></asp:TextBox>

                    </td>

                </tr>

                <tr>

                    <td style=”width:85px”>

                        Age:</td>

                    <td style=”width:435px”>

                        <asp:TextBox ID=”AgeTextBox” Text=”{binding Age, mode=twoWay}” runat=”server”></asp:TextBox>

                    </td>

                </tr>

                <tr>

                    <td style=”width:85px”>

                        Salary:</td>

                    <td style=”width:435px”>

                        <asp:TextBox ID=”SalaryTextBox” Text=”{binding Salary, mode=twoWay}” runat=”server”></asp:TextBox>

                    </td>

                </tr>

                <tr>

                    <td style=”width:85px”>

                        Date Of Join:</td>

                    <td style=”width:435px”>

                        <asp:TextBox ID=”DateOfJoinTextBox” Text=”{binding JoiningDate, mode=twoWay, convert=formatDate}” runat=”server”></asp:TextBox>

&nbsp;(<strong>MM/dd/yyyy</strong>)</td>

                </tr>

</table>

Set the ID of the details table as “EmployeeDetailsTable” which we will be using in the JavaScript file to provide the datasource for the input controls.

In the ClientBinding.js file let us go and do the changes for displaying the default selected index and the selected row style. Create a style called “selected” in the Default.css and below is the code:

.selected

{

    border-width:thin;

    border-style:solid;

    border-color:Black;

    background-color:Orange;

}

Below is the javascript code for the add_init event.

var dataContext;

var employeeTemplate;

Sys.Application.add_init(DisplayEmployees);
function DisplayEmployees() {

    dataContext = $create(Sys.Data.AdoNetDataContext,

                            {

                                serviceUri: “EmployeeDataService.svc”

                            });
    employeeTemplate = $create(Sys.UI.DataView,

                            {

                                dataProvider: dataContext,

                                fetchOperation: “Employees”,

                                fetchParameters: { $orderby: “ID” },

                                autoFetch: true,

                                selectedItemClass: “selected”,

                                initialSelectedIndex: 0

                            },

                            null,

                            null,

                            $get(“EmployeeTemplate”));
    var employeeDetailsTemplate = $create(Sys.UI.DataView,

                                   null,

                                   {},

                                   null,

                                   $get(“EmployeeDetailsTemplate”));
    $create(Sys.Binding,

    {

        source: employeeTemplate,

        path: “selectedData”,

        target: employeeDetailsTemplate,

        targetProperty: “data”

    });

}

In the above code check the way “employeeDetailsTemplate” dataview is created from the “EmployeeDetailsTemplate” table and the binding is created by providing datasource source as employeeTemplate and target as employeeDetailsTemplate.

Fig 1.1 displays how the selected record is populated in the details section.

Fig 1.1

Also notice that when you change the data populated in the details section and tab out of the texbox notice the parent view is also updated with the changes. There are 4 binding modes available they are:

1. Sys.BindingMode.twoWay


2. Sys.BindingMode.oneWay


3. Sys.BindingMode.oneWayToSource


4. Sys.BindingMode.oneTime


5. Sys.BindingMode.auto

TwoWay binding mode is the default one.