ComponentOne ASP.NET Web Forms Edition
Task-Based Help / Creating a C1Dialog Control on the Client Side
Creating a C1Dialog Control on the Client Side

The C1Dialog control can be created and displayed on the client side. In this help, you will place a standard Button control and a standard PlaceHolder control on your page, use code to create the C1Dialog control, and display it using the button_click event.

Complete these steps:

  1. Add a standard PlaceHolder control and a standard Button control to an ASP.NET project.
  2. Switch to Source View and add the following script in the first <asp:Content> tag:

    To write code in Source View

    <!--jQuery References-->


        <script src="http://code.jquery.com/jquery-1.8.2.min.js"
        type="text/javascript"></script>    


        <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js"
        type="text/javascript"></script>

            <asp:PlaceHolder runat="server">    


        <script type="text/javascript">
            $(document).ready(function () {
            
                $("#<%=btnShowDialog.ClientID %>").click(function ()     


                    $("#<%=C1Dialog1.ClientID
        %>").c1dialog("open");    


                    return false;    


                });
            });

        </script>
            
        </asp:PlaceHolder>
  3. Still in the Source View, locate the markup for the Button control and the PlaceHolder control and edit it to resemble the following markup:

    To write code in Source View


    <asp:Button ID="btnShowDialog" runat="server" Text="Show Dialog Created At Run Time" />    

        
        <asp:PlaceHolder ID="C1Dialog1" runat="server"></asp:PlaceHolder>
  4. Right-click the Source View page and selece View Code from the menu.
  5. In Code View, add the following statement at the top of your page:

    To write code in Visual Basic

    Visual Basic
    Copy Code 
    Imports C1.Web.Wijmo.Controls.C1Dialog

    To write code in C#

    C#
    Copy Code 
    using C1.Web.Wijmo.Controls.C1Dialog;
  6. Add the following code to create the button_click event and to create the C1Dialog control:

    To write code in Visual Basic

    Visual Basic
    Copy Code 
    Protected Sub btnShow_Click(sender As Object, e As EventArgs) Handles btnShow.Click
        Dim dlg As C1Dialog = New C1Dialog()
        dlg.Title = "RunTime Dialog
        dlg.Modal = True
        dlg.Content = New MyTemplateClass()
        C1Dialog1.Controls.Add(dlg)
    End Sub

    To write code in C#

    C#
    Copy Code 
    protected void btnShow_Click(object sender, EventArgs e)
        {
            C1Dialog dlg = new C1Dialog();
            dlg.Title = "RunTime Dialog";
            dlg.Modal = true;
            dlg.Content = new MyTemplateClass();
            C1Dialog1.Controls.Add(dlg);
        }
  7. Begin a new class with the following code. This will be the template for your C1Dialog control:

    To write code in Visual Basic

    Visual Basic
    Copy Code 
    Public Class MyTemplateClass Implements ITemplate
                                                        
    Public Sub InstantiateIn(container As Control) Implements ITemplate.InstantiateIn
        Dim label As New Label()
        label.ID = "lblmyLabel"
        label.Text = "You are seeing a C1Dialog..!!"
                                                        
        Dim btnOK As New Button()
        btnOK.Text = "OK"

        container.Controls.Add(label)
        container.Controls.Add(btnOK)

        End Sub
                                                        
End Class

    To write code in C#

    C#
    Copy Code 
    public class MyTemplateClass : ITemplate
        {
            public void InstantiateIn(Control container)
            {
                Label label = new Label();
                label.ID = "lblmyLabel";
                label.Text = "You are seeing a C1Dialog..!!";
                Button btnOK = new Button();
                btnOK.Text = "OK";
                container.Controls.Add(label);
                container.Controls.Add(btnOK);
            }
}
  8. When you run your application it will resemble the following:

    C1Dialog

    On clicking the button, the C1Dialog should appear as in the following image:

    C1Dialog