问题描述
我在 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>
选择不同的日期范围我想返回服务器,运行控制器操作并显示不同的数据集。
我可以在日期范围选择器旁边放置一个“提交”按钮,并要求期望用户按下它,但我希望它在没有明确的用户操作的情况下发生。
控件中是否有任何功能可以简化此过程?我可以看到有客户端事件,如果我可以挂钩这些事件并回发到服务器。这是支持的方法吗?
解决方法
我们使用了 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();
}
,
我们建议您在 DateRangePicker 组件的更改事件中使用 AJAX 请求直接调用控制器部分,如下面的代码片段。
<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