How to popup a modal on aspx button click and load data using gridview?
i have a button in .aspx page(see screeshot). when i click the View Duplicate Order button i want to open a modal popup and load dataset records in the gridview form, but im not finding the solution to keep the modal in existing aspx page.
Ok, there is a few ways to do this.
However, FIRST RULE!!!
In near ALL cases, if a button in that dialog is to cause a post-back (and run code behind), then your dialog gets blown out - and of course when the page re-fresh after the post-back, then your dialog is gone.
So, what you can conside is to put the dialog - and code INSIDE of a update panel. That way you can actually still have post-backs, and this works. On the other hand, you could put the grid in "div". and when you click the button to display YOUR current dialoag, the button ALSO runs to load up the grid (in a 2nd grid). Note how I am suggesting that your FIRST dialog launch will load the grid - and that first dialog is where we do the post-back (load grid in to div (display:none), then last line of code behind is simple register script to now runn + display your dialog. and the button to view orders can then simple be another dialog you pop to show that hidden grid in the 2nd dialog.
So, above can be done without a update panel.
The next example - one I will use?
Load ANOTHER PAGE into the 2nd dialog. jQuery.UI can load other pages, and you can do this again without a post-back. I like this option quite a bit, and thus that's what we will do.
Ok, so we assume jQuery.UI (dialogs) for this.
So, or example will:
button click ---> show first dialog.
In 2nd dialog, we can close, or choose to display grid, and that will launch 2nd dialog.
So, we have this example:
<asp:Button ID="FirstDialog" runat="server" Text="Show first dialog"
OnClientClick="showfirst(this);return false" CssClass="btn"/>
<script>
function showfirst(btn) {
var mydiv = $("#firstdialog")
mydiv.dialog({
modal: true, appendTo: "form",
title: "Two button example", closeText: "",
width: "30%",
position: { my: 'left top', at: 'right bottom', of: btn },
buttons: {
Cancel: (function () {
mydiv.dialog("close")
})
}
});
}
</script>
<div id="firstdialog" style="display:none">
<h2>My First dialog</h2>
<asp:Button ID="cmdGrid" runat="server" Text="Show Grid" CssClass="btn"
style="float:left" OnClientClick="showgrid();return false;"/>
<asp:Button ID="cmdCancel" runat="server" Text="My ASP btn cancel" CssClass="btn"
style="float:right"
OnClientClick="$('#firstdialog').dialog('close');return false"
/>
<script>
function showgrid(btn) {
var mydiv = $("#gridialog")
mydiv.dialog({
autoOpen: false,
modal: true, appendTo: "form",
title: "You can book to these Hotels", closeText: "",
width: "80%",
position: {
my: 'center top',
at: 'center top',
of: window},
buttons: {
Ok: (function () {
mydiv.dialog("close")
})
}
});
mydiv.load("MyGrid.aspx")
mydiv.dialog("open")
}
</script>
<div id="gridialog" style="display:none;width:80%">
</div>
So, we now have this:
We click on that first button, and we now have this:
So, typical jQuery.UI dialog - it gray out the main page - and we have that "div" that is now displayed as a dialog.
If we click the Cancel button - dialog closes.
If we click the My ASP btn cancel - dialog closes.
but, if we click on show grid, then we can see the button just launches another dialog. (it runs function showgrid().
the code for that dialog - much the same, but REALLY NICE about jQuery.UI, is that we can load another page - a WHOLE another page.
so, first the showgrid() code in our current page. Again, a jQuery.UI dialog.
So we STILL have a div on the page, but we are going to LOAD a whole other page into that "div". And that's often why jquery.UI dialogs are oh so nice!!!
So this:
<script>
function showgrid(btn) {
var mydiv = $("#gridialog")
mydiv.dialog({
autoOpen: false,
modal: true, appendTo: "form",
title: "You can book to these Hotels", closeText: "",
width: "80%",
position: {
my: 'center top',
at: 'center top',
of: window},
buttons: {
Ok: (function () {
mydiv.dialog("close")
})
}
});
mydiv.load("MyGrid.aspx")
mydiv.dialog("open")
}
</script>
<div id="gridialog" style="display:none;width:80%">
</div>
And so we just now build a whole seperate new page like this:
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" CssClass="table">
</asp:GridView>
</div>
</form>
and the load event for this page is to load the grid:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
LoadGrid();
}
void LoadGrid()
{
// load up our grid
string strSQL = "SELECT TOP 15 FirstName, LastName, HotelName, Description from tblHotels " +
"WHERE Description is not null ORDER BY HotelName";
GridView1.DataSource = MyRst(strSQL);
GridView1.DataBind();
}
And now if we click on Show Grid, we see this:
So JUST KEEP in mind that if you do a post-back on the current page? Your dialogs get blown to bits - and with a re-fresh, then all dialogs go down.
but, as noted, if you really can't use or want a 2nd page?
Well, then you could surround the FIRST button inside of a update panel. When you click it, your button will client side pop first dialog BUT ALSO CODE behind has to load that grid. You can survice post-backs, but if we load grid on show grid button, and also call client side code to pop the grid, the grid pops BEFORE the code behind code has a chance to run - and you don't see the results. But, if you load the grid with code behind AND then pop the dialog, then your fine, since again, then the show grid button just pops the 2nd dialog.
So, the 2nd dialog can be a 100% seperate page to load the grid - no doubt you have to pass a query parm, or even use session() to load grid with JUST the correct information. As noted, because of the need to "pass" or "filter" the grid to just certain rows, then I can well make the case and see that going with a post-back to load first dialog is a compelling choice.
On the other hand if on page load you load up the grid ANYWAY (style=display:none), then you can pop the first dialog, and then 2nd to display the grid, and since it was already loaded, then no need for a post-back, then right?
But, you can have a "div", then a update panel, then content, and REALLY COOL nice surprise is such dialogs WILL survive and allow post backs, but it still hard to load the grid and then display if you try and use a post-back to load the grid.
So, probably least effort is to already load the GV before popping the first dialog, but above is an approach, but you have to add URL parms, or use session() to filter the whole new grid page that we put into the dialog.