Results 1 to 5 of 5

Thread: Bootstrap Modal Dialog in ASP.NET 4.5

  1. #1

    Thread Starter
    Frenzied Member KGComputers's Avatar
    Join Date
    Dec 2005
    Location
    Cebu, PH
    Posts
    2,020

    Bootstrap Modal Dialog in ASP.NET 4.5

    Here's a simple demo on using bootstrap modal dialog in asp.net 4.5 webforms. First is to reference jquery, bootstrap.min.css and bootstrap.min.js in your aspx markup.

    Code:
    <script src="Scripts/jquery-1.11.1.min.js"></script>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Content/bootstrap.min.js"></script>
    Next is to define a modal dialog using containers. In my example, I'm using the asp.net panel.
    Code:
    <asp:Panel ID="pnlModal" runat="server" role="dialog" CssClass="modal fade">
        <asp:Panel ID="pnlInner" runat="server" CssClass="modal-dialog" >
            <asp:Panel ID="pnlContent" CssClass="modal-content" runat="server">
                <asp:Panel runat="server" class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title">Bootstrap Modal Dialog in ASP.NET</h4>
                </asp:Panel>
                <asp:panel runat="server" class="modal-body">
                   <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
                        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
                        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
                        fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
                        mollit anim id est laborum.
                   </p>
                 </asp:panel>
                <asp:panel runat="server" class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </asp:panel>
            </asp:Panel>
        </asp:Panel>
    </asp:Panel>
    Lastly, I added an asp.net button to render the modal dialog to the browser. I added return false to the onclientclick to prevent triggering of postback.
    Code:
    <asp:Button ID="btnShowModal" runat="server" Text="Show Modal" CssClass="btn btn-primary btn-info" data-target="#pnlModal"
                  data-toggle="modal" OnClientClick="javascript:return false;"/>
    On Page Load, button is rendered to the browser.
    Name:  Initial Load.jpg
Views: 13690
Size:  11.3 KB

    When button is clicked, show the bootstrap modal dialog:
    Name:  Modal Popup.jpg
Views: 14331
Size:  14.2 KB

    KGC
    Attached Files Attached Files
    CodeBank: VB.NET & C#.NET | ASP.NET
    Programming: C# | VB.NET
    Blogs: Personal | Programming
    Projects: GitHub | jsFiddle
    ___________________________________________________________________________________

    Rating someone's post is a way of saying Thanks...

  2. #2
    Junior Member
    Join Date
    Mar 2010
    Location
    Netherlands
    Posts
    20

    Re: Bootstrap Modal Dialog in ASP.NET 4.5

    Hi, it looks promising and am going to try it out.
    Last edited by Zorger; Dec 24th, 2014 at 07:54 AM.

  3. #3
    Junior Member
    Join Date
    Mar 2010
    Location
    Netherlands
    Posts
    20

    Re: Bootstrap Modal Dialog in ASP.NET 4.5

    Hi, it looks promising and am going to try it out.
    Last edited by Zorger; Dec 24th, 2014 at 07:55 AM. Reason: Solved

  4. #4
    New Member
    Join Date
    Mar 2015
    Posts
    1

    Re: Bootstrap Modal Dialog in ASP.NET 4.5

    The example is great, but needs tweaking if you want to use it with master pages. See
    https://pbickford.wordpress.com/2015...-master-pages/

    Thanks for the great post!
    -Pete

  5. #5

    Thread Starter
    Frenzied Member KGComputers's Avatar
    Join Date
    Dec 2005
    Location
    Cebu, PH
    Posts
    2,020

    Re: Bootstrap Modal Dialog in ASP.NET 4.5

    Hi Pete,

    Great example on using with masterpage...

    KGC
    CodeBank: VB.NET & C#.NET | ASP.NET
    Programming: C# | VB.NET
    Blogs: Personal | Programming
    Projects: GitHub | jsFiddle
    ___________________________________________________________________________________

    Rating someone's post is a way of saying Thanks...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width