Как получить данные из базы данных в событии изменения индекса раскрывающегося списка без обновления веб-страницы

В моем проекте есть два выпадающих списка: 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>

Я думаю, что это как-то связано с постбеком.

🤔 А знаете ли вы, что...
C# позволяет создавать собственные библиотеки классов и использовать их в других проектах.


290
2

Ответы:

Поскольку вы упомянули в своем вопросе, что не знаете, что такое jquery или ajax, я собираюсь написать небольшой ответ, объясняющий эти два (хотя поиск в Интернете предоставит вам тысячи объяснений!)

Jquery — это библиотека javascript, которая помогает вам писать кроссбраузерный/кроссплатформенный javascript, не беспокоясь о том, что вы пишете код JS для обслуживания всех браузеров. Он стал известен и до сих пор широко используется, когда браузеры не слишком активно использовали стандартные реализации JS (особенно для манипуляций с DOM, обработки событий и AJAX.

С помощью jquery вы можете довольно легко манипулировать DOM (объектная модель документа), которая в основном представляет собой все в окне вашего браузера (сам документ, теги body и все другие теги в вашем документе). Когда я говорю манипулировать, это означает, что вы можете программно добавлять новые теги, изменять теги, изменять содержимое тегов, искать определенные теги в теле, а затем воздействовать на них (изменять их CSS), что означает возможность изменять цвет тегов. DIV, граница, анимация и т. д.

Что вы также можете сделать, так это материал 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.info("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... 
    }

}

На своей странице добавьте 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>

для получения более подробной информации следуйте ссылка на сайт