How to make PopUp window in asp.net web application?

There are quite a few ways to do this. If you using the AjaxControlToolKit, they have a fantastic pop up extender, and it takes no JavaScript.

However, probably the best choice is to use jQuery.UI. It is without a doubt your site and application has jQuery, so, I would add jQuery.UI. You can use nueget to install it, or simply go to the jquery site and download the jQuery.UI files. They are common.

So, the way we do this is you create (usually) a "div" on the page that is a popup. This works great since is responds to a "click" very fast (you don’t even have to hit the server for the dialog to pop-up. However, the form you pop up might be to edit data.

The next consideration is that popup form cannot have post-backs. (well, ok, it can have one). So if the form you popup is to have some rich verification code, or code that requires some server side event code to run? You tend to be out of luck. So, you can easy pop a form, the user can edit (or enter data), but then you only allowed ONE post-back button event (say "ok – save"). So in most cases such a popup form is fine, but do keep in mind this limitation. If you do need some things to respond in that dialog, then you in most cases have to write ajax calls – that is extra pain and workload for the developer.

So, lets assume we want to pop up a dialog to filter a grid. The popup will allow the user to type in the first few characters of the hotel name OR WE can select a city from a drop down list to filter the grid by city.

and we toss in a show only "active" records with a check box.

So, how would this work, and look? (and keeping the above considerations in mind (only one post-back allowed in the pop dialog).

Well, we first build the grid. But, we need to add some buttons to the heading. So I have to drop a few of the databound fields, and use a template for that one column. This lets us setup the header with a button, or whatever we feel like.

And I did the same for the city heading.

So, we have this markup:

 <div id="HotelGrid" runat="server" style="width:50%">

        <asp:GridView ID="GHotels" runat="server" AutoGenerateColumns="False" DataKeyNames="ID"  CssClass="table table-hover" 
            style="vertical-align:middle" ShowHeaderWhenEmpty="true">
            <Columns>
                <asp:BoundField DataField="FirstName"   HeaderText="FirstName"  />
                <asp:BoundField DataField="LastName"    HeaderText="LastName"   />
                <asp:TemplateField>

                    <HeaderTemplate>
                        <asp:LinkButton ID="btnSearchCity" 
                        runat="server" 
                        CssClass="btn-default btn-sm"
                        >City
                        <span aria-hidden="true" class="glyphicon glyphicon-search"></span>
                        </asp:LinkButton>
                    </HeaderTemplate>

                    <ItemTemplate>
                        <asp:Label ID="lblCity" runat="server" Text='<%# Eval("City") %>'></asp:Label>
                    </ItemTemplate>

                </asp:TemplateField>

                <asp:BoundField DataField="Province"    HeaderText="Province"   />

      <asp:TemplateField HeaderStyle-Width="200px">
         <HeaderTemplate>
          <asp:LinkButton ID="cmdSearchHotel" 
              runat="server" 
              CssClass="btn-default btn-sm"
              OnClientClick="return mysearch(this);"
              OnClick="cmdSearchHotel_Click"

              >Hotel 
              <span aria-hidden="true" class="glyphicon glyphicon-search"></span>                                
           </asp:LinkButton>
        </HeaderTemplate>

        <ItemTemplate>
            <asp:Label ID="lblHotel" runat="server" Text='<%# Eval("HotelName") %>'></asp:Label>
         </ItemTemplate>
       </asp:TemplateField>

      <asp:BoundField DataField="Description"HeaderText="Description" />
      
      <asp:TemplateField HeaderText="Active"  ItemStyle-HorizontalAlign="Center"  >
      <ItemTemplate>
          <asp:CheckBox ID="chkActive" runat="server" Checked='<%# Eval("Active") %>'  />
      </ItemTemplate>

       <ItemStyle HorizontalAlign="Center"></ItemStyle</asp:TemplateField>

                <asp:TemplateField HeaderText="Edit">
                    <ItemTemplate>
                        <asp:Button ID="cmdEdit" runat="server" Text="Edit"class="btn" OnClick="cmdEdit_Click"/>
                    </ItemTemplate>

                </asp:TemplateField>
            </Columns>
        </asp:GridView>

Now, you can see in above, the markup starts to grow – that’s due to gridview requiring "template" around each set of controls. (I often suggest using a listview, since you don’t need the template(s). But no big deal.

Ok, so we have the above markup.

My page load code to load the grid? Well, we want the heading to dispaly, so we do it this way:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        GHotels.DataSource = MyRst("select * from tblHotels where id = 0")
        GHotels.DataBind()

        ' load the city combo box
        cboCity.DataSource = MyRst("SELECT City from tblCity ORDER BY City")
        cboCity.DataBind()
        cboCity.Items.Insert(0, "")  ' allow blank selection

    End If
End Sub

Public Function MyRst(strSQL As String) As DataTable

    Dim rstData As New DataTable
    Using MyCon As SqlConnection = New SqlConnection(My.Settings.TEST3)
        Using cmdSQL As New SqlCommand(strSQL, MyCon)
            cmdSQL.Connection.Open()
            rstData.Load(cmdSQL.ExecuteReader)
        End Using
    End Using
    Return rstData

End Function

Ok, so we now see/have this:

Now, the two buttions in the grid heading will have TWO parts.

The part to pop the dialog (jQuery.UI), and then the standard code server side.

Ok so, we have to create a div to hold our pop up.

It will be rather simple, and just combo box (for city), a text box for hotel anme, and a check box for "active only" filter.

so, that div is quite simple. and note when we happy with the div layout, we add display:none to hide the div.

so we have this:

        <div id="mysearchdiv" style="border:solid;width:300px;text-align:right;padding:15px;font-size:large;display:NONE">
            <p>Select City
            <asp:DropDownList ID="cboCity" runat="server" width="150px"
                DataTextField="City"
                DataValueField="City"
                ></asp:DropDownList>
            </p>
            <p>
                Hotel Name
                <asp:TextBox ID="txtSearchHotel" runat="server" Width="150" Height="25"></asp:TextBox>
            </p>
            <p>
                Include Only Active
                <asp:CheckBox ID="chkActiveOnly" runat="server" />
            </p>
            <asp:HiddenField ID="cmdOption" runat="server" ClientIDMode="Static"/>
        </div>

Really very simple markup.

Ok, now the hard part, the jQuery UI is a java script routine, and it is this:

    <script>
        var searchok = false
        function mysearch(btn) {
            if (searchok) {
                return true
            }
            var myDialog = $("#mysearchdiv");
            myDialog.dialog({
                title:"Search For Hotels",
                modal: true,
                width: "320px",
                resizable: false,
                appendTo: "form",
                autoOpen: true,
                buttons: {
                    Ok: function ()
                    {
                        searchok = true
                        btn.click()
                    },
                    Clear: function () {

                        searchok = true
                        $('#cmdOption').val('c')
                        btn.click()
                    },
                    Cancel: function () {
                        myDialog.dialog('close')
                    }
                }
            });
            return false
        }

    </script>

So, it is a bit of code, but what jQuery.UI is "grabs" that div, and converts it into a nice dialog. So the end result is this:

Now, either the c# tag was added after I started typing this, or I missed it.

but, the c# code is much the same. The first page load code is this:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GHotels.DataSource = MyRst("select * from tblHotels where id = 0");
            GHotels.DataBind();

            // load our search combo box
            cboCity.DataSource = MyRst("SELECT City from tblCity ORDER BY City");
            cboCity.DataBind();
            cboCity.Items.Insert(0,new ListItem("",""));
        }
    }

    public DataTable MyRst(string strSQL)
    {
        DataTable rstData = new DataTable();
        using (SqlCommand cmdSQL = new SqlCommand(strSQL,
            new SqlConnection(Properties.Settings.Default.TEST3)))
        {
            cmdSQL.Connection.Open();
            rstData.Load(cmdSQL.ExecuteReader());
        }
        return rstData;
    }

So above will load up the grid (we send it a blank row, since we using the header for searching.

and the buttion click? Well, we pop a jquery dialog. And if it returns true, or false – that determines if the server side buttion will fire.

So, we have this:

                <asp:TemplateField HeaderStyle-Width="200px">
                    <HeaderTemplate>
                        <asp:LinkButton ID="cmdSearchHotel" 
                        runat="server" 
                        CssClass="btn-default btn-sm"
                        OnClientClick="return mysearch(this);"
                        OnClick="cmdSearchHotel_Click"
                        >Hotel 
                        <span aria-hidden="true" class="glyphicon glyphicon-search"></span>
                        </asp:LinkButton>
                    </HeaderTemplate>

                    <ItemTemplate>
                        <asp:Label ID="lblHotel" runat="server" Text='<%# Eval("HotelName") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>

Note very carefull how we have the jQuery search routine return true ,or false.

Ok, so now it is a simple matter to write that code to filter/search the grid based on that popup.

The code is quite simple, and we "cumulative" add up each search option, or simple skip the options if no value in the search box is entered.

And, we added that hidden field, since as you can see, we can now add more buttons to that dialog, but not have to create new code server side – but just use the one button click to handle all options for that dialog.

And the c# code for this filtering is thus:

    protected void cmdSearchHotel_Click(object sender, EventArgs e)
    {
        if (cmdOption.Value == "c")
        {
            // clear the search option
            cboCity.Text = "";
            txtSearchHotel.Text = "";
            chkActiveOnly.Checked = false;
            cmdOption.Value = "";
            GHotels.DataSource = MyRst("select * from tblHotels where id = 0");
            GHotels.DataBind();
            return;
        }

        // filter the grid
        string strWhere = "";
        using (SqlConnection con = new SqlConnection(Properties.Settings.Default.TEST3))
        using (SqlCommand cmdSQL = new SqlCommand("SELECT * FROM tblHotels",con))
        {
            if (cboCity.Text != "")
            {
                strWhere += "City = @City";
                cmdSQL.Parameters.Add("@City", SqlDbType.NVarChar).Value = cboCity.Text;
            }

            if (txtSearchHotel.Text != "")
            {
                if (strWhere != "")
                    strWhere += " AND ";
                strWhere += "HotelName like @Hotel + '%'";
                cmdSQL.Parameters.Add("@Hotel", SqlDbType.NVarChar).Value = txtSearchHotel.Text;
            }

            if (chkActiveOnly.Checked)
            {
                if (strWhere != "")
                    strWhere += " AND ";
                strWhere += "Active = 1";
            }

            if (strWhere != "")
                cmdSQL.CommandText += " WHERE " + strWhere;

            cmdSQL.CommandText += " ORDER BY HotelName";

            con.Open();
            GHotels.DataSource = cmdSQL.ExecuteReader();
            GHotels.DataBind();
        }

So, all in all:

A absoulte min of code.

Not really much more markup then a typical grid.

And I shared a LONG time super cool trick that VERY VERY VERY few have used. That is how to get the one jQuery.UI dialog to NOT fire the server side button if we don’t want to. And thus we don’t need multiple routines in java, and we don’t need multiple routines server side. We simply have the one button call the dialog, and it returns true, or false. But it STILL is running asyncrious as all and most JavaScript widgets should be. (no blocking code allowed!!!).