如何刷新下拉列表而不重新加载页面

本文关键字：新加载 加载 何刷新 刷新 下拉列表 | 更新日期: 2023-09-27 18:03:27

我的页面有两个下拉列表:

<asp:DropDownList AutoPostBack="True" OnSelectedIndexChanged="ddlMain_SelectedIndexChanged" ClientIDMode="Static" ID="ddlMain" name="searchPhys" style="width: 365px;" class="default" runat="server" AppendDataBoundItems="true">
    <asp:ListItem Text="BY PHYSICIAN" Value="0" Selected="True" />
    <asp:ListItem Text="BY LOCATION" Value="1" />
    <asp:ListItem Text="BY SPECIALTY" Value="2" />
</asp:DropDownList>
<br /><br />
<asp:DropDownList ClientIDMode="Static" ID="ddlDrillDown" name="searchPhys" style="width: 365px;" class="default" runat="server" AppendDataBoundItems="true">
</asp:DropDownList>

处理下拉列表更改的代码是:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Xml.Linq;
using System.Configuration;
using System.Windows.Forms;
using System.Data;
public partial class physicians : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e) {
    if (!Page.IsPostBack) {
        PopulatePhysician();
    }
    //PopulateSpecialty();
    //PopulateLocation();
    }
    public void PopulatePhysician() {
        SqlCommand cmd = new SqlCommand("getPhysicians", new SqlConnection(ConfigurationManager.AppSettings["ConnString"]));
        //cmd.CommandType = Data.CommandType.StoredProcedure
        cmd.Connection.Open();
        SqlDataReader ddlValues = default(SqlDataReader);
        ddlValues = cmd.ExecuteReader();
        //if (!IsPostBack) {
            ddlDrillDown.Items.Clear();
            ddlDrillDown.DataSource = ddlValues;
            ddlDrillDown.DataValueField = "content_id";
            ddlDrillDown.DataTextField = "content_title";
            ddlDrillDown.DataBind();
            //set the default value for the drop down
            ListItem Item = new ListItem();
            Item.Text = "Select a Physician's Name";
            Item.Value = "0";
            //Item.Selected = True
            ddlDrillDown.Items.Insert(0, Item);
        //}
    cmd.Connection.Close();
    cmd.Connection.Dispose();
    }
    public void PopulateSpecialty() {
        SqlCommand cmd = new SqlCommand("getSpecialties", new SqlConnection(ConfigurationManager.AppSettings["ConnString"]));
        cmd.Connection.Open();
        SqlDataReader ddlValues = default(SqlDataReader);
        ddlValues = cmd.ExecuteReader();
        //if (!IsPostBack) {
            ddlDrillDown.Items.Clear();
            ddlDrillDown.DataSource = ddlValues;
            ddlDrillDown.DataValueField = "content_id";
            ddlDrillDown.DataTextField = "content_title";
            ddlDrillDown.DataBind();
            //set the default value for the drop down
            ListItem Item = new ListItem();
            Item.Text = "Select a Specialty";
            Item.Value = "0";
            ddlDrillDown.Items.Insert(0, Item);
        //}
        cmd.Connection.Close();
        cmd.Connection.Dispose();
    }
    public void PopulateLocation() {
        SqlCommand cmd = new SqlCommand("getLocations", new SqlConnection(ConfigurationManager.AppSettings["ConnString"]));
        cmd.Connection.Open();
        SqlDataReader ddlValues = default(SqlDataReader);
        ddlValues = cmd.ExecuteReader();
        //if (!IsPostBack) {
            ddlDrillDown.Items.Clear();
            ddlDrillDown.DataSource = ddlValues;
            ddlDrillDown.DataValueField = "content_id";
            ddlDrillDown.DataTextField = "content_title";
            ddlDrillDown.DataBind();
            //set the default value for the drop down
            ListItem Item = new ListItem();
            Item.Text = "Select a Location";
            Item.Value = "0";
            ddlDrillDown.Items.Insert(0, Item);
        //}
        cmd.Connection.Close();
        cmd.Connection.Dispose();
    }
    public void ddlMain_SelectedIndexChanged(object sender, System.EventArgs e) {
        switch(ddlMain.SelectedIndex) {
            case 0:
                PopulatePhysician();
                break;
            case 1:
                PopulateLocation();
                break;
            case 2:
                PopulateSpecialty();
                break;
        }
    }
}

我试图添加到上面的功能是，当用户从ddlMain下拉列表中选择一个选项时，根据该选项刷新ddlDrillDown下拉列表，而无需重新加载页面。

我怎样才能实现它?

更新:

<asp:ScriptManager ID="ScriptManager" 
                               runat="server" />
            <asp:UpdatePanel ID="UpdatePanel1" 
                             UpdateMode="Conditional"
                             runat="server">
                <ContentTemplate>
                    <asp:DropDownList AutoPostBack="True" OnSelectedIndexChanged="ddlMain_SelectedIndexChanged" ClientIDMode="Static" ID="ddlMain" style="width: 365px;" class="default" runat="server" AppendDataBoundItems="true">
                        <asp:ListItem Text="BY PHYSICIAN" Value="0" Selected="True" />
                        <asp:ListItem Text="BY LOCATION" Value="1" />
                        <asp:ListItem Text="BY SPECIALTY" Value="2" />
                    </asp:DropDownList>
                    <br /><br />
                    <asp:DropDownList ClientIDMode="Static" ID="ddlDrillDown" style="width: 365px;" class="default" runat="server" AppendDataBoundItems="true">
                    </asp:DropDownList>
                    </ContentTemplate>
            </asp:UpdatePanel>

如何刷新下拉列表而不重新加载页面

使用AJAX。将两个下拉控件放在UpdatePanel中，然后在页面的打开表单标签之后添加ScriptManager(如果还没有)

如果是这种情况，Ajax方法应该可以解决您的问题。由于您是Ajax的新手，我将描述更多的细节。

  1. 同一页面中只能有一个ScriptManager。(如果使用母版页，添加到母版页，无需在嵌套内容页中添加)

  2. 添加UpdatePanel和添加控件到UpdatePanel的ContentTemplate

  3. 在主下拉列表中添加AutoPostBack="True"

  4. 通过双击主下拉列表添加SelectedIndexChanged事件

  5. 在主下拉列表的SelectedIndexChanged事件中，通过添加ddlDrillDown. items . clear()方法清除ddlDrillDown项，并根据主下拉列表的值重新绑定所需的数据

您可以使用ajax实现此目标。

创建返回项目列表的asmx-service或webApi控制器。

建议您可以使用UpdatePanel。请不要使用ClientIDMode="Static"，除非你真的，真的需要。

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:DropDownList AutoPostBack="True" OnSelectedIndexChanged="ddlMain_SelectedIndexChanged" ID="ddlMain" runat="server">
            <asp:ListItem Text="BY PHYSICIAN" Value="0" Selected="True" />
            <asp:ListItem Text="BY LOCATION" Value="1" />
            <asp:ListItem Text="BY SPECIALTY" Value="2" />
        </asp:DropDownList>
        <asp:DropDownList ID="ddlDrillDown" name="searchPhys" runat="server">
        </asp:DropDownList>
    </ContentTemplate>
</asp:UpdatePanel>

现在UpdatePanel的问题是，它不刷新页面，但重新加载DOM。因此，使用jQuery所做的任何更改都会丢失。这就是为什么你失去了DropKick CSS。您需要再次触发$("#ID").dropkick(。为此你可以使用PageRequestManager。

<script type="text/javascript">
    $(document).ready(function () {
        TriggerDropkick();
    });
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function () {
        TriggerDropkick();
    });
    function TriggerDropkick() {
        $("#<%= ddlMain.ClientID %>, #<%= ddlDrillDown.ClientID %>").dropkick({
            mobile: true
        });
    }
</script>

还建议使用服务来获取下拉列表的值。这是可能的，但因为这是webforms，你需要禁用一些验证，以防止Invalid postback or callback argument异常。

您可以使用的另一种方法是Asp。. Net [Webmethod] Attribute.

在服务器端代码中创建一个带有[Webmethod]属性的方法。在前端，使用window.PageMethods。(您的方法名)来调用服务器调用。

我使用了依赖下拉列表方法。如何?:

  1. DropDownList1_SelectedIndexChanged的内容放到子目录

例如:

Sub Drop1()
YOURCOD
End Sub
  • in DropDownList1_SelectedIndexChanged call Drop1()
  • 创建相同的DropDownList2_SelectedIndexChanged (Drop2())

    • 现在在DropDownList1_SelectedIndexChanged中调用Drop1和Drop2。就是这样。

    相关文章：