如何避免ASP按钮单击事件的回发

Question

I am using the jQuery multiselect in that I am using button click event which goes the server side and the populates the values on the other dropdownlist. Based on the checked selection in the drop down list it populate the values in the other dropdownlist.

Issue:

For eg: in the first jQuery multiselect dropdown if I select 3 values and close the dropdownlist based on these three values checked the details are fetched in the other jQuery multiselect dropdownlist but the last checked value only is checked and that is retaining. I think it is because of button click event it occurs a asynchronous postback and the values is not retaining. Is their any option to prevent that postback in the button click event but the click should be called then only the values will be retained.

For these I am attaching the screen shot:

Based on that three values it is loaded in the other dropdownlist but it is shows "1 selected" that is default "Select".

But the second dropdownlist I can able to get the values that is checked in the first dropdown list:

this is my javascript:

  $(document).ready(function () {

            $('.department').multiselect({
                show: ["bounce", 5], hide: ["blind", 1],

                close: function () {
                    debugger;
                    var values = new Array();

                    $(this).multiselect("getChecked").each(function (index, item) {
                        values.push($(item).val());
                    });
                    $("input[id*=selectedValues]").val(values.join(","));
                    document.getElementById("<%=hdnDepartment.ClientID %>").value = values;
                    if (document.getElementById("<%=hdnDepartment.ClientID %>").value != "") {
                        **$("#<%=Button1.ClientID %>")[0].click();**

                    }
                }

            })
        .multiselectfilter();
        });

protected void Button1_Click(object sender, EventArgs e)
    {
        Populate();
    }

Correct me if i am wrong...

Answer 1

You can use OnClientClick and return false or true as per your requirement. When OnClientClick return true postback will occur else no postback

Answer 2

 <script type="text/javascript">
      function pageLoad() {
           $("#<%= DepartmentsListBox.ClientID %>").multiselect({
                create: function () {
                     $(this).data("initValues", $.map($("option:selected", this), function (option) { return option.value; }).join(","));
                },
                close: function () {
                     var selectedValues = $.map($("option:selected", this), function (option) { return option.value; }).join(",");
                     if (selectedValues !== $(this).data("initValues")) {
                          __doPostBack("<%= DepartmentsListBox.UniqueID %>", "");
                     }
                }
           });

           $("#<%= EmployeesListBox.ClientID %>").multiselect();
      }
 </script>


 <asp:UpdatePanel runat="server" UpdateMode="Always">
      <ContentTemplate>
           <asp:ListBox runat="server" ID="DepartmentsListBox" DataValueField="DepartmentId"
                SelectionMode="Multiple" DataTextField="Name" Width="300px"></asp:ListBox>
           <br />
           <asp:ListBox runat="server" ID="EmployeesListBox" Width="300px" SelectionMode="Multiple" AppendDataBoundItems="true"
                DataValueField="EmployeeId" DataTextField="Name"></asp:ListBox>
           <br />
           <asp:Button runat="server" ID="SubmitButton" Text="Submit" />
      </ContentTemplate>
 </asp:UpdatePanel>

Server code

private static Random rnd = new Random();

private string[] selectedDepartments;
private string[] SelectedDepartments
{
    get
    {
        return selectedDepartments ?? (selectedDepartments = DepartmentsListBox.Items.OfType<ListItem>().Where(item => item.Selected).Select(item => item.Value).ToArray());
    }
}

protected void Page_Init(object sender, EventArgs e)
{
    EmployeesListBox.PreRender += new EventHandler(EmployeesListBox_PreRender);
    DepartmentsListBox.SelectedIndexChanged += new EventHandler(DepartmentsListBox_SelectedIndexChanged);
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindDepartments();
    }
}

void EmployeesListBox_PreRender(object sender, EventArgs e)
{
    if (EmployeesListBox.Items.Count > 0)
    {
        EmployeesListBox.Attributes.Remove("disabled");
    }
    else
    {
        EmployeesListBox.Attributes["disabled"] = "disabled";
    }
}

private void BindDepartments()
{
    var departments = Enumerable.Range(1, 10)
        .Select(id => new { DepartmentId = id, Name = "Department " + id.ToString() });
    DepartmentsListBox.DataSource = departments;
    DepartmentsListBox.DataBind();
}

void DepartmentsListBox_SelectedIndexChanged(object sender, EventArgs e)
{
    var employees = Enumerable.Range(1, 10)
        .Select(id => new { EmployeeId = id, DepartmentId = rnd.Next(1, 10), Name = "Employee #" + id.ToString() })
        .Where(emp => SelectedDepartments.Contains(emp.DepartmentId.ToString())).ToList();

    for (int itemIndex = EmployeesListBox.Items.Count - 1; itemIndex >= 0; itemIndex--)
    {
        var employee = employees.FirstOrDefault(emp => emp.EmployeeId.ToString() == EmployeesListBox.Items[itemIndex].Value);
        if (employee == null)
        {
            EmployeesListBox.Items.RemoveAt(itemIndex);
        }
        else
        {
            employees.Remove(employee);
        }
    }

    EmployeesListBox.DataSource = employees;
    EmployeesListBox.DataBind();
}