Display hidden div in ASP.net page as a modal Dialog

In this approach you can load a content form the database (dynamic content) at the initial . page load to the div which going to display as a dialog  box when reqired .When it is not nessory to show you can hide it using CSS (display :none).

When the popup modal dialog is open ,the  content can be make visible by CSS

In the below example I have generated a HTML table from code behind at the page load to the pop up div and display as a modal dialog.I have added dynamic feature (column filter) using jQuery.

Using this approach you can avoid the performance delay of using separate .aspx page with i frame to load a dynamic content.


aspx page ,,,div


           <div  id="projectCreateDiv" style="width:500px ; display :none "  >
                           <asp:Table ID="testTable" runat="server"  ClientIDMode="Static" >
                           <asp:TableHeaderRow TableSection="TableHeader" >

                                 </asp:TableHeaderRow>
                              <asp:TableRow >
                                </asp:TableRow>
                            <asp:TableRow TableSection="TableFooter">
                            </asp:TableRow>
                           </asp:Table>
                      </div>
  <input id="Addtests0"
                          type="button" value="Add Test"  />


aspx page ,,,jquary


 $(function () {
                 $(document).on('click', '#Addtests0', function () {
                           $("#projectCreateDiv").css({ 'dispaly': 'block' });
                       var dialog_buttons = {};


                       $("#projectCreateDiv")
                            // ifreame has beeb commeted
                           //  .html($("<iframe />").attr("src", "billTestSelect.aspx").attr("style", "width:100%;height:400px"))
                           .dialog({
                               modal: true,
                               title: 'Add Test!',
                               show: 'slide',
                               hide: 'slide',
                               autoOpen: false,
                               width: '50%',
                               minHeight: '350'
                               //buttons: dialog_buttons
                           }).dialog('open');


                   });
});

there is no special action taken when closing the modal dialog since div property set to display none.

aspx.cs page generate table

  protected void Page_Load(object sender, EventArgs e)
        {

               if (!IsPostBack)
            {
                      createTestTb();
            }

         }

        protected void createTestTb()
        {


            con.Open();
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = con;

            testTable.Controls.Clear();

            TableHeaderRow rowHead = new TableHeaderRow();
            rowHead.TableSection = TableRowSection.TableHeader;

            TableHeaderCell cellNew4 = new TableHeaderCell();
            Label lblNew12 = new Label();
            lblNew12.Text = "test_ref_id";
            cellNew4.Controls.Add(lblNew12);
            cellNew4.Width = 50;
            rowHead.Controls.Add(cellNew4);

            TableHeaderCell cellNew6 = new TableHeaderCell();
            Label lblNew13 = new Label();
            lblNew13.Text = "Test Name";
            cellNew6.Controls.Add(lblNew13);
            cellNew6.Width = 300;
            rowHead.Controls.Add(cellNew6);

            TableHeaderCell cellNew5 = new TableHeaderCell();
            Label lblNew14 = new Label();
            lblNew14.Text = "Outsource";
            cellNew5.Controls.Add(lblNew14);
            cellNew5.Width = 50;
            rowHead.Controls.Add(cellNew5);

            TableHeaderCell cellNew7 = new TableHeaderCell();
            Label lblNew15 = new Label();
            lblNew15.Text = "Add";
            cellNew7.Controls.Add(lblNew15);
            cellNew7.Width = 50;
            rowHead.Controls.Add(cellNew7);

            testTable.Controls.Add(rowHead);




            cmd.CommandText = "SELECT test_id,test_name,test_profile_status,test_ref_id FROM test where test_status='active'";
            using (SqlDataReader rdr = cmd.ExecuteReader())
            {
                if (rdr.HasRows)
                {
                          while (rdr.Read())
                {
                    TableRow rowNew = new TableRow();
                    rowNew.TableSection = TableRowSection.TableBody;
                    testTable.Controls.Add(rowNew);

                    TableCell cellNew = new TableCell();
                    Label lblNew = new Label();
                    lblNew.Text = rdr["test_ref_id"].ToString();
                    cellNew.Controls.Add(lblNew);
                    rowNew.Controls.Add(cellNew);

                    TableCell cellNew3 = new TableCell();
                    Label lblNew3 = new Label();
                    lblNew3.Text = rdr["test_name"].ToString();
                    cellNew3.Controls.Add(lblNew3);
                    rowNew.Controls.Add(cellNew3);

                    TableCell cellNew1 = new TableCell();
                    DropDownList ddl = new DropDownList();
                    ddl.ClientIDMode = ClientIDMode.Static;
                    ddl.ID = "dropDown" + rdr["test_id"].ToString(); ;
                    ddl.Items.Add("In");
                    ddl.Items.Add("Out");
                    cellNew1.Controls.Add(ddl);
                    rowNew.Controls.Add(cellNew1);


                    TableCell cellNew2 = new TableCell();
                    Button button = new Button();
                    button.ClientIDMode = ClientIDMode.Static;
                    button.ID = "btn"+rdr["test_id"].ToString();
                    button.Text = "Add";
                    button.Attributes.Add("test_id", rdr["test_id"].ToString());
                    button.Attributes.Add("test_profile", rdr["test_profile_status"].ToString());
                    cellNew2.Controls.Add(button);
                    rowNew.Controls.Add(cellNew2);


                }
                }
         
            }
            cmd.Dispose();
            con.Close();

        }

Comments

Popular posts from this blog

ENOENT: no such file or directory, rename : node_modules/async

react-quill Integrate quill-image-resize-module