Question

我们有一个包含多个文本框的搜索页面，用户可以输入数据进行搜索。有日期文本框，可以输入日期范围。您可以在下拉列表中选择要过滤的日期字段。

默认情况下，未启用日期范围文本框。只有在下拉列表中选择日期字段时，才能输入日期。默认下拉选项为“”空白。

如果您选择日期字段，然后在下拉列表中更改为另一个日期字段，则一切正常。如果在下拉列表中选择日期字段，然后切换回默认的“”空白，则会触发搜索。我不希望这种情况发生。我只希望在他们点击搜索按钮时进行搜索。

  protected void ddlDateType_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (ddlDateType.SelectedValue != "")
        {
            txtSearchEndDate.Enabled = true;
            txtSearchStartDate.Enabled = true;
        }

        else
        {
            txtSearchEndDate.Text = "";
            txtSearchStartDate.Text = "";
            txtSearchEndDate.Enabled = false;
            txtSearchStartDate.Enabled = false;
        }
    }

有人可以告诉我当有人切换回下拉列表中的默认选项时，如何停止搜索运行？

我注释掉了if else代码并仍然得到了相同的结果。选择除默认值之外的任何内容都不会启动搜索，选择默认值“”将触发搜索。

Answer 1

我认为你可能最好更改逻辑以在javascript中运行，这样就不必回发整个页面来启用或禁用控件。

我在下面添加了一些示例代码，您将从客户端事件触发所选索引已更改，我相信这是onchange事件。您可以在代码隐藏中添加此事件，如下所示：

ddlDateType.Attributes.Add（“onchange”，“OnDateTypeChanged（）”）;

此代码还更改了文本框的类，以包含TextDisabled CSS类，以直观地指示文本框已禁用，但这是可选的。

function OnDateTypeChanged() {
    var ddList = document.getElementById("ddlDateType");
    var fReadOnly = true;
    if (ddList.selectedIndex >= 0)
    {
        fReadOnly = (ddList.options[ddList.selectedIndex] != '');
    }

    var oTextBox;

    oTextBox = document.getElementById("txtSearchEndDate");
    SetTextboxReadOnly(oTextBox, fReadOnly);
    if (fReadOnly) {
       oTextBox.value = '';
    }

    oTextBox = document.getElementById("txtSearchStartDate");
    SetTextboxReadOnly(oTextBox, fReadOnly);
    if (fReadOnly) {
       oTextBox.value = '';
    }
}

function SetTextboxReadOnly(oTextBox, fReadOnly) {
    /// <summary>This method sets or clears the readonly flag on an textbox. It also updates the class information to
    /// ensure that the control is displayed correctly to the user</summary>

    if (oTextBox) {
        oTextBox.readOnly = fReadOnly;
        oTextBox.className = UpdateClassForReadOnlyChange(fReadOnly, oTextBox.className);
    }
}

function UpdateClassForReadOnlyChange(fReadOnly, sClassName) {
    /// <summary>This is an internal method used to update a class based on the readonly flag</summary>

    if (fReadOnly) {
        return 'TextDisabled ' + sClassName;
    } else {
        return sClassName.replace(/TextDisabled /gi, '');
    }
}

下拉默认选择导致搜索开始

1 个答案: