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.
<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" />
$(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.
{
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();
}
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
Post a Comment