ComponentOne Extender Controls for ASP.NET Web Forms
Wijmo Control Toolkit Extender Controls / C1DataSource / C1DataSource Tutorial / Step 1 of 3: Adding C1DataSource to the Page
In This Topic
    Step 1 of 3: Adding C1DataSource to the Page
    In This Topic

    In this step you'll add a C1ListExtender control and a C1DataSource class containing a reader and proxy to the page.

    Complete the following steps:

    1.       In Visual Studio select File | New Project.

    2.       In the New Project dialog box, choose a language and then Web from the list of installed templates. Choose the ASP.NET Empty Web Application, name your application and choose OK.

    3.       In the Solution Explorer, right-click the project name and choose Add | New Item.

    4.       In the Add New Item dialog box choose Web Form from the list of templates, name the file "Default.aspx", and click Add.

    5.       In the Solution Explorer, right-click the project and choose Add Reference. Locate and add a reference to the C1.Web.Wijmo.Extenders assembly.

    6.       Switch to Source view, and add the following markup at the top of the page to register the assembly:

    <%@ Register assembly="C1.Web.Wijmo.Extenders.4" namespace="C1.Web.Wijmo.Extenders.C1DataSource" tagPrefix="cc1" %>

    <%@ Register assembly="C1.Web.Wijmo.Extenders.4" namespace="C1.Web.Wijmo.Extenders.C1List" tagPrefix="cc1" %>

    Note that you may need to edit the above depending on the assembly you are using.

    7.       Add the following markup between the initial <div></div> tags on the page:

    <cc1:C1DataSource ID="DataSource1" runat="server" onclientloaded="datasource_loaded" onclientloading="datasource_loading">

        <Reader>

            <Fields>

                <cc1:ReaderField Name="label">

                    <Mapping Function="reader_mapping" />

                </cc1:ReaderField>

                <cc1:ReaderField Name="value">

                    <Mapping Name="name" />

                </cc1:ReaderField>

                <cc1:ReaderField Name="selected">

                    <DefaultValue ValueString="false" />

                </cc1:ReaderField>

            </Fields>

        </Reader>

        <Proxy>

            <Options>

                <cc1:ProxyField Name="url">

                    <Value NeedQuotes="True" ValueString="http://ws.geonames.org/searchJSON" />

                </cc1:ProxyField>

                <cc1:ProxyField Name="dataType">

                    <Value NeedQuotes="True" ValueString="jsonp" />

                </cc1:ProxyField>

                <cc1:ProxyField Name="data">

                    <Value ValueString="ajaxData" />

                </cc1:ProxyField>

                <cc1:ProxyField Name="key">

                    <Value NeedQuotes="True" ValueString="geonames" />

                </cc1:ProxyField>

            </Options>

        </Proxy>

    </cc1:C1DataSource>

    Notice that the C1DataSource markup includes tags for the Reader and Proxy.

    In the next step you'll add input controls and script to initialize elements of the application.