Keep Bootstrap modal open on ASP.Net DropDownList selection change

ramco1917
 
on Sep 29, 2022 11:20 PM
Sample_195091.zip
552 Views

Hi Dharmendr

[Solved] Bootstrap Modal Popup Closes on ASP.Net DropDownList change (selection)

Can't we use Update Panel. I am trying like below but it is not working.

<div class="form-horizontal">
    <div class="modal-body">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="form-group">
                            <label>KRA</label>&nbsp;<span style="color: red">*</span>
                            <asp:DropDownList ID="ddlKRA" class="form-control" runat="server" required="true" AutoPostBack="true"  OnSelectedIndexChanged="KRA_Changed">
                                <asp:ListItem Value="">Select KRA</asp:ListItem>
                            </asp:DropDownList>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="form-group">
                            <label>Sub KRA</label>&nbsp;<span style="color: red">*</span>
                            <asp:DropDownList ID="ddlSubKRA" class="form-control" runat="server" required="true">
                                <asp:ListItem Value="">Select Sub KRA</asp:ListItem>
                            </asp:DropDownList>
                        </div>
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
        <div class="row">

Thanks

Download FREE API for Word, Excel and PDF in ASP.Net: Download
KasimA
 
on Sep 30, 2022 05:44 AM
on Sep 30, 2022 06:04 AM

Hi ramco1917,

Please refer below sample.

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Select
</button>
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="form-horizontal">
                <div class="modal-body">
                    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label>KRA</label>&nbsp;<span style="color: red">*</span>
                                        <asp:DropDownList ID="ddlKRA" class="form-control" runat="server" required="true" AutoPostBack="true" OnSelectedIndexChanged="KRA_Changed">
                                            <asp:ListItem Value="">Select KRA</asp:ListItem>
                                        </asp:DropDownList>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label>Sub KRA</label>&nbsp;<span style="color: red">*</span>
                                        <asp:DropDownList ID="ddlSubKRA" class="form-control" runat="server" required="true">
                                            <asp:ListItem Value="">Select Sub KRA</asp:ListItem>
                                        </asp:DropDownList>
                                    </div>
                                </div>
                            </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                    <div class="row">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Namespaces

C#

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindDropDownList();
    }
}

private void BindDropDownList()
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT CountryId, CountryName FROM Countries", con))
        {
            con.Open();
            ddlKRA.DataSource = cmd.ExecuteReader();
            ddlKRA.DataTextField = "CountryName";
            ddlKRA.DataValueField = "CountryId";
            ddlKRA.DataBind();           
            con.Close();
        }
    }
}

protected void KRA_Changed(object sender, EventArgs e)
{
    int countryId = int.Parse(ddlKRA.SelectedValue);
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT StateId , StateName FROM States WHERE CountryId = @CountryId", con))
        {
            con.Open();
            cmd.Parameters.AddWithValue("@CountryId", countryId);
            ddlSubKRA.DataSource = cmd.ExecuteReader();
            ddlSubKRA.DataTextField = "StateName";
            ddlSubKRA.DataValueField = "StateName";
            ddlSubKRA.DataBind();            
            con.Close();
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.BindDropDownList()
    End If
End Sub

Private Sub BindDropDownList()
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        Using cmd As SqlCommand = New SqlCommand("SELECT CountryId, CountryName FROM Countries", con)
            con.Open()
            ddlKRA.DataSource = cmd.ExecuteReader()
            ddlKRA.DataTextField = "CountryName"
            ddlKRA.DataValueField = "CountryId"
            ddlKRA.DataBind()            
            con.Close()
        End Using
    End Using
End Sub

Protected Sub KRA_Changed(ByVal sender As Object, ByVal e As EventArgs)
    Dim countryId As Integer = Integer.Parse(ddlKRA.SelectedValue)
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        Using cmd As SqlCommand = New SqlCommand("SELECT StateId , StateName FROM States WHERE CountryId = @CountryId", con)
            con.Open()
            cmd.Parameters.AddWithValue("@CountryId", countryId)
            ddlSubKRA.DataSource = cmd.ExecuteReader()
            ddlSubKRA.DataTextField = "StateName"
            ddlSubKRA.DataValueField = "StateName"
            ddlSubKRA.DataBind()           
            con.Close()
        End Using
    End Using
End Sub

Screenshot