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;
}

Show the code of your code-behind file. how you bind your combo ?? — Krishnraj Rana, Aug 01 '14 at 13:26
Thanks for reply.. Check the back end code included @KrishnrajRana — Chamithra Thenuwara, Aug 01 '14 at 14:23
Try **SelectedValue** instead of SelectedItem like this - int.Parse(FilterCombo.SelectedValue); — Krishnraj Rana, Aug 01 '14 at 14:41
@KrishnrajRana - It gives me the value of the 0th index, not the selected one :( — Chamithra Thenuwara, Aug 01 '14 at 14:52
You say that the SelectedIndex is returning 0 but your code shows you are using int Id = int.Parse(FilterCombo.SelectedItem.Value.ToString()); Did you try SelectedIndex and that didn't work? — sr28, Aug 01 '14 at 15:59
@sr28 - Yes. previously I tried to get Value using int index=FilterCombo.SelectedIndex; and then FilterCombo.Items[index].Value; Both didn't work.. — Chamithra Thenuwara, Aug 01 '14 at 16:37
@CR7 By setting the 'UseSubmitBehavior' to false, you are telling the .Net framework to insert it's own JS scripts to handle the postback, as opposed to letting the browser handle the submit. Are there any script errors showing in the JS console of your browser which could interfering, or appear as you click the submit button? Can you set the **UseSubmitBehaviour=true** on a new blank standalone test page to see if you can get this to postback on a button click? If this works, then you can try adding a basic dropdownlist to make sure the selectedindex is correct and build it up from there. — Radderz, Aug 01 '14 at 17:59
@Radderz - 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. Check the updated code.. — Chamithra Thenuwara, Aug 01 '14 at 19:50
Does the form have any validation control? If it does, try setting CausesValidation property to "false" on ApplyButton or use the ValidationGroup property of the validation controls. Also check that you have not forgotten to include you "Form tag" ie.
all your asp.net controls in here — Simua, Aug 01 '14 at 20:03

score 3 · Accepted Answer · edited May 23 '17 at 12:24

3

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;
}

edited May 23 '17 at 12:24

Community

1
1

answered Aug 01 '14 at 13:32

Radderz

2,770
4
28
40

Thanks for reply.. Check the back end code included – Chamithra Thenuwara Aug 01 '14 at 14:17
appendTo($("form:first"). can you explain this "form:first" part ? I'm a newbie to these kind of stuff.. – Chamithra Thenuwara Aug 02 '14 at 07:21
1

For the .Net postbacks to work, the JQuery dialog has to be added to the form. I believe it is separated so that JQuery dialog can control/lock the UI, handling custom buttons and preventing users from submitting other buttons (I may have this wrong, as it still successfully blocks the UI). Anyway, some internals of this system seperates the form data and thus prevents .Net postbacks. Even forcing a postback by using 'UseSubmitBehavior=False' still prevents data being passed to the back end as it exists outside the .Net Form – Radderz Aug 02 '14 at 10:44

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

1 Answers1