Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

For developers: Insert and update items

FormBinder control supports inserting and updating of items. Following the For developers: RESTful WCF services in Sitefinity, the same call to the service is used regardless if the item is being inserted or updated. Namely, if the item with the given key does not exist, a new item will be inserted. On the other hand, if the item with a specified identity (or primary key) exists, the item will be updated.

In this article we will explain and demonstrate how to insert new item and update existing item with FormBinder.

Having in mind the design of RESTful services, the item that we are about to insert needs to have its identity (or primary key) defined before we call the service. While this does not present a problem in majority of the cases, it does present a certain challenge when identity is a GUID. To overcome this, recommended approach is to set the primary key to an empty GUID and then generate a GUID on the server (WCF service). The following code represents the complete implementation of the insert/update functionality for FormBinder:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Stores.aspx.cs" Inherits="Stores" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="sitefinity" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title>Stores with Generic Collection client binder</title>
</head>
<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*" xmlns:code="http://schemas.microsoft.com/aspnet/code">
    <form id="form1" runat="server">
 
        <asp:ScriptManager ID="scriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Name="MicrosoftAjax.js" Path="~/Sitefinity/Scripts/MicrosoftAjax.js" />
                <asp:ScriptReference ScriptMode="Inherit" Path="~/Sitefinity/Scripts/MicrosoftAjaxTemplates.js" />
                <asp:ScriptReference ScriptMode="Inherit" Path="~/Sitefinity/Scripts/MicrosoftAjaxAdoNet.js" />
            </Scripts>
        </asp:ScriptManager>
 
        <select id="storesDropDown" runat="server">
        </select>
 
        <input type="button" onclick="OpenStore();" value="Open" />
        <input type="button" onclick="NewStore();" value="New store" />
 
        <sitefinity:GenericCollectionBinder id="storesBinder" runat="server"
            TargetId="storesDropDown"
            ServiceUrl="~/Sitefinity/Services/Commerce/Stores.svc"
            BindOnLoad="true"
            DataKeyNames="Id"
            DataMembers="Name, Id">
            <Containers>
                <sitefinity:BinderContainer ID="BinderContainer1" runat="server" RenderContainer="false" TemplateHolderTag="SELECT">
                    <option value="{{Id}}">{{Name}}</option>
                </sitefinity:BinderContainer>
            </Containers>
        </sitefinity:GenericCollectionBinder>
 
        <div id="storeForm" runat="server">
        </div>
 
        <sitefinity:FormBinder ID="storeFormBinder" runat="server"
            TargetId="storeForm"
            ServiceUrl="~/Sitefinity/Services/Commerce/Stores.svc"
            BindOnLoad="false"
            OnClientSaved="StoreSaved"
            DataKeyNames="Id"
            DataMembers="Id, Name, Description">
            <Containers>
                <sitefinity:BinderContainer ID="BinderContainer2" runat="server">
                    <fieldset>
                        <legend>Store info:</legend>
                        <ul>
                            <li>
                                Store name: 
                                <br />
                                <input name="Name" type="text" sys:value="{{Name}}" />
                            </li>
                            <li>
                                Store description:
                                <br />
                                <input name="Description" type="text" sys:value="{{Description}}" />
                            </li>
                        </ul>
                        <input type="button" sys:value="Save changes" onclick="SaveChanges();" />
                    </fieldset>
                </sitefinity:BinderContainer>
            </Containers>        
        </sitefinity:FormBinder>
 
        <script type="text/javascript">
            function OpenStore() {
                var storeId = $('#' + '<%= storesDropDown.ClientID %>').val();
                var storeFormBinder = $find('<%= storeFormBinder.ClientID %>');
                storeFormBinder.get_globalDataKeys()["Id"] = storeId;
                storeFormBinder.DataBind();
            }
 
            function NewStore() {
                var storeFormBinder = $find('<%= storeFormBinder.ClientID %>');
                storeFormBinder.get_globalDataKeys()["Id"] = storeFormBinder.GetEmptyGuid();
                storeFormBinder.DataBind();
            }
 
            function SaveChanges() {
                var storeFormBinder = $find('<%= storeFormBinder.ClientID %>');
                storeFormBinder.SaveChanges();
            }
 
            function StoreSaved() {
                var storeFormBinder = $find('<%= storeFormBinder.ClientID %>');
                storeFormBinder.ClearTarget();
 
                var storesBinder = $find('<%= storesBinder.ClientID %>');
                storesBinder.DataBind();
            }
 
        </script>
 
      
</body>
</html>

Defining the form

When declaring the form, the only thing you need to take ensure is that the form element which is used to set the value of a given property has the name attribute set to the name of the property. Let us examine the following two input elements we've used in our form:

<input name="Name" type="text" sys:value="{{Name}}" />
 
<input name="Description" type="text" sys:value="{{Description}}" />

Binder setup: If you are developing inside of the Sitefinity CMS admin area, it is not necessary to declare ScriptManager control or add anything to the body element, since all this has been implemented on the base Sitefinity CMS admin page.

By setting the first element's name attribute to value "Name" we have specified that the value of that input element will be used to populate the Name property of the Store data item. Similarly, we have set the name attribute of the second element to "Description", therefore instructing the binder to take the value of that element as the value of the Description property.

Updating an item

The process of updating an item is rather simple. All we need to do is open the item as we have demonstrated in this article. Once the user completes the changes and presses the "Save" button we call the SaveChanges javascript function which has the following implementation:

function SaveChanges() {
      var storeFormBinder = $find('<%= storeFormBinder.ClientID %>');
      storeFormBinder.SaveChanges();
}

When we have opened the item, we have set the identity (or primary) key of the item on the binder and therefore binder has all the information it needs.

function OpenStore() {
      var storeId = $('#' + '<%= storesDropDown.ClientID %>').val();
      var storeFormBinder = $find('<%= storeFormBinder.ClientID %>');
      storeFormBinder.get_globalDataKeys()["Id"] = storeId;
      storeFormBinder.DataBind();
}

Inserting a new item

To insert a new item, all we need to do is set the binder id under which we want to save the item (or to empty GUID in case we are working with the GUID identity) and bind the binder.

function NewStore() {
      var storeFormBinder = $find('<%= storeFormBinder.ClientID %>');
      storeFormBinder.get_globalDataKeys()["Id"] = storeFormBinder.GetEmptyGuid();
      storeFormBinder.DataBind();
}
Once we bind the binder with an non-existing identity, we will get an empty form in which user can enter the values. After clicking on the Save button, following function is being executed.

NOTE: To ease the process of getting the empty GUID on the client side, all client binder components implement GetEmptyGuid function, which returns a string representation of an empty guid.

function SaveChanges() {
      var storeFormBinder = $find('<%= storeFormBinder.ClientID %>');
      storeFormBinder.SaveChanges();
}

and the new item is saved.

Back To Top

Next: For developers: Delete form binder items