Binding DateRangePicker to Model Value and Submitting POST to Controller
Environment
| Product | DateRangePicker for Progress® Telerik® UI for ASP.NET Core, DateRangePicker for Progress® Telerik® UI for ASP.NET MVC |
Description
How can I show (bind) a model value in the DateRangePicker and submit it in a POST request to a controller action?
Solution
- To show the dates from the model in the DateRangePicker, configure the
.Range(r => r.Start().End()). - To submit the POST data, use the
StartFieldandEndFieldsettings of the DateRangePicker to set the names of the fields that are used in the query.
These two settings are needed because the DateRangePicker consists of two actual inputs.
@model MyViewModel
<form method="post" action="/home/index">
@(Html.Kendo().DateRangePicker()
.Name("myDateRangePicker")
//model fields for POST data
.StartField(nameof(Model.TheStartTime))
.EndField(nameof(Model.TheEndTime))
//current range values to be displayed
.Range(r => r.Start(Model.TheStartTime).End(Model.TheEndTime))
)
<input type="submit" value="make a change in the range and click me" />
</form>
public class MyViewModel
{
public DateTime TheStartTime { get; set; }
public DateTime TheEndTime { get; set; }
}
public ActionResult Index()
{
MyViewModel mdl = new MyViewModel { TheStartTime = DateTime.Now.AddDays(-2), TheEndTime = DateTime.Now.AddDays(2) };
return View(mdl);
}
[HttpPost]
public ActionResult Index(MyViewModel theUserInput)
{
return View(theUserInput);//just return to the current view with the new data
}