ComponentOne Dialog for ASP.NET Web Forms
Task-Based Help / Creating a C1Dialog Control on the Client Side
In This Topic
    Creating a C1Dialog Control on the Client Side
    In This Topic

    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