Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Modal Popup and Drop Down List

Posted on 2009-04-14
5
2,599 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…

840 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