Question

我的项目中有两个下拉列表，分别为ddFtherEmployeeNumber和ddFatherName。在ddFatherEmployeeNumber selectedIndexChange事件中，我希望将数据从数据库加载到ddEmployeeFatherName中。

我已经做到了，并且效果很好。但是存在一个问题，在indexchange事件的每次迭代之后，它都会刷新页面，而我不喜欢那样。我在网上搜索过，但找不到更好的解决方案。

这就是为什么我来到这里并发表我的问题。很多人说您必须使用jQuery Ajax来做，还有一些人提到UpdatePanel。但是我对jQuery一无所知。所以，伙计们，请帮帮我。通过UpdatePanel或jQuery Ajax。

这是我的.aspx页

<div class="form-group row">
                            <!--Row two-->
                            <div class="col-md-8 forLabels">
                                <div class="col-md-6"></div>
                                <asp:Label ID="EmpFatherEmployeeNo" for="EmpFatherEmployeeNo" runat="server" Visible="True">Father Employee Number*</asp:Label>
                                <asp:DropDownList ID="ddFatherEmployeeNumber" runat="server" CssClass="input-sm form-control custom" AutoPostBack="True" DataTextField="EmployeeNo" DataValueField="Id" OnSelectedIndexChanged="ddFatherEmployeeNumber_SelectedIndexChanged" ClientIDMode="Static" AppendDataBoundItems="true"></asp:DropDownList>
                            </div>
                            <div class="col-md-4 forLabels">
                                <asp:Label ID="EmpFatherName" for="EmpFatherName" runat="server">Father Name</asp:Label>
                                <asp:DropDownList ID="ddEmployeeFatherName" runat="server" DataTextField="Name" DataValueField="Id" CssClass="input-sm form-control"></asp:DropDownList>
                            </div>
                        </div>

这是我的ddFatherEmployeeNumber_SelectedIndexChanged

 protected void ddFatherEmployeeNumber_SelectedIndexChanged(object sender, EventArgs e)
    {
            SqlParameter param = new SqlParameter("@EmployeeNo", ddFatherEmployeeNumber.SelectedItem.Text);
            DataSet DS = GetData("spGetFatherNameByFatherEmployeeNumber", param);
            ddEmployeeFatherName.DataSource = DS;
            ddEmployeeFatherName.DataBind();
    }

这是我的GetData方法

private DataSet GetData(string SPName, SqlParameter SPParameter)
    {
        DataSet DS = new DataSet();
        using (SqlConnection con = new SqlConnection(Base.GetConnection))
        {

            SqlDataAdapter ad = new SqlDataAdapter(SPName, con);
            ad.SelectCommand.CommandType = CommandType.StoredProcedure;
            if (SPParameter != null)
            {
                ad.SelectCommand.Parameters.Add(SPParameter);
            }
            ad.Fill(DS);
        }
        return DS;
    }

这样做的目的是，我有IsValidated()方法，

private bool IsValidated()
    {
        if (tbEmployeeName.Text == string.Empty)
        {
            tbEmployeeName.BorderColor = Color.Red;
            ShowNotification("Error: Name is required!", WarningType.Danger);
            tbEmployeeName.Focus();
            return false;
        }
        if (tbEmployeeApplicationNo.Text == string.Empty)
        {
            tbEmployeeName.BorderColor = Color.Transparent;
            tbEmployeeApplicationNo.BorderColor = Color.Red;
            ShowNotification("Error: Application Number is Required!", WarningType.Danger);
            tbEmployeeApplicationNo.Focus();
            return false;
        }
    return true;
    }

现在，当我不输入Name或ApplicationNo并按Add按钮时，它向我显示Message这是必需的。这里的程序运行良好，但是第二次当我在必填字段中未输入任何内容时，它再次显示了一条消息，但这一次，下拉列表ddFatherEmployeeNo无法加载数据。我不明白为什么在几次回发操作后它失去了数据源。这是清晰了解的图片。这是它第一次完美载入记录，这是图片

但是，当IsValidated()函数给我一条消息Name is required or something like that时，ddFatherEmployeeNo下拉列表将丢失其datasource。这是图片

所以我的主要问题是，如何防止在_SelectedIndexChanged事件上刷新页面，以及如何阻止我面临的Error。Dropdownlist loses its DataSource after postback。这是我的Page_Load事件代码

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            ddFatherEmployeeNumber.DataSource = GetData("spGetFatherEmployeeNumber", null);
            ddFatherEmployeeNumber.DataBind();
            ddFatherEmployeeNumber.Items.Insert(0, new ListItem("Select Father Employee No", "0"));
        } 
    }

更新：我有一个script用于选择数据。这是

 <%--Code for Selecting Dropdown List Item--%>
    <script>
        $(document).ready(function () {
            $("#ddFatherEmployeeNumber").select2({
                placeholder: "Select an option",
                allowClear: true
            });
        });
    </script>

我认为这与回发有关。

Answer 1

由于您在问题中提到您不知道jquery或ajax是什么，因此我将写一个小答案来解释这两个（即使在线搜索它也会为您提供1000的解释！）

Jquery是一个JavaScript库，可帮助您编写跨浏览器/跨平台的javascript，而不必担心确保编写用于满足所有浏览器的JS代码。当浏览器不大量使用标准JS实现时（尤其是用于DOM操作，事件处理和AJAX的时候），它就广为人知并仍被广泛使用。

使用jquery，您可以相当轻松地操作DOM（文档对象模型），这基本上是浏览器窗口中的所有内容（文档本身，主体标签以及文档中的所有其他标签）。当我说“操纵”时，它意味着您可以以编程方式添加新标签，更改标签，更改标签内容，在正文中搜索某些标签，然后对它们进行操作（更改其CSS），这意味着可以更改颜色DIV，边框，动画等。

您还可以做AJAX的东西。您问什么是AJAX。

AJAX是异步Javascript和XML的缩写。简而言之，它可以帮助您的网页（更具体地说是网页中的javascript）调用后端服务器（无论是ASP.NET，Python，PHP还是后端的任何东西）来推动或拉动数据，而不必重新加载页面。因此，名称为异步。因为，您可能可以对多个后端进行多个AJAX调用，并且您的网页不需要刷新。浏览器将自动处理从后端接收的那些数据，并调用将处理响应的函数。

然后，这些函数（javascript函数）可以使用返回的数据，对DOM进行更改（无论是否升级下拉列表），更改某些内容的颜色，添加通知标志或任何您想像的内容可以让你想象。

我强烈建议您至少从看一个涵盖jquery和ajax的简单资源开始，例如w3schools，尽管有些人认为这不是最好的资源，或者不是最注重安全性的的资源。当您对某个主题完全一无所知时，这样做至少可以使您早日入门。

希望我的回答有帮助。

为了帮助您，我将编写一些代码，其中结合了PHP后端，jquery和AJAX调用。这只是我正在研究的项目中的一个例子...

 $('#floor').change(function() { //A dropdown list...

    //console.log("was floor triggered");
    $('#currentTenants').html(""); //jquery at work... 
    $('#employeeDetailsForm').hide();
    $('#tenantSummaryBar').css('background-color','rgba(255,255,255,1)'); //jquery adding new css to a DOM element
    $('#tenantCount').html("");

    var floorID = $(this).val(); //preparing my JSON object.. 

    $.post(
        '<?php echo $this->createUrl("EmployeeMovements/getRoomsFromFloorID"); ?>', //the backend which will asynchronously, without page refresh, receive the floor ID..
        {data: floorID}, //telling AJAX what to send.. in a POST request, but asynchronously..almost like a FORM submit button, but without the refresh.
        function(data) // the function that will be called WHEN the backend replies to us.. so your other JS can keep running... and when the browser is notified .. it'll come here to call this function.
        {
            var result = JSON.parse(data); //I receive the data in a JSON format (it could be XML), and I'm asking for JS to help parse it.
            var newOptions = "";

            for(i in result) //iterating through the result..
            {
                newOptions += "<option value='" + result[i]['roomID'] + "'>" + result[i]['roomCode'] + "</option>"; //preparing new 'options for a dropdown list based on the server's response
            }

            $('#room').html(newOptions); //using jquery to update yet another drop down list..

后端代码更加简单：

public function actiongetRoomsFromFloorID()
{
    if(isset($_POST['data'])) //checking if there is POST data
    {
        $rooms = Rooms::model()->findAllByAttributes(array('floorID'=>$_POST['data'])); //using my frameworks's ORM to get my data based on what the FRONT END (AJAX query asked me..)

        print json_encode($rooms); //sending back the data by just echoing back the response, and encoding in JSON format... 
    }

}

Answer 2

在页面中添加Layer并将控件包装在ScriptManager中，如下所示。然后，它将不会在事件更改时刷新您的页面。

UpdatePanel

有关更多详细信息，请遵循link

如何在下拉列表索引已更改的事件上从数据库检索数据而无需刷新网页

2 个答案: