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

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

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

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

Answer 2

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

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... 
    }

}