Bootstrap Modal Pop up with ASP.NET webforms

I have an admissionform.aspx in which I have 5 textboxes and one server control submit button , and I have a mainpage.aspx that have a "New" button, the mainpage.aspx has a master page.

I want that when i click the new button on the mainpage.aspx it opens the modal popup having the formfeilds in the admissionform.aspx.

Is it possible to accesss this in ASP.NET webforms ?

As noted, you can/could pop the page in a iframe. But, the problem THEN becomes how to dismiss the page, since operations inside of the iframe can't be used to dismiss the dialog.

Next up?

bootstrap dialogs look good, but from a developer's point of view, they are garbage, and VERY difficult to deal with.

So, I suggest that for dialogs, and "especially" the case in which you want rich content (such as adding a new record or popping up some kind of dialog form that allows editing of data?

Well, a jQuery.UI dialog CAN launch + display OTHER .aspx pages. This actually works quite well. However, several issues arise.

Most noteworthy is that such pages "launched" inside a jQuery.UI display well, but ANY post-backs in that page will collapse the dialog.

2nd issue:

It can be a "challenge" to correctly close the page and THEN have code run on the existing page as a result.

So, how to approach this issue?

I suggest that you take the aspx page in question, and adopt a user control.

A user control is VERY easy to create based on content of a existing page.

So, the end result?

The other page can continue to work, but it will now have 2 parts. The existing page (say dmissionform.aspx). And that page can/will/use/should thus have the user control that has the admission boxes etc.

And now then in ANY other page, (such as your example), you can ALSO then drop in the user control.

And that user control can have post-backs if you need be.

So, let's do a example.

I have a gridview of hotels. I want a edit button, and when clicked, I will pop up a hotel edit form.

So, our grid view looks like this:

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="ID" 
    CssClass="table table-hover" Width="60em" AllowPaging="True" GridLines="None"
    ShowHeaderWhenEmpty="true"  >
    <Columns>
        <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
        <asp:BoundField DataField="LastName" HeaderText="LastName"   />
        <asp:BoundField DataField="City" HeaderText="City"  />
        <asp:BoundField DataField="HotelName" HeaderText="HotelName"  />
        <asp:BoundField DataField="Description" HeaderText="Description" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Button ID="cmdEdit" runat="server" Text="Edit" CssClass="btn myshadow"
                    OnClick="cmdEdit_Click" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <PagerStyle CssClass="GridPager" />
</asp:GridView>

So, we have a simple gv.

code to load the gv is this:

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

    If Not IsPostBack Then
        LoadGrid()
    End If

End Sub

Sub LoadGrid()

    GridView1.DataSource = Myrst("SELECT * FROM tblHotelsA ORDER BY HotelName")
    GridView1.DataBind()

End Sub

And now we see/have this:

OK, so now the edit button code:

Protected Sub cmdEdit_Click(sender As Object, e As EventArgs)

    Dim btn As Button = sender
    Dim gRow As GridViewRow = btn.NamingContainer
    Dim intPK As Integer = GridView1.DataKeys(gRow.RowIndex).Item("ID")

    Call EditOne(intPK)

End Sub

Sub EditOne(intPK As Integer)

    Me.EHotel.MyPk = intPK
    Me.EHotel.LoadData()

    ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType,
                                        "popedit", "popedit()", True)

End Sub

All above does is get the row database PK id, sets the "user control" id to load the data, and then we call the js code to pop the dialog.

The jQuery.UI dialog code in above is this:

   <script>
       function popedit() {

            MyPWidth = "62em"

            var myDialog = $("#EditRecord");
            myDialog.dialog({
                title: "Edit Hotel",
                width: MyPWidth,
                modal: true,
                appendTo: "form",
                dialogClass : "dialogWithDropShadow",
                close: myclose
            });
       }

       function myclose() {
           var myDialog = $("#EditRecord");
           myDialog.dialog('close')
           // myDialog.find("form").remove();
           // destory the instance, but only
           // if exists (if we dont' clean up then button 
           // clicks don't work on 2nd use of dialog)
           if (myDialog.hasClass('ui-dialog-content')) {
               myDialog.dialog('destroy');
           }
       }

so, on the page, (below the grid view), we dropped in a simple div, and INSIDE of the div, we have the user control. (or the content).

So, this:

        <div id="MyEditArea" runat="server">

            <uc1:MyEditHotelC ID="EHotel" runat="server"
                MyEditArea="MyEditArea"
                MyGridArea="MyGridArea"
                MyTable="tblHotelsA"
                MyTitle="Edit Hotel Informaton" />

        </div>

So, the effect and result is this:

A few more things:

As a general rule, the page you "pop" can't have post-backs. However, if you wrap the div and user control in a update panel, THEN IT CAN have post-backs, and often you need this ability.

However, OFTEN I will use the fact of a post-back to my advantage since any post-back will as a general rule CLOSE (collapse) the dialog. So, in some cases, that's exactly what we want.

So, I suggest 2 ways here:

Shove the markup in a div, that you "hide" on the page.

eg:

Say this div with the markup to "pop" at edit time:

<div id="EditRecord" runat="server"
    style="float: left; display: none;border:solid 2px;padding:15px;border-radius:20px" clientidmode="Static" >
<br />
<div style="float: left" class="iForm">

    <label>HotelName</label>
    <asp:TextBox ID="txtHotel" runat="server"  Width="280">
    </asp:TextBox>
    <br />
    <label>First Name</label>
    <asp:TextBox ID="tFN" runat="server"  Width="140"></asp:TextBox>
    <br />
    <label>Last Name</label>
    <asp:TextBox ID="tLN" runat="server"  Width="140"></asp:TextBox>
    <br />

   etc. etc. etc.

And then of course the jQuery.UI code will look like this:

        <script>
            function popedit() {

                var myDialog = $("#EditRecord");
                myDialog.dialog({
                    title: "Edit Hotel",
                    width: "62em",
                    modal: true,
                    appendTo: "form",
                    dialogClass: "dialogWithDropShadow",
                    close: myclose
                });
            }

            function myclose() {
                var myDialog = $("#EditRecord");
                myDialog.dialog('close')
                if (myDialog.hasClass('ui-dialog-content')) {
                    myDialog.dialog('destroy');
                }
            }

But, as noted, in the case that you "want" another page, then you can of course create a user control. (that way you don't have to cut + paste a boatload of code and markup from the other page that you want to pop up).

Last but not least:

You CAN use jQuery.UI to pop another .aspx page, but then that page will have to be in most cases re-designed, and NOT do any post backs to operate correctly.

It much depends on what that other page does. (again, iFrame is a possible choice, but I think just dropping in a "div" with the content you want to pop is most simple. but, for a edit form etc, and one that MORE then one page needs to use (or might use), then as noted, take the "guts" of that other page, convert to a user control. Then drop that UC into that other existing page, so it can continue to work as a valid URL, and any other place that you need the "same" pop up dialog via jQuery.UI, then I think converting that "other" page guts part into a UC is a good choice, since then you can re-use the page and use say jQuery.UI to pop such a page.