[Solved] Bootstrap Modal Popup closed on ASP.Net DropDownList change

indradeo

SOLVED CLOSED ACTIVE ANSWERED
User: indradeo
Posted: on Nov 20, 2023 09:46 PM
Forum: ASP.Net Web Forms
Answer: 2
Views: 1252

While i have select DropDownList values then modal popup automatic closed.

namespace masterpg
{
    public partial class inbox : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                ClientScript.RegisterStartupScript(this.GetType(), "Popup", "openModal();", true);
                BindGrid();

            }
        }
        private void BindGrid()
        {
            string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
                using (SqlCommand cmd = new SqlCommand("SELECT * FROM req ", con))
                {
                    using (SqlDataAdapter da = new SqlDataAdapter(cmd))
                    {
                        DataTable dt = new DataTable();
                        da.Fill(dt);
                        GridView1.DataSource = dt;
                        GridView1.DataBind();
                    }
                }
            }
        }
        protected void Display(object sender, EventArgs e)
        {
            int rowIndex = Convert.ToInt32(((sender as LinkButton).NamingContainer as GridViewRow).RowIndex);
            GridViewRow row = GridView1.Rows[rowIndex];

            Id.Text = (row.FindControl("Id") as Label).Text;
            EmpCode.Text = (row.FindControl("EmpCode") as Label).Text; ;
            asst_typ.Text = (row.FindControl("asst_typ") as Label).Text;
            lcn.Text = (row.FindControl("lcn") as Label).Text;
            prps.Text = (row.FindControl("prps") as Label).Text;
            rmk.Text = (row.FindControl("rmk") as Label).Text;
            ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
        }
        protected void btnSave_Click(object sender, EventArgs e)
        {
            //Your Saving code.
        }
        protected void btnchk_Click(object sender, EventArgs e)
        {
            //Your Saving code.
        }
        public override void VerifyRenderingInServerForm(Control control)
        {
            /* Verifies that the control is rendered */
        }
        protected void DropDownList_Changed(object sender, EventArgs e)
        {
            if (ddlTest.SelectedItem.Value == "Available" || ddlTest.SelectedItem.Value == "Not_Available")
            {
                TextBox1.Visible = true;
                TextBox2.Visible = true;
                TextBox3.Visible = true;
            }
            else
            {
                TextBox1.Visible = false;
                TextBox2.Visible = false;
                TextBox3.Visible = false;
            }
        }
    }
}

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeFile="inbox.aspx.cs" Inherits="masterpg.inbox" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
        .auto-style2 { width: 1148px; }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
    <div class="container" style="width: 1598px; height: 691px; margin-left: 300px;">
        <tr>
            <td style="font-size: xx-small; background-color: #003366;" class="auto-style2">
                <asp:GridView ID="GridView1" runat="server" CssClass="table table-striped table-hover"
                    DataKeyNames="Id" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" Width="1580px">
                    <Columns>
                        <asp:TemplateField HeaderText="ID">
                            <ItemTemplate>
                                <asp:Label ID="Id" runat="server" Text='<%# Eval("Id") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Employee Id">
                            <ItemTemplate>
                                <asp:Label ID="EmpCode" runat="server" Text='<%# Eval("EmpCode") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Asset Name">
                            <ItemTemplate>
                                <asp:Label ID="asst_typ" runat="server" Text='<%# Eval("asst_typ") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Location">
                            <ItemTemplate>
                                <asp:Label ID="lcn" runat="server" Text='<%# Eval("lcn") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Purpose">
                            <ItemTemplate>
                                <asp:Label ID="prps" runat="server" Text='<%# Eval("prps") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Remark">
                            <ItemTemplate>
                                <asp:Label ID="rmk" runat="server" Text='<%# Eval("rmk") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Action">
                            <ItemTemplate>
                                <asp:LinkButton ID="lnkBtnEdit" runat="server" Text="View" CssClass="btn btn-info"
                                    OnClick="Display"></asp:LinkButton>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <FooterStyle BackColor="White" ForeColor="#000066" />
                    <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
                    <RowStyle ForeColor="#000066" />
                    <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
                    <SortedAscendingCellStyle BackColor="#F1F1F1" />
                    <SortedAscendingHeaderStyle BackColor="#007DBB" />
                    <SortedDescendingCellStyle BackColor="#CAC9C9" />
                    <SortedDescendingHeaderStyle BackColor="#00547E" />
                </asp:GridView>
            </td>
        </tr>
    </div>
    <div>
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            &times;</button>
                        <h4 class="modal-title">Requst Details</h4>
                    </div>
                    <div class="modal-body">
                        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                            <div class="form-group">
                                <font size='2'>
                                    <b>ID :</b>
                                    <asp:Label ID="Id" runat="server" Text="Id"></asp:Label>
                                    <br />
                                    <br />
                                    <b>Employee Id : </b>
                                    <asp:Label ID="EmpCode" runat="server" Text="EmpCode"></asp:Label>
                                </font>
                            </div>
                            <font size='2'>
                                <div class="form-group">
                                    <b>Asset Type : </b>
                                    <asp:Label ID="asst_typ" runat="server" Text=""></asp:Label>
                            </font>
                        </div>
                        <font size='2'>
                            <div class="form-group">
                                <b>Location : </b>
                                <asp:Label ID="lcn" runat="server" Text="lcn"></asp:Label>
                                , &nbsp;&nbsp;&nbsp;
                                <b>Purpose : </b>
                                <asp:Label ID="prps" runat="server" Text="prps"></asp:Label><br />
                                <br />
                                <b>Remark : </b>
                                <asp:Label ID="rmk" runat="server" Text="rmk"></asp:Label>
                                &nbsp;&nbsp;&nbsp;
                            </div>
                        </font>
                    </div>

                    <font size='2'>
                        <div class="form-group">
                            <b>Asset Status :
                                <asp:DropDownList ID="ddlTest" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList_Changed">
                                    <asp:ListItem Text="--Select --" Value="C" />
                                    <asp:ListItem Text="Available" Value="Available" />
                                    <asp:ListItem Text="Not_Available" Value="Not_Available" />

                                </asp:DropDownList>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <b>Intalation date : </b>
                                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                            </b>
                            <br />
                            <br />
                            <b>Asset Serial No. : </b>
                            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                            </b><br />
                            <br />
                            <b>Remark : </b>
                            <asp:TextBox ID="TextBox1" runat="server" Width="300px"></asp:TextBox>
                            &nbsp;&nbsp;&nbsp;
                        </div>
                    </font>
                </div>
                <div class="modal-footer">
                    <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" ToolTip='Click here to Save Data' CssClass="btn btn-info" />
                    <asp:Button ID="btnchk" runat="server" Text="Send" OnClick="btnchk_Click" ToolTip='Click here to Check Asset Details' CssClass="btn btn-info" />
                    <button type="button" class="btn btn-info" data-dismiss="modal">
                        Close</button>
                </div>
            </div>
        </div>
        <script type='text/javascript'>
            function openModal() {
                $('[id*=myModal]').modal('show');
            }
        </script>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 1

Reply
ANSWER
User: dharmendr
Replied: on Nov 20, 2023 09:51 PM
Report

Hi indradeo,

You need to reopen the modal popup after postback.

Call the below code on DropDownList_Changed event handler.

ClientScript.RegisterStartupScript(this.GetType(), "Popup", "openModal();", true);

protected void DropDownList_Changed(object sender, EventArgs e)
{
    if (ddlTest.SelectedItem.Value == "Available" || ddlTest.SelectedItem.Value == "Not_Available")
    {
        TextBox1.Visible = true;
        TextBox2.Visible = true;
        TextBox3.Visible = true;
    }
    else
    {
        TextBox1.Visible = false;
        TextBox2.Visible = false;
        TextBox3.Visible = false;
    }
    ClientScript.RegisterStartupScript(this.GetType(), "Popup", "openModal();", true);
}

steven

0 4

Reply
ANSWER
User: steven
Replied: on Nov 21, 2023 12:11 AM
Report

Hi indradeo

Please refer below sample code.

HTML

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="container" style="width: 1598px; height: 691px;">
        <tr>
            <td style="font-size: xx-small; background-color: #003366;" class="auto-style2">
                <asp:GridView ID="GridView1" runat="server" CssClass="table table-striped table-hover"
                    DataKeyNames="CustomerId" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" Width="1580px">
                    <Columns>
                        <asp:TemplateField HeaderText="CustomerId">
                            <ItemTemplate>
                                <asp:Label ID="CustomerId" runat="server" Text='<%# Eval("CustomerId") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Company Name">
                            <ItemTemplate>
                                <asp:Label ID="CompanyName" runat="server" Text='<%# Eval("CompanyName") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Contact Name">
                            <ItemTemplate>
                                <asp:Label ID="ContactName" runat="server" Text='<%# Eval("ContactName") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Address">
                            <ItemTemplate>
                                <asp:Label ID="Address" runat="server" Text='<%# Eval("Address") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="City">
                            <ItemTemplate>
                                <asp:Label ID="City" runat="server" Text='<%# Eval("City") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Country">
                            <ItemTemplate>
                                <asp:Label ID="Country" runat="server" Text='<%# Eval("Country") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Action">
                            <ItemTemplate>
                                <asp:LinkButton ID="lnkBtnEdit" runat="server" Text="View" CssClass="btn btn-info"
                                    OnClick="Display"></asp:LinkButton>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <FooterStyle BackColor="White" ForeColor="#000066" />
                    <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
                    <RowStyle ForeColor="#000066" />
                    <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
                    <SortedAscendingCellStyle BackColor="#F1F1F1" />
                    <SortedAscendingHeaderStyle BackColor="#007DBB" />
                    <SortedDescendingCellStyle BackColor="#CAC9C9" />
                    <SortedDescendingHeaderStyle BackColor="#00547E" />
                </asp:GridView>
            </td>
        </tr>
    </div>
    <div>
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            &times;</button>
                        <h4 class="modal-title">Requst Details</h4>
                    </div>
                    <div class="modal-body">
                        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                            <div class="form-group">
                                <font size='2'>
                                    <b>ID :</b>
                                    <asp:Label ID="Id" runat="server" Text="Id"></asp:Label>
                                    <br />
                                    <br />
                                    <b>Employee Id : </b>
                                    <asp:Label ID="EmpCode" runat="server" Text="EmpCode"></asp:Label>
                                </font>
                            </div>
                            <font size='2'>
                                <div class="form-group">
                                    <b>Asset Type : </b>
                                    <asp:Label ID="asst_typ" runat="server" Text=""></asp:Label>
                                    </div>
                            </font>
                        </div>
                        <font size='2'>
                            <div class="form-group">
                                <b>Location : </b>
                                <asp:Label ID="lcn" runat="server" Text="lcn"></asp:Label>
                                , &nbsp;&nbsp;&nbsp;
                                <b>Purpose : </b>
                                <asp:Label ID="prps" runat="server" Text="prps"></asp:Label><br />
                                <br />
                                <b>Remark : </b>
                                <asp:Label ID="rmk" runat="server" Text="rmk"></asp:Label>
                                &nbsp;&nbsp;&nbsp;
                            </div>
                        </font>
                    </div>

                    <font size='2'>
                        <div class="form-group">
                            <b>Asset Status :
                                <asp:DropDownList ID="ddlTest" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList_Changed">
                                    <asp:ListItem Text="--Select --" Value="C" />
                                    <asp:ListItem Text="Available" Value="Available" />
                                    <asp:ListItem Text="Not_Available" Value="Not_Available" />
 
                                </asp:DropDownList>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <b>Intalation date : </b>
                                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                            </b>
                            <br />
                            <br />
                            <b>Asset Serial No. : </b>
                            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                            </b><br />
                            <br />
                            <b>Remark : </b>
                            <asp:TextBox ID="TextBox1" runat="server" Width="300px"></asp:TextBox>
                            &nbsp;&nbsp;&nbsp;
                        </div>
                    </font>
                </div>
                <div class="modal-footer">
                    <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" ToolTip='Click here to Save Data' CssClass="btn btn-info" />
                    <asp:Button ID="btnchk" runat="server" Text="Send" OnClick="btnchk_Click" ToolTip='Click here to Check Asset Details' CssClass="btn btn-info" />
                    <button type="button" class="btn btn-info" data-dismiss="modal">
                        Close</button>
                </div>
            </div>
        </div>
        <script type='text/javascript'>
            function openModal() {
                $('[id*=myModal]').modal('show');
            }
        </script>
    </div>
</asp:Content>

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        ClientScript.RegisterStartupScript(this.GetType(), "Popup", "openModal();", true);
        BindGrid();

    }
}
private void BindGrid()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT TOP 5 * FROM Customers", con))
        {
            using (SqlDataAdapter da = new SqlDataAdapter(cmd))
            {
                DataTable dt = new DataTable();
                da.Fill(dt);
                GridView1.DataSource = dt;
                GridView1.DataBind();
            }
        }
    }
}
protected void Display(object sender, EventArgs e)
{
    int rowIndex = Convert.ToInt32(((sender as LinkButton).NamingContainer as GridViewRow).RowIndex);
    GridViewRow row = GridView1.Rows[rowIndex];

    Id.Text = (row.FindControl("CustomerId") as Label).Text;
    EmpCode.Text = (row.FindControl("CompanyName") as Label).Text; ;
    asst_typ.Text = (row.FindControl("ContactName") as Label).Text;
    lcn.Text = (row.FindControl("Address") as Label).Text;
    prps.Text = (row.FindControl("City") as Label).Text;
    rmk.Text = (row.FindControl("Country") as Label).Text;
    ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
}
protected void btnSave_Click(object sender, EventArgs e)
{
    //Your Saving code.
}
protected void btnchk_Click(object sender, EventArgs e)
{
    //Your Saving code.
}
public override void VerifyRenderingInServerForm(Control control)
{
    /* Verifies that the control is rendered */
}
protected void DropDownList_Changed(object sender, EventArgs e)
{
    if (ddlTest.SelectedItem.Value == "Available" || ddlTest.SelectedItem.Value == "Not_Available")
    {
        TextBox1.Visible = true;
        TextBox2.Visible = true;
        TextBox3.Visible = true;
    }
    else
    {
        TextBox1.Visible = false;
        TextBox2.Visible = false;
        TextBox3.Visible = false;
    }
    ClientScript.RegisterStartupScript(this.GetType(), "Popup", "openModal();", true);
}

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

[Solved] Bootstrap Modal Popup closed on ASP.Net DropDownList change

Company

Explore

Follow us

Contact Us