asp.net Button event inside jQuery FaceBox

Question

I'm using jQuery FaceBox to show a textbox, a dropdownlist and a button. The user can write a text in the textbox, select a value in the ddl abd hit the button. This fires some code in the codebehind. The FaceBox shows fine, and the content in it is also ok. Also, the button event is fired. This is the code for the button event handler:

protected void Button1_Click(object sender, EventArgs e)
    {
        _favorit = new Favoritter();
        ListItem fav = ddl_favoritter.SelectedItem;
        _favorit.FavoritterFolderID = int.Parse(fav.Value);
        //_favorit.FavoritterFolderID = Convert.ToInt32(ddl_favoritter.SelectedItem);
        _favorit.FavoritterNavn = txt_favoritNavn.Text;
        _favorit.FavoritterUserID = UserID;
        _favorit.FavoritterUrl = HttpContext.Current.Request.Url.ToString();
        FavoritterManager.InsertFavoritter(_favorit);
    }

A business object is created, and its properties set with the values read from the controls. The object is then inserted into a database, which works just fine. The problem is that the textbox and dropdown values are not set properly. The textbox value is empty, and the ddl selected value is allways 1, even though I write in the textbox, and select another ddlitem before I hit the button. The ddl is loaded like this:

if (!Page.IsPostBack)
            {
                _favoritter = FavoritterFolderManager.GetFavoritterFolderByUser(UserID);
                ddl_favoritter.DataSource = _favoritter;
                ddl_favoritter.DataBind();

            }

I tried putting this code outside if (!Page.IsPostBack), and also filling it using an objectdatasource, still the same issue. It's like the controls are "reset" as I hit the button, and I don't think it has anything to do with the FaceBox, as all it does is to show the div that contains the controls... Then again, it might... Any ideas?

This is the code in the aspx page:

<div id="showme" style="display:none;">
                        Add to favourites.<br />
                        <br />
                        <p>
                            Title:&nbsp;<span><asp:TextBox ID="txt_favoritNavn" runat="server"></asp:TextBox></span></p>
                        <p>
                            select folder:&nbsp;<span><asp:DropDownList ID="ddl_favoritter" runat="server" DataTextField="FavoritterFolderNavn"
                                DataValueField="FavoritterFolderID" AppendDataBoundItems="true">
                            </asp:DropDownList>
                            </span>
                        </p>
                        <br />
                        <asp:Button ID="Button1" runat="server" Text="Gem" onclick="Button1_Click"/>
                    </div>

Answer 1

You need to have the code that fills the text box and selects the drop down item inside of the if(!IsPostBack) block, because the page load event fires again before the button event (See the ASP.NET Page Life Cycle for more info on this). Have you tried enabling view state on the control? That may be part of the issue.

Answer 2

The problem is a lot of these controls, not just FaceBox append themselves to the body by default. jQuery UI dialog does this as well.

See this question for a fix: JQuery Facebox Plugin : Get it inside the form tag

When things happen outside the <form> tag, they're disconnected from how ASP.Net works. When you clicked submit, the values from those inputs weren't inside the form, so didn't submit to the server...which is why you aren't seeing the values.

This is the quick answer from that question, credit to Kevin Sheffield:

poking around the facebox.js I came across this line in the function init(settings)...

$('body').append($.facebox.settings.faceboxHtml)

I changed that to ...

$('#aspnetForm').append($.facebox.settings.faceboxHtml)

Answer 3

I found the answer in this thread:

http://stackoverflow.com/questions/2027290/facebox-adding-commas-to-input

Thanks guys, and thank you Nick Craver for your help