ASP.NET Button OnClick not firing without setting UseSubmitBehavior=“false”

Question

My problem is in asp.net Button control and DropDownList.

I have a Button called ApplyButton and a DropDownList called FilterCombo.

<asp:Button ID="ApplyButton" runat="server" Text="Apply Filter" OnClick="ApplyButton_Click" />

<asp:DropDownList ID="FilterCombo" runat="server" ></asp:DropDownList>

I want to call a method which accept a int as a parameter using my DropDownList's (FilterCombo) SelectedIndex In ApplyButton's OnClick event. But Onclick event of Button is not firing when I click on the Button. But it works if I set Button's UseSubmitBehavior="false".

<asp:Button ID="ApplyButton" runat="server" Text="Apply Filter" OnClick="ApplyButton_Click" UseSubmitBehavior="false" />

Now the OnClick method is firing well. But the problem is FilterCombo.SelectedIndex always returns 0. Why can't I fire the Onclick event without setting UseSubmitBehavior="false" and How can I get the correct SelectedIndex of FilterCombo ?

Here is the backend code for Page_Load,

protected void Page_Load(object sender, EventArgs e)
{
    LeftSideBarHolder.Controls.Add(Page.LoadControl("~/Pages/Common_wa/LeftPanel.ascx"));
    HeaderHolder.Controls.Add(Page.LoadControl("~/Pages/Common_wa/Header.ascx"));

    try
    {
        string columns = Request["columns"];
        string[] arr = columns.Split(';');
        pkey = bool.Parse(arr[0]);
        leader = bool.Parse(arr[1]);
        type = bool.Parse(arr[2]);
        level = bool.Parse(arr[3]);
        state = bool.Parse(arr[4]);
        dueDate = bool.Parse(arr[5]);
    }
    catch (Exception ex)
    {
        //do nothing : This is the parameterless request
    }

    if (!IsPostBack)
    {
        Owner = int.Parse(Session["userID"].ToString());
        ViewState["PreviousPage"] = Request.UrlReferrer;
        LoadFilters();

        if (pkey) pKeyCheckBox.Checked = true;
        if (leader) LeaderCheckBox.Checked = true;
        if (type) TypeCheckBox.Checked = true;
        if (level) LevelCheckBox.Checked = true;
        if (state) StateCheckBox.Checked = true;
        if (dueDate) DueDateCheckBox.Checked = true;
    }
    try
    {
        DTO.Search.SearchResult SearchResult_new = (DTO.Search.SearchResult)Session["SearchResults"];
        Result = SearchResult_new.Result;
    }
    catch (Exception ex)
    {

    }
}

Code for LoadFilters() - Used to load data to the FilterCombo

private void LoadFilters()
{
    SearchUtils util = new SearchUtils();
    int Owner = int.Parse(Session["userID"].ToString());

    DataSet filters = util.GetFiltersOfOwner_AsDataSet(Owner);
    FilterCombo.DataSource = filters;
    FilterCombo.DataValueField = "Id";
    FilterCombo.DataTextField = "Name";
    FilterCombo.DataBind();
}

OnClick event of ApplyButton

protected void ApplyButton_Click(object sender, EventArgs e)
{
    SearchUtils util = new SearchUtils();
    int Id = int.Parse(FilterCombo.SelectedItem.Value.ToString());
    SearchFilter filter = util.GetFilter(Id);
    string Columns = filter.Columns;
    string[] arr = Columns.Split(';');
    pkey = bool.Parse(arr[0]);
    leader = bool.Parse(arr[1]);
    type = bool.Parse(arr[2]);
    level = bool.Parse(arr[3]);
    state = bool.Parse(arr[4]);
    dueDate = bool.Parse(arr[5]);
    Response.Redirect("SearchResult_new.aspx?columns=" + pkey + ";" + leader + ";" + type + ";" + level + ";" + state + ";" + dueDate + "");
}

Update : I think i found the reason. But don't know a solution.. My Button and DropDownList are in a Div which is working as a jQuery Dialog which is invoke by a JavaScript function.

<%-- Load Filter Dialog Box --%>
<div id="loadFilterDialog" title="Apply Filter" style="display: none">
    <div class="BodyPanelDiv">
        <asp:DropDownList ID="FilterCombo" runat="server"></asp:DropDownList>
    </div>
    <div class="BottomPanelDiv" align="Right">
        <asp:Button ID="ApplyButton" runat="server" Text="Apply Filter" OnClick="ApplyButton_Click" UseSubmitBehavior="false" />
        <asp:Button ID="CancelButton2" runat="server" Text="Cancel" OnClientClick="return closeDialog(2); return false;" />
    </div>
</div>
<%-- End of Load Filter Dialog Box --%>

Here is the JavaScript which invokes the Dialog

//Display JQuery Dialog 
function showDialog() {
    $("#loadFilterDialog").dialog({
        draggable: true,
        resizable: false,
        width: 350,
        height: 150,
        minHeight: 10,
        minwidth: 10
    });
    return false;
}

Answer 1

This answer is marked in my favorites. To use .Net postbacks with jQuery dialog, you have to play around with forms. The good thing is it's a simple fix; but I keep this solution bookmarked as it's one of those that is a bit obscure.

jQuery UI Dialog with ASP.NET button postback

So your above code becomes:

//Display JQuery Dialog 
function showDialog() {
  $("#loadFilterDialog").dialog({
    draggable: true,
    resizable: false,
    width: 350,
    height: 150,
    minHeight: 10,
    minwidth: 10
  });
  $("#loadFilterDialog").parent().appendTo($("form:first"));

  return false;
}