Open Another Gridview in Pop-up using Bootstrap Modal Pop-up

This shows a pop-up on a link button clicked inside a first grid and then open a second grid in a modal window of Bootstrap. With Bootstrap it is easy to design responsive sites. In this I’ve used the jQuery library and Bootstrap.

Background

I encountered an opportunity from the problem to show one grid view on a link button click in modal pop-up programmatically, so I wrote this article to help other developers.

Initial chamber

Step 1

Open your Visual Studio and create an empty website, provide a suitable name such as GridViewPopup.

Step 2

In Solution Explorer you get your empty website, then add web forms.

For Web Form

GridViewPopup (your empty website). Right-click and select Add New Item -> Web Form. Name it GridviewPopup.aspx.

Design chamber

Step 3

Open the GridviewPopup.aspx file and write some code for the design of the application.

First add the jQuery plugin in your head section. Here I used jquery-1.10.2.js plugin for demonstration purposes.

How to add in your page

In the head section of your web page:

Then add the following plugin for optional theme:
After that I added the Bootstrap plugin to work with bootstrap as in the following:
Now the design looks as in the following:



Now add a GridView to be shown in a modal popup:

Here I have taken a dive to show a GridView in a modal pop-up and that ID is myModal and in the link button URL I've called this ID to show it in a modal pop-up.