更改 Syncfusion DateRangePicker 后回传值

Question

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

选择不同的日期范围时，我要post回到服务器，运行控制器操作并显示不同的数据集。

我可以在日期范围选择器旁边放置一个“提交”按钮，并要求用户按下它，但我宁愿它在没有明确的用户操作的情况下发生。

控件中是否有任何功能可以简化此过程？我可以看到有客户端事件，我是否可以将这些事件和 post 连接回服务器。这是受支持的方法吗？

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

建议您在DateRangePicker组件的change事件中使用AJAX请求直接调用controller部分，如下代码片段。

    <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

更改 Syncfusion DateRangePicker 后回传值

Posting back value after Syncfusion DateRangePicker is changed

razor

syncfusion

ej2-syncfusion

syncfusion-calendar