如何在不刷新网页的情况下从下拉列表索引更改事件的数据库中检索数据

Posted 2023-05-09

【中文标题】如何在不刷新网页的情况下从下拉列表索引更改事件的数据库中检索数据

【英文标题】：How to retrieve data from database on dropdownlist index changed event without refreshing web page

【发布时间】：2019-06-21 02:20:25

【问题描述】：

我的项目中有两个下拉列表，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>

我认为这与回发有关。

【问题讨论】：

您可以使用级联下拉列表或更新面板

【参考方案1】：

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

Jquery 是一个 javascript 库，可帮助您编写跨浏览器/跨平台的 javascript，而无需担心确保您编写的 JS 代码适合所有浏览器。当浏览器没有大量使用标准 JS 实现时（尤其是 DOM 操作、事件处理和 AJAX），它变得有名并仍然被广泛使用。

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

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

AJAX 是 Aynchronous 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... 
    

【讨论】：

感谢您提供详细信息。也许我问过什么是 Jquery 或 AJAZ，但我并不是说我不知道​​这些服务器端技术。我的主要动机是我不知道如何通过 Jquery AJAX 从数据库中获取数据。无论如何，我给你+1的信息。谢谢。

这不是一个小答案

@Af'faq，谢谢 :) 我想也许你是他们的新手，因此我觉得我可以让你受益

【参考方案2】：

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

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>
        <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>
       </ContentTemplate>
    </asp:UpdatePanel>

更多详情请关注link

【讨论】：

请注意，UpdatePanel 仍会刷新整个页面。但是您看不到它，因为在 UI 中仅更新了已更改的部分。

是的，我已经这样做了，但是下拉列表数据源存在问题，它在几次回发后丢失了它的源。或者如果我可以解释为，当我单击按钮时，没有在必填字段中放置任何内容，它会阻止记录保存到数据库中。现在第二次如果我再次这样做，那么下拉列表丢失了它的数据源。通过丢失的方式，下拉列表中没有显示任何内容。它弹出一条消息，没有找到记录。那是我的全部问题兄弟。为什么下拉列表不显示记录？

@VDWWD 但是 MSDN 说是 UpdatePanel remove the requirement to refresh the whole page with each postback。它会在 UI 中进行部分页面更新。

是的，页面没有刷新。但所有代码仍在 page_load 中运行，就像“正常”页面刷新一样。

第一次它会在加载事件上加载数据，之后它不会因为!IsPostBack函数。所以我认为这不是问题所在。