Solved

Modal Popup and Drop Down List

Posted on 2009-04-14
5
2,556 Views
Last Modified: 2013-11-08
I have a drop down list on a page with a button to add a new item to the list. When you click the button a modal popup AJAX control opens a panel where I add a new item to the DB. This works great however, how do I get the item added to the drop down list without refreshing the page.

All my efforts have failed me. The best situation would be if I can just rebind that dropdown.
<asp:DropDownList ID="ddlMedia" runat="server" 

                    DataSourceID="objMedia" DataTextField="Title" DataValueField="Id" 

                    Height="22px" Width="215px" AppendDataBoundItems="True" TabIndex="12">

                    <asp:ListItem Text="Select one..." Value="" />

                </asp:DropDownList>
 
 

 <asp:Panel ID="ModalPanel" runat="server" BackColor="#A2998b" Width="500px">      

      <uc2:media ID="media1" runat="server" />

      <br /><asp:Button ID="OKButton" runat="server" Text="Close" 

        onclick="OKButton_Click"/> </asp:Panel>

    <cc1:ModalPopupExtender ID="mpe" runat="server" TargetControlId="lbNewMedia" 

      PopupControlID="ModalPanel" OkControlID="OKButton" Drag="True" 

      DropShadow="True" BackgroundCssClass="modalBackground" 

      PopupDragHandleControlID="ModalPanel">

    </cc1:ModalPopupExtender>

Open in new window

0
Comment
Question by:sesurb
  • 3
  • 2
5 Comments
 
LVL 12

Expert Comment

by:wht1986
ID: 24144607
Hi sesurb,

I'm guessing since you dont want a postback to occur your uc2:media user control handles some database insert of the new value via an update panel. Is that correct? If thats the case you could call a javascript method using RegisterClientStartupScript after the processing is done.

Here is a quick example. I dont have the ajax toolkit installed, so i am using an update panel as my 'modal dialog'.

On the page I have a javascript function in charge of adding an item manually to a drop down list.

On add click, i update the database and then register by script to be called.

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
   
    <script language="javascript" type="text/javascript">
        function AddDropDownItem(text, value)
        {
            // Create an Option object                
            var opt = document.createElement("option");
           
            // Add an Option object to Drop Down/List Box
            $get("DropDownList1").options.add(opt);

            // Assign text and value to Option object
            opt.text = text;
            opt.value = value;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:DropDownList ID="DropDownList1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>


Default.aspx.cs

public partial class _Default : System.Web.UI.Page
{
    protected void Button1_Click(object sender, EventArgs e)
    {
        // do whatever database processing needs to happen

        // what javascript function to call?
        string scriptToRun = string.Format("AddDropDownItem('{0}','{1}');", this.TextBox1.Text, this.DropDownList1.Items.Count.ToString());
       
        // Need this line to keep viewstate in sync
        DropDownList1.Items.Add(new ListItem(this.TextBox1.Text, this.DropDownList1.Items.Count.ToString()));

        // this executes the javascript on the page with out 'postback'
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "temp", scriptToRun, true);
    }
}
0
 
LVL 12

Expert Comment

by:wht1986
ID: 24144620
of course even easier would be if you can encapsulate certain fields in an update panel.

If you had UpdatePanel1 holding the dropdown, and Updatepanel2 did the add. You can manually update the contents of the first panel. like so:

Default.aspx

    <form id="form1" runat="server">
       
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
       
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:DropDownList ID="DropDownList1" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>
       
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>

Default.aspx.cs

    protected void Button1_Click(object sender, EventArgs e)
    {
        // do whatever database processing needs to happen
       
        // Need this line to keep viewstate in sync
        DropDownList1.Items.Add(new ListItem(this.TextBox1.Text, this.DropDownList1.Items.Count.ToString()));

        // refresh the panel that had the drop down
        UpdatePanel1.Update();
    }

Hope that helps
0
 
LVL 2

Author Comment

by:sesurb
ID: 24148515
I have tried to put the update panel on the dropdown list and the modal popup extender has it's own update panel however getting them to talk to each other did not work. The modal popup seems to override any events inside the panel.
0
 
LVL 2

Accepted Solution

by:
sesurb earned 0 total points
ID: 24148546
I think I got it and here is the solution I have.

I have an update panel around the drop down list and in the modal popup properties I added:

OnOkScript="__doPostBack('UpdatePanel1', '')

This seems to work.
0
 
LVL 12

Expert Comment

by:wht1986
ID: 24148693
ok, regarding the (2) update panel method i described above, i try to always use the UpdateMode as conditional.  This way you can trigger when to update the contents of other panels on the page. Otherwise, by default, UpdatePanels refresh their contents when any partial postback occurs.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now