Отправка значения после изменения Syncfusion DateRangePicker

Question

Я использую элемент управления Suncfusion DateRangePicker на веб-сайте AspNet Core. Рассматриваемая страница является отображением некоторых данных только для чтения, которые управляются окном данных, следовательно, DateRangePicker.

      <ejs-daterangepicker id="dateRange" cssClass="float-right" format="@Model.DateFormatString">
    <e-daterangepicker-presets>
        @foreach (var dataWindow in Model.PredefinedDataWindows){
            <e-daterangepicker-preset label="@dataWindow.Name" 
                                      start="@dataWindow.Start" 
                                      end="@dataWindow.End">
            </e-daterangepicker-preset>
        }
    </e-daterangepicker-presets> 
</ejs-daterangepicker>

Когда выбран другой диапазон дат, я хочу отправить сообщение на сервер, запустить действие контроллера и отобразить другой набор данных.

Я мог бы просто поместить кнопку «Отправить» рядом со средством выбора диапазона дат и попросить пользователей ожидать ее нажатия, но я бы предпочел, чтобы это произошло без явного действия пользователя.

Есть ли какие-либо функции в элементе управления, чтобы упростить этот процесс? Я вижу, что есть события на стороне клиента, если бы я мог подключить их и отправить обратно на сервер. Это поддерживаемый подход?

Answer 1

Мы пошли с клиентской стороны changeсобытие, которое выставляет ejs-daterangepicker

      <ejs-daterangepicker id="dateRange" change="onChangeDateRange">
</ejs-daterangepicker>

и в этом случае мы меняем местоположение браузера

      function onChangeDateRange() {
            window.location.href = 
                      window.location.origin + 
                      window.location.pathname + 
                      "?dateFrom=" + this.startValue.toISOString() + 
                      "&dateTo=" + this.endValue.toISOString();
}

Answer 2

Мы предлагаем вам использовать запрос AJAX в событии изменения компонента DateRangePicker для прямого вызова части контроллера, как показано ниже.

          <form method="post"> 
   <ejs-daterangepicker id="daterangepickerFor" ejs-for="@Model.value" change="onChange"></ejs-daterangepicker> 
   <div id="errorMessage"> 
       <span asp-validation-for="value"></span> 
       </div> 
          <div id="submitbutton"> 
       <ejs-button id="submitButton" content="Submit"></ejs-button> 
     </div> 
</form> 

<script type="text/javascript"> 
    function onChange(args) { 
    $.ajax({ 
        type: 'GET', 
        url: "/Home/Index", 
        contentType: 'application/json; charset=utf-8', 
        data: { 'gameName': args.value }, 
        dataType:"json", 
        success: function results(result) { 
            alert(result); 
        }, 
        error: function (a, b, c) { 
            alert("Error!") 
        } 
    }); 
} 

Пример: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusion_EJ2_Core_App-826996696 .