Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2805
  • Last Modified:

Modal Popup and Drop Down List

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
sesurb
Asked:
sesurb
  • 3
  • 2
1 Solution
 
wht1986Commented:
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
 
wht1986Commented:
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
 
sesurbAuthor Commented:
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
 
sesurbAuthor Commented:
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
 
wht1986Commented:
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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now