Model is not updating while submitting form AJAX Asp.Net MVC - ajax

Question

I have got a MVCapplication where I am collecting details on form having KENDO controls, and along side I can update couple of dropdown controls using AJAX.
The problem I am facing currently that, when I submit the form with changed values in dropdown, and other controls doesn't updates the model, and it remains the same, even if the form shows the updated values, the model retains the old values.
I have tried all sorts of solutions and googled enough but no success. I am putting my code below to show what I am doing at the moment, anyone there, could look at it and guide me as what am I doing wrong.
VIEW
#(Html.Kendo().DropDownList()
.Name("ddlDateRange")
.DataTextField("Name")
.DataValueField("Id")
.BindTo(Model.ReportIntervals)
.Events(e =>
{
e.Change((#<text>
function()
{
var selectedDateRange = $("#ddlDateRange").data("kendoDropDownList").value();
$.ajax({
url: '#Url.Action("ChangeStartEndDates")',
type: 'POST',
data: JSON.stringify({ selectedDateRange: selectedDateRange }),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (data) {
$("#StartDate").data("kendoDatePicker").value(data.StartGamingDate);
$("#EndDate").data("kendoDatePicker").value(data.EndGamingDate);
},
error: function () { alert('Error in DateRange dropdownlist'); }
});
}
</text>));
})
)
#(Html.Kendo().DatePickerFor(model => model.StartGamingDate)
.Name("StartDate")
.Events(e =>
{
e.Change((#<text>
function()
{
var startDate = $("#StartDate").val();
var endDate = $("#EndDate").val();
$.ajax({
url: '#Url.Action("ChangeDateRangeName")',
type: 'POST',
data: JSON.stringify({ startDate: startDate, endDate: endDate }),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (data) {
$("#ddlDateRange").data("kendoDropDownList").text(data.ReportInterval.Name);
},
error: function () { alert('Error in StartDate DatePicker'); }
});
}
</text>));
}))
#(Html.Kendo().DatePickerFor(model => model.EndGamingDate)
.Name("EndDate")
.Events(e =>
{
e.Change((#<text>
function()
{
var startDate = $("#StartDate").val();
var endDate = $("#EndDate").val();
$.ajax({
url: '#Url.Action("ChangeDateRangeName")',
type: 'POST',
data: JSON.stringify({ startDate: startDate, endDate: endDate }),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (data) {
$("#ddlDateRange").data("kendoDropDownList").text(data.ReportInterval.Name);
},
error: function () { alert('Error in EndDate DatePicker'); }
});
}
</text>));
}))
CONTROLLER
**MODEL VALUES FORTHIS ACTION**
systemAuditReportViewModel.StartGamingDate = "01/01/2013";
systemAuditReportViewModel.EndGamingDate = "31/12/2013";
systemAuditReportViewModel.ReportInterval.Id = 30;
systemAuditReportViewModel.ReportInterval.Name = "Last Calender Year";
[HttpPost]
public JsonResult ChangeStartEndDates(int selectedDateRange)
{
SystemAuditReport systemAuditReportViewModel = new SystemAuditReport();
Nullable<DateTime> startGamingDate;
Nullable<DateTime> endGamingDate;
IG.General.Web.Model.ReportInterval reportInterval = new IG.General.Web.Model.ReportInterval();
reportInterval.Id = selectedDateRange;
IG.General.Web.Model.ReportIntervalFactory.GetDateRange(reportInterval, out startGamingDate, out endGamingDate);
systemAuditReportViewModel.StartGamingDate = startGamingDate;
systemAuditReportViewModel.EndGamingDate = endGamingDate;
return Json(systemAuditReportViewModel, JsonRequestBehavior.AllowGet);
}
**MODEL VALUES FOR THIS ACTION**
systemAuditReportViewModel.StartGamingDate = "27/03/2014";
systemAuditReportViewModel.EndGamingDate = "27/03/2014";
systemAuditReportViewModel.ReportInterval.Id = 2;
systemAuditReportViewModel.ReportInterval.Name = "Today";
[HttpPost]
public ActionResult GenerateReport(SystemAuditReport systemAuditReportViewModel)
{
var errors = ModelState.Values.SelectMany(v => v.Errors);
ReportContainer reportContainer = new ReportContainer();
if (ModelState.IsValid)
{
systemAuditReportViewModel.ReportPath = "/reports/";
//systemAuditReportViewModel.StartGamingDate = startDate;
//systemAuditReportViewModel.EndGamingDate = endDate;
this.CreateReport(systemAuditReportViewModel, out reportContainer);
}
return View(reportContainer);
}

Answer 1

We had struggled with this a bit as well. The binding is a little tricky with templates. You have to name the DropDownList the same as the model's bound index.
#model string
#(Html.Kendo().DropDownListFor(m => m)
.BindTo("#=Model.EntityClassId")
.DataTextField("Value")
.DataValueField("Id")
.Name("EntityClassId")
.OptionLabel(MyApp.Resources.Text.DamageTypeOptionLabel)
.AutoBind(true)
.DataSource( source => source
.Read( read=>read.Action("SomeMethod", "SomeController"))
.ServerFiltering(true)
)
.Events(events => events
.Select("onDamageTypeSelected")
.Change("onDamageTypeChanged")
.DataBound("onDamageTypeDatabound")
)
.HtmlAttributes(new{style="height:21px;vertical-align:center"})
)