Returning selected value from ModalPopup in a custom web control

I'm a little lost on how to do this conceptually -- can someone perhaps shed a little light on how this might be done?

Custom web control consists of UpdatePanel with other UI controls and a ModalPopupExtender. The purpose is to be a reusable search popup, and I've got the search UI functionality working like a champ.

Page with an UpdatePanel containing some container (textbox, listbox, label, etc), a linkbutton, and my custom control from #1.

What I would like to do is have the linkbutton call some script (be it client- or server-side, not sure what's the most appropriate yet) that does the following steps:

Show the custom popup

Allow the user to perform the search and select one of the results, which would close the popup

Snag the selected value from my popup, then work with that value to update the container (i.e. if it's a listbox, then do some script to insert an appropriate item)

How can I pull this one off, so the search popup is an isolated, reusable control? I've got different instances where I need the selected value to change a Label, update a TextBox, or even be inserted in a ListBox. I've got plenty of public properties on the custom control already that determines the parameters for the search itself; is there a perhaps way to override the Show() method so that it would return the value of the selection after it closes? But since Show() wouldn't really block, I'm lost on how to do it.

Thanks a lot,
Jon

Am I screwed on this one? The best I've been able to get are two separate custom controls with a LOT of duplicated code ...

Control contents: Listbox, linkbutton to show popup, all the popup code

Then repeat with a new control replacing the Listbox with a Label etc ...

I hate having this much duplicated code; anytime I need to change the popup code I'll have to duplicate it in each of my custom controls. There has to be a better way to do this?!?

I am not sure if i understand you question 100% from what ive read but if you want to get a value return from the mod popup is should not be to hard.

Lets say i have a mod popup that has a textbox, a search button, a listbox of results and a submit button. What you could do is once you have run the search which you said is working great, display the results in the listbox in the popup. then when the user clicks the submit button an event is fired that checks to see if they selected one of the items in the list box, if not then it will tell them to do so. Then if you want to use that selected value to populate a listbox on the main for (say for example you searched in the popup for a street name and then selected the right street name from the listbox and clicked submit and you want the main form listbox to display all people on that street) then all you need to do is have the event for the submit button Click call a function you write that runs the query to get all people on that street and print their info the the list box.

It should not be hard to get the results from the popup, but im not sure i understand what you are asking so this could be no help at all :P

Well! There's a little different between the concept of Modal Popup in Windows and Web forms. The latter is just hiding all the controls in the Popup and show when needed but you should able to access the properties of those controls within the scope of the page.

Now, assuming that you want to create a ASP.NET reusable custom server control that "know-how" to popup a modal to collect data from the end-user. The basic class design can be used so you just have to declare a public property so that it can return the selected value. Another alternative is you can use a Session key to store the value so that the class container can retrieve after using your class. This key can be set as a property of your class prior to the container is using it.

I hope it help since your question left a lot of detail out hence it's not very clear.

My apologies for not being clear enough -- I think I wrote the initial post after too much coffee and a bit too much frustration. :(

The overall project is an admin web UI for AD objects, so popup searches are going to be very common. Some pages will have multiple popup searches, so it is my desire to completely wrap all of that functionality into a single reusable custom server control. The results of the search could be used to update different types of UI elements on the parent page; my struggle is with conceptually figuring out where the pieces go to make this work in more than one situation.

My custom control now is an UpdatePanel with all the search UI and tidbits inside, and a ModalPopupExtender. There are many public properties on my control, mostly to define how the search itself is going to work. TargetControlID for the extender is also exposed as a public property, so that I can wire the popup to any UI element on the parent page that I want. The control also has a hidden element in it; this hidden element eventually contains the selection the user chose from the search results and is exposed via a public "SelectedResult" property.

Everything up to this point is working 100%. I'm stuck, however, on implementing the hooks for getting the value back to the parent page. Once someone clicks the TargetControl and performs the search and selects a result (which then hides the popup through server script in the control itself), the result is stored in the hidden element and the user is back at the parent page. But how do I work with that SelectedResult then? I should be able to, once the popup is hidden, take that value and stick it somewhere on the parent page -- but apparently I'm missing something obvious, because I'm completely lost.

Do I handle it via a custom click event for the wired target (instead of just using TargetControlID)? Does OnOKScript fit in here somewhere? Since the activity to take place after a selection is made will be different depending on the situation, it needs to happen outside of my custom control. Are there additional extender props that I need to expose through a public property on my custom control?

I hope this helps -- I'm not seeking exact code samples, I'm more looking for help on getting my brain wrapped around the "how" of the solution ... the exact code I should be able to figure out after that, I think. If some of my code for certain parts would help, I'll be happy to post them -- just let me know. Thanks again!

Alright so im still not sure if this is anything helpful, but i have a small example here i wrote of what i would do to put the result from my modal popup into my main page and from there i could do what ever i want with it. I tried to comment the best i could to make it super easy to read

using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using AjaxControlToolkit;public partialclass administration_OIS_Default : System.Web.UI.Page{ ModalPopupExtender modPop =new ModalPopupExtender();//The main modal popupprotected void Page_Load(object sender, EventArgs e) { HiddenField results =new HiddenField();//Results from mod popup HiddenField hidden =new HiddenField();//Mod popup targetID UpdatePanel update =new UpdatePanel();//UpdatePanel to hold controls TextBox tempText =new TextBox();//Textbox for mod popup Button btnVisible =new Button();//Button to show mod popup Button btnSubmit =new Button();//Submit button in mod popup Panel container =new Panel();//Panel to hold controls for mod popup //Assign IDs to variables that need to be refrenced later container.ID ="Container1"; results.ID ="Result1"; hidden.ID ="Hidden1"; btnVisible.Text ="Click to show modPop"; btnVisible.ID ="visibleButton"; btnVisible.Click +=new EventHandler(this.btnVisible_Click);//Tell the button what do do when click update.ContentTemplateContainer.Controls.Add(btnVisible);//Add the button to main update panel update.UpdateMode = UpdatePanelUpdateMode.Conditional;//We only want the panel to update sometimes update.ChildrenAsTriggers =true;//IE. when child controls trigger it update.ContentTemplateContainer.Controls.Add(hidden);//Add "hidden" to the update panel tempText.ID ="textBoxTest";//Add a simple textbox to the control container.Controls.Add(tempText);//container to be placed in our modal popup btnSubmit.Text ="btnSubmit"; btnSubmit.ID ="btnSubmit1"; btnSubmit.Click +=new EventHandler(this.btnSubmit_Click);//tell submit what to do when clicked container.Controls.Add(btnSubmit);//and add it to our control container modPop.TargetControlID = hidden.ID;//We would rather use modpopup.Show() so we make this a hidden field modPop.PopupControlID = container.ID;//Define the object to be shown inside of mod popup modPop.DropShadow =true;//Why not a little style :P modPop.X = 500; modPop.Y = 250; update.ContentTemplateContainer.Controls.Add(modPop);//Add the modal popup to our update panel update.ContentTemplateContainer.Controls.Add(results);//Add our results holder to the update panel update.ContentTemplateContainer.Controls.Add(container);//Also add the modal popup contents form1.Controls.Add(update);//Add our updatepanel to the main form }/// <summary> /// Function will force the modalPopup extender function .Show to fire /// </summary>private void btnVisible_Click(object sender, EventArgs e) { modPop.Show(); }/// <summary> /// Function takes the users input from the modal popup and saves it to a hidden field /// located in the updatepanel so that it will be save for further use /// </summary>private void btnSubmit_Click(object sender, EventArgs e) { ((HiddenField)form1.FindControl("Result1")).Value = ((TextBox)((Button)sender).Parent.Controls[0]).Text; }/// <summary> /// Function will display the saved value from the modal popup to prove that it works /// </summary>private void showText() { txtOutput.Text = ((HiddenField)form1.FindControl("Result1")).Value; }/// <summary> /// Occurs when button1 is clicked, showing the save results from modal popup /// </summary>protected void Button1_Click(object sender, EventArgs e) { showText(); }}

 So basically the user will click a button here to show the modal popup. enter text and click submit in the modal popup, and then they are brought back to the main form where if they click on Button1,
the value that they entered into the modal popup will be displayed. I got lazy at the end and didnt add txtOutput or Button1 programmatically so if you want to run this code on your own i think those are
the only 2 things you will have to manuall add to the form

Enjoy

You know what, I think I've got it ... maybe I just needed to "air it out" and let my mind wander for a bit. Seems like it would be simple after all, let me know if I'm off base:

I could just have the custom control expose another public property, and the parent page sets that property to a hidden control on the PARENT PAGE. Then the custom server control sets that hidden control's value before calling hide(). The hidden control on the parent page would have an onChanged() event that could do whatever UI update activity is necessary. That would keep all of the code separate from the custom control, allowing it to work in any situation I needed.

I'm going to try that right now ... if it is indeed this simple, my apologies for going around in circles on this one

Sounds like your on the right track now, well at least the track that I felt is what would help you get to where you want to go. and yeah, sometimes its best to take your mind of things then come back with a different perspective, or go onto forums like this and let someone else share their point of view, it saves a lot of frusteration

It actually turns out to be even simpler -- I just need my custom control to raise a public event when the user selects a search result, and passes the selection as part of the args. The consuming page just watches for that event and does whatever UI magic is necessary as a result. No hidden fields or other stuff in the middle.

Amazing how much clearer things get after talking it out. Thank you everyone for your help and patience -- I'll try to make this control available publicly shortly and post a link in this thread; your help has been invaluable!

invaluable, wow i feel special

Can you please give some example on how the modal popuo raises a public event and how the parent page watches for the event? Thanks.

jmbutler:

It actually turns out to be even simpler -- I just need my custom control to raise a public event when the user selects a search result, and passes the selection as part of the args. The consuming page just watches for that event and does whatever UI magic is necessary as a result. No hidden fields or other stuff in the middle.

Amazing how much clearer things get after talking it out. Thank you everyone for your help and patience -- I'll try to make this control available publicly shortly and post a link in this thread; your help has been invaluable!

Sure thing!

My ModalPopup is completely contained in a custom web control, so in that control's code I've first defined the custom event that I will raise, including a custom derived EventArgs class that will include the information about which search result the user selected:

public delegate void ResultSelectedEventHandler(object sender, SelectedEventArgs e);public event ResultSelectedEventHandler ResultSelected;public class SelectedEventArgs : EventArgs {public string Selection;public SelectedEventArgs(string selection) {this.Selection = selection; } }protected virtual void OnResultSelected(SelectedEventArgs e) {if (ResultSelected !=null) ResultSelected(this, e); }

Then in the click code for my selection button, I raise this event before hiding the popup ("RadioSelect" is a radio button from my search panel's GridView; it's value is a two-dimensional string array separated by '|'):

protected void lnkAddSelected_Click(object sender, EventArgs e) {// raise an event to notify the consuming page that a selection was made OnResultSelected(new SelectedEventArgs(Request.Form["RadioSelect"]));// we're done; close the popup ModalPopupExtender1.Hide(); }

Now, back on the consuming parent page, I subscribe to this event in the markup of my custom control (note I've exposed TargetControlID publicly as well so I can wire my custom control to anything I want):

<uc2:PopupADSearch ID="PrimaryOwner" runat="server" TargetControlID="lnkChangePrimaryOwner" OnResultSelected="PrimaryOwner_Selected" />

Finally, in the code for my parent page, I define the PrimaryOwner_Selected method:

protected void PrimaryOwner_Selected(object sender, PopupADSearch.SelectedEventArgs e) {string[] selection = e.Selection.Split('|'); hidPrimaryOwner.Value = selection[0]; lblPrimaryOwner.Text = selection[1]; }

It's also important to note that the custom control, hidPrimaryOwner (a hidden control), and lblPrimaryOwner (a typical label server control) are all within an UpdatePanel -- otherwise all this jazz wouldn't work without a full-page postback. Hope you find this useful!

Hi,

From this post, I felt that you guys h've worked in Modal popup extender. I am posting my question expecting help if anyone knows.

I display Modal Popup( which shows the grid rows and button controls in panel) on clicking imagebutton. I want to align the the button in panel to center ans currently its left aligned and looks awkward. Can anyone tell me how do we align the button control in Model Popup's panel..

Here is the existing code.

Code forbtnSubmit is underlined in Italic in below code for easy identification.

///<summary>

/// Event Handler for Grid selection

///</summary>

///<param name="sender"></param>

///<param name="e"></param>

protectedvoid apprvlsGrid_SelectedIndexChanged(object sender,EventArgs e)

{

if (apprvlsGrid.SelectedIndex >= 0)

{

vwbenftsImgBtn.Visible =true;

string gridAprveSwID;

// Validations on Approve and reject buttons using javascript

if(apprvlsGrid.SelectedIndex <= 7)

gridAprveSwID ="ctl00_ContentPlaceHolder1_apprvlsGrid_ctl0"

+ (apprvlsGrid.SelectedIndex + 2) +"_approveSwHdn";

else

gridAprveSwID ="ctl00_ContentPlaceHolder1_apprvlsGrid_ctl"

+ (apprvlsGrid.SelectedIndex + 2) +"_approveSwHdn";

apprvBtn.Attributes.Add("OnClick","return fnaprvValidate('" + gridAprveSwID +"')");

rejectBtn.Attributes.Add("OnClick","return fnrejValidate('" + gridAprveSwID +"')");

// Controls declared dynamically for Modal Popup using Ajax

Button vwbenftsBtn =newButton();

Button btnSubmit =newButton();

Panel container =newPanel();

container.Width = 400;

container.Height = 350;

container.BorderWidth = 1;

container.BackColor =Color.WhiteSmoke;

GridView benfGrd =newGridView();

//Assign IDs to variables that need to be refrenced later

container.ID ="Container1";

benfGrd.ID ="benfGrd";

benfGrd.AutoGenerateColumns =false;

benfGrd.Width = 400;

benfGrd.Height = 300;

Literal newline =newLiteral();

Literal spaces =newLiteral();

Approvals apprvls;

Approval aprvalVwBenfts =newApproval();

if (Session["aprvlsList"] !=null)

{

apprvls = (Approvals)Session["aprvlsList"];

int iApprvlsCount = apprvls.Count;

GridViewRow aprvlsSelectRw = apprvlsGrid.SelectedRow;

aprvalVwBenfts.BinId =Convert.ToInt64(aprvlsSelectRw.Cells[13].Text);

aprvalVwBenfts.CardId =Convert.ToInt64(aprvlsSelectRw.Cells[14].Text);aprvalVwBenfts.SetId =Convert.ToInt64(aprvlsSelectRw.Cells[15].Text);

aprvalVwBenfts.TableCd = aprvlsSelectRw.Cells[17].Text;

aprvalVwBenfts.EffDate =Convert.ToDateTime(aprvlsSelectRw.Cells[7].Text);

aprvalVwBenfts.SetDesc = aprvlsSelectRw.Cells[6].Text;

if (aprvalVwBenfts.TableCd =="B")

aprvalVwBenfts.TableID = aprvalVwBenfts.BinId;

else

aprvalVwBenfts.TableID = aprvalVwBenfts.CardId;

for (int iRow = 0; iRow < iApprvlsCount; iRow++)

{

if (aprvalVwBenfts.TableID == ((Approval)apprvls[iRow]).TableID

&& aprvalVwBenfts.SetId == ((Approval)apprvls[iRow]).SetId

&& aprvalVwBenfts.TableCd == ((Approval)apprvls[iRow]).TableCd&& aprvalVwBenfts.EffDate == ((Approval)apprvls[iRow]).EffDate)

{

int isetBenftCOunt;

isetBenftCOunt = ((Approval)apprvls[iRow]).getSetBenefitCount();

SetBenefit[] setSetBefts = (SetBenefit[])((Approval)apprvls[iRow]).getSetBenefits();

//Loads the Modal Pop up controls

// Dynamically create field columns to display the desired

// fields from the data source. Create a TemplateField object

// to display an author's first and last name.

TemplateField benfGridCol =newTemplateField();

// Create the dynamic templates and assign them to

// the appropriate template property.

benfGridCol.ItemTemplate =newGridViewTemplate(DataControlRowType.DataRow,"");

benfGridCol.HeaderTemplate =newGridViewTemplate(DataControlRowType.Header, aprvalVwBenfts.SetDesc);

// Add the field column to the Columns collection of the

// GridView control.

benfGrd.Columns.Add(benfGridCol);

benfGrd.DataSource = createGridData(setSetBefts, isetBenftCOunt);

benfGrd.DataBind();

vwbenftsImgBtn.ID ="vwbenftsImageBtn";

vwbenftsImgBtn.ToolTip ="View Benefits for Selected Set";

//vwbenftsImgBtn.Click += new ImageClickEventHandler(this.vwbenftsImgBtn_Click);

container.Controls.Add(benfGrd);

btnSubmit.CssClass ="btn";

btnSubmit.Text ="Close";

btnSubmit.ID ="btnSubmit1";

newline.ID ="newline";

newline.Text ="<br/> ";

//spaces.ID = "spaces";

//spaces.Text = "aaaaaaaaaaaaaaaaa";

//spaces.Visible = false;

//subBtnTble.Style = "center";

//subBtnTble.ID = "subBtnTble";

//subBtnTble.Controls.Add(btnSubmit);

container.Controls.Add(newline);

//container.Controls.Add(spaces);

container.Controls.Add(btnSubmit);

// Specify the Image button as Modal Popup target

modPop.TargetControlID = vwbenftsImgBtn.ID;

//Define the object to be shown inside of mod popup

modPop.PopupControlID = container.ID;

modPop.DropShadow =true;

modPop.X = 250;

modPop.Y = 100;

modPop.OkControlID = btnSubmit.ID;

// Add all the controls to Page's form

formApvl.Controls.Add(vwbenftsImgBtn);

formApvl.Controls.Add(modPop);

formApvl.Controls.Add(container);

}

}

}

}

}

Thanks

Shilpa

Actually, I don't think this has anything to do with this thread -- your question is more geared towards HTML / CSS. You can center any HTML entity using appropriate CSS. If you need more specific answers, I would recommend starting a new thread entirely in one of the other forums (while you are referring to an AJAX extender, your question really has nothing to do with AJAX.)