Syncfusion DateRangePicker 更改后回发值

Question

我在 AspNet Core 网站中使用 Suncfusion DateRangePicker 控件。有问题的页面是由数据窗口控制的某些数据的只读显示，因此是 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

我们使用 ejs-daterangepicker 公开的客户端 change 事件

<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

我们建议您在 DateRangePicker 组件的 change 事件中使用 AJAX 请求来直接调用控制器部分，如下面的代码 sn-p。

    <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