How to Pass Custom Parameter to Controller in ASP.NET MV Scheduler?
This knowledge base article explains the way to pass custom parameters to the controller function in and then filtering ASP.NET MVC Scheduler appointments based on that parameter value.
Step 1: Create a default Schedule sample by referring the below knowledge base link and include CRUD actions for appointments as shown below.
@(Html.EJ().Schedule("Schedule1")
.Width("90%")
.Height("525px")
.CurrentDate(new DateTime(2016, 10, 29))
.AppointmentSettings(fields => fields.Datasource(ds => ds.URL("/Home/GetData").CrudURL("/Home/Batch").Adaptor("UrlAdaptor"))
.ApplyTimeOffset(false)
.Id("Id")
.Subject("Subject")
.StartTime("StartTime")
.EndTime("EndTime")
.AllDay("AllDay")
.Recurrence("Recurrence")
.RecurrenceRule("RecurrenceRule"))
)
Step 2: Define the URL function GetData at controller side as shown below. During the initial load, the parameter curDate value will be null, so the whole database collection will be returned from the function and bound to Schedule.
public JsonResult GetData(string curDate)
{
var DataSource = new DataClasses1DataContext().ScheduleDatas.ToList();
List<ScheduleData> appointmentList = DataSource.ToList();
if(!string.IsNullOrEmpty(curDate)) {
DateTime StartDate = Convert.ToDateTime(curDate);
DateTime EndDate = Convert.ToDateTime(curDate).AddHours(24);
appointmentList = DataSource.ToList().Where(app => app.StartTime >= StartDate && app.StartTime <= EndDate || app.Recurrence == true).ToList();// here particular date appointment is filtered
}
return Json(appointmentList, JsonRequestBehavior.AllowGet);
}
Step 3: Now, render a Syncfusion date picker component with its client side Select event as shown below.
@Html.EJ().DatePicker("DatePick").TagName("div").DisplayInline(true).ShowFooter(false).Value("10/23/2016").ClientSideEvents(s => s.Select("onSelected"))
Step 4: When we select October 24, 2016 in the date picker, Select event method onSelected will be called, where the selected date value will be passed to controller GetData function in string format using addParams option as shown below
function onSelected(args) { // this function will be called when the date is selected in the month calendar
$("#Schedule1").ejSchedule({ currentDate: new Date(args.value) }); // here we are rendering the Scheduler with the selected date
var date = new Date(args.value).toISOString();
var obj = $("#Schedule1").data("ejSchedule"); // object for schedule is created
var dataManager1 = ej.DataManager({
url: '@Url.Action("GetData","Home")',
crudUrl: '@Url.Action("Batch", "Home")',
crossDomain: true
});
var query = ej.Query().addParams("curDate", date); // By using addParams we can send the parameter to controller for filtering
if (!ej.isNullOrUndefined(obj))
obj.option("appointmentSettings.query", query); // here we are assigning the query to schedule
}
Step 5: Now the GetData function will be called with selected date value, so that the appointment collection that lies on the provided date value range is filtered and returned to render in the Schedule as shown below.
Figure 1: Schedule control displaying appointments for October 24, 2016.
Conclusion
I hope you enjoyed learning about how to pass a custom parameter to the controller function in ASP.NET MVC Scheduler.
You can
refer to our ASP.NET MVC Scheduler feature tour page to know about its
other groundbreaking feature representations and documentation, and how
to quickly get started for configuration specifications.
You
can also explore our ASP.NET MVC Scheduler example to understand how to create and manipulate
data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
