locked
Display Data From Database using bootstrap model popup RRS feed

All replies

  • User475983607 posted

    https://forums.asp.net/t/2141486.aspx?show+column+data+in+modal+popup

    Like the above tutorial i would like to display data from database with bootstrap model popup without using ajax update panel in asp.net.

    The standard  Bootstrap documentation cover this in detail without having to do a single HTTP request.  The data already exists in the current page.  The idea is coping the table row data to the modal inputs by crafting a button with data- attributes.

    https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content

    Thursday, January 30, 2020 1:09 PM
  • User2101416554 posted

    umerfaiz123@outlook.com

    https://forums.asp.net/t/2141486.aspx?show+column+data+in+modal+popup

    Like the above tutorial i would like to display data from database with bootstrap model popup without using ajax update panel in asp.net.

    The standard  Bootstrap documentation cover this in detail without having to do a single HTTP request.  The data already exists in the current page.  The idea is coping the table row data to the modal inputs by crafting a button with data- attributes.

    https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content

    Thanks ... Any tutorials will be much appreciated ...

    Friday, January 31, 2020 3:44 AM
  • User475983607 posted

    Thanks ... Any tutorials will be much appreciated ...

    Uh, yeah, the link shared above.  There's not much to it.  Give it a try and post your code if you need a few pointers.

    Friday, January 31, 2020 4:07 AM
  • User1535942433 posted

    Hi umerfaiz123@outlook.com,

    Accroding to your description,I suggest you could use $.ajax to get the data from database with using the bootstrap model popup.

    More details,you could refer to below article:

    https://www.c-sharpcorner.com/code/556/how-to-show-data-in-bootstrap-popup.aspx

    Best regards,

    Yijing Sun

    Friday, January 31, 2020 6:14 AM
  • User-37275327 posted

    Extract from bootstrap... Just set the [data-target] with the ID of the outer div.

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
      Launch demo modal
    </button>
    
    
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    Friday, January 31, 2020 9:32 AM