Populate a ASP.NET UserControl Dynamically - asp.net

Question

Is there anyway for a ASP.NET page with say a gridview on it to load a user control into a Modal popup. I would like to use the User Controls onload function but that is triggered when the parent page is loaded, not when you click on for example a link called 'edit' in the GridView.
I don't want to redirect to another ASP.NET page, I would like to popup the edit page which will contain many controls like Dropdowns and Listboxes that in themselves with contain hundreds of records.
I have tried using Ajax and JSON but the population of the dropdowns and listboxes is very slow.
Any help would be appreciated!
I have tried using Ajax and JSON but the population of the dropdowns and listboxes is very slow.

Answer 1

I do this all the time.
So, say a simple gv of hotels.
and our popup control is the user control that is a "form like" layout to edit the one row.
Note the "difficult" issue is if the user does edit, then we need to trigger a refresh of the grid. But, even that is quite easy.
So, say our gv - rather simple.
We drop in a plain jane button (for edit).
So, we have this markup (a gridview)
<div id="MyGridArea" runat="server" clientidmode="static">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="ID"
CssClass="table table-hover" Width="60em" AllowPaging="True" GridLines="None"
ShowHeaderWhenEmpty="true" EnableViewState="false">
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
<asp:BoundField DataField="HotelName" HeaderText="HotelName" SortExpression="HotelName" />
<asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="cmdEdit" runat="server" Text="Edit" CssClass="btn"
OnClick="cmdEdit_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle CssClass="GridPager" />
</asp:GridView>
<asp:Button ID="cmdAdd" runat="server" Text="+Add" CssClass="btn myshadow" />
</div>
<br />
<uc1:MyEditHotelC ID="EHotel" runat="server"
MyEditArea="MyEditArea"
MyGridArea="MyGridArea"
MyTable="tblHotelsA"
MyTitle="Edit Hotel Information" />
Note our plain jane edit button.
And, right below the gv is our user control.
Note how I have some custom (public properties) of the UC.
In above, the "div" for "grid" is setup, and also I define the div for editing.
Ok, so code to load 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 [VtblHotelsA] ORDER BY HotelName")
GridView1.DataBind()
End Sub
And we now see/get this:
Ok, so now when we hit edit button?
We will get the current row, and THEN pop up our user control.
So, the code behind edit button is this:
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()
Me.EHotel.MyFocusCancel()
ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType,
"popedit", "popedit()", True)
End Sub
and now we see this:
I also have a pubic event for the UC. (since if the user edits, we need to re-load (re-display) the gv on this current page.
So, how does the UC pop up that dialog?
The UC uses jQuery.UI. (it does not matter what/which library you use to pop a dialog, but you should pick one and "run" with it.
So, the markup for the UC ALSO includes the jQuery pop dialog.
The markup for the UC is just a "div" and the jquery dialog code.
It looks like this:
<div id="EditRecord" runat="server" style="float:left;display:normal" clientidmode="Static" >
<br/>
<style>
.iForm label {display:inline-block;width:90px}
.iForm span {display:inline-block;font-weight:700
}
.iForm input {border-radius:8px;border-width:1px;margin-bottom:10px}
.iForm select {border-radius:8px;border-width:1px;margin-bottom:10px;margin-bottom:10px;height:24px;margin-left:-3px}
.iForm textarea {border-radius:8px;border-width:1px;margin-bottom:10px}
.iForm input[type=checkbox] {margin-right:8px}
</style>
<div style="float:left" class="iForm">
<label>HotelName</label>
<asp:TextBox ID="txtHotel" runat="server" f="HotelName" width="280">
</asp:TextBox> <br />
<label>First Name</label>
<asp:TextBox ID="tFN" runat="server" f="FirstName" Width="140"></asp:TextBox> <br />
<label>Last Name</label>
<asp:TextBox ID="tLN" runat="server" f="LastName" Width="140"></asp:TextBox> <br />
<label>City</label>
<asp:DropDownList ID="cboCity" runat="server" Width="140px"
DataTextField="City"
DataValueField="id"
f="City_ID" >
</asp:DropDownList>
<br />
<label>Province</label><asp:TextBox ID="tProvince" runat="server" f="Province" Width="75"></asp:TextBox>
(etc. etc. etc.). It just the layout in a div for editing the hotel.
And the pop dialog code is this:
<div id="mydelpop" style="display:none">
<h4>Really delete this Hotel?</h4>
</div>
<script>
function popedit() {
MyPWidth = "62em"
MyWidth = $(window).width()
if (MyWidth < 840) {
MyPWidth = (MyWidth - 25) + 'px'
}
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');
}
}
</script>
So, the edit code, the JavaScript parts are part of the UC.
I only have to "set" the values for the UC, and of course "pop" the dialog by injecting the script. At that point, everything else is the UC.
You can see/try a working example of the above code here:
http://www.kallal.ca/WebSite11/WebForm2