I am using ASP.net MVC 4 with Kendo UI and have created a Kendo UI WIndow that contains a tab control, each containing a kendo list view. The purpose of the window is to maintain system notes and activity within the application. The tab control contains 3 tabs: Notes, Activity and All Notes and Activity. The Notes tab allows a user to create and view notes while the Activity and All Notes and Activity allows the user to view information only.
The problem I am having is when creating a note in IE 8. For some reason, the request object sent to the controller does not contain the note entered by the user. It is null even when text is entered on the screen. The mystery here is it works great in IE 9, FireFox and Chrome.
Has anyone had any issues with the request object not being populated in IE 8?
The View
@model IEnumerable<BlueJayPPE.ViewModels.RequestNoteViewModel>
<script type="text/x-kendo-tmpl" id="requestTemplateNote">
<div class="request-note-view k-widget">
<div class="request-note">
<b>#:Subject#</b>
<p>#:Note#</p>
#if (IsOwner==true){#
<div class="request-note-buttons">
<div class="request-note-edit-button">
<a id="addButton" class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
</div>
</div>
#} else {#
<div class="request-note-buttons">
<div class="request-note-edit-button">
<div>
<span class="k-icon k-edit k-state-disabled" >
</div>
<div>
<span class="k-icon k-delete k-state-disabled" >
</div>
</div>
</div>
#}#
</div>
</div>
</script>
<div class="request-note-section">
<div class="request-note-section-button">
<a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>@ViewRes.CCE.AddNoteButtonLabel</a>
</div>
@(Html.Kendo().ListView<BlueJayPPE.ViewModels.RequestNoteViewModel>(Model)
.Name("RequestNotesView")
.TagName("div")
.ClientTemplateId("requestTemplateNote")
.DataSource(dataSource => dataSource
.Model(model => {
model.Id("RequestNoteId");
})
.Read(read => read.Action("GetRequestNotes", "ProposalEngine").Data("RequestLogActivity.getRequestNotesParams"))
.Create(create => create.Action("AddNote", "ProposalEngine").Data("RequestLogActivity.getRequestNotesParams"))
.Update(update => update.Action("UpdateNote", "ProposalEngine"))
.Destroy(destroy => destroy.Action("DeleteNote", "ProposalEngine"))
)
.Editable(editable => editable.TemplateName("RequestNoteEdit"))
)
</div>
<script>
$(function() {
var listView = $("#RequestNotesView").data("kendoListView");
var dsRequestNote = $("#RequestNotesView").data("kendoListView").dataSource;
dsRequestNote.bind("requestEnd", function (e) {
var dsAllActivity = $('#RequestAllActivityView').data('kendoListView').dataSource;
var responseErr = false;;
if (e.type == "create")
{
try{
console.log(e.response.Data[0].RequestId);
}
catch (err) {
console.log("no request id");
}
try {
console.log(e.response.Data[0].Note);
}
catch (err) {
console.log("no note");
}
dsAllActivity.add({
RequestId: e.response.Data[0].RequestId,
RequestNoteId: e.response.Data[0].RequestNoteId,
NoteType: e.response.Data[0].NoteType,
Note: e.response.Data[0].Note,
CreatedByUserName: e.response.Data[0].CreatedByUserName,
Subject: e.response.Data[0].Subject
});
dsAllActivity.sync;
}
else if (e.type == "update"){
var item = dsAllActivity.get(e.response.Data[0].RequestNoteId);
item.set("Note", e.response.Data[0].Note);
dsAllActivity.sync;
}
else if (e.type == "destroy")
{
dsAllData = dsAllActivity._data;
for (var pos = 0; pos < dsAllData.length; pos++) {
if (dsAllData[pos].RequestNoteId == e.response.Data[0].RequestNoteId) {
dsAllActivity.remove(dsAllData[pos]);
dsAllActivity.sync;
break;
}
}
}
});
$(".k-add-button").click(function (e) {
listView.add();
e.preventDefault();
});
listView.bind("remove", function (e) {
if (!confirm("Are you sure you want to delete this item?")) {
e.preventDefault();
}
});
});
</script>
The Controller (irrelevant actions removed for brievity)
public class EngineController : Controller
{
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddNote(int requestId, [DataSourceRequest] DataSourceRequest request, RequestNoteViewModel requestNote)
{
var results = new List<RequestNoteViewModel>();
if (requestNote != null && ModelState.IsValid)
{
int webUserId = unchecked((int)User.WebUserKey());
requestNote.RequestId = (requestId == 0 ? requestId : requestNote.RequestId);
requestNote.IsOwner = true;
var commitedNote = RequestNoteRepository.Insert(webUserId, requestNote);
results.Add(commitedNote);
}
return Json(results.ToDataSourceResult(request, ModelState));
}
}
The View Model
public class RequestNoteViewModel
{
[Editable(false)]
public int RequestId { get; set; }
[Editable(false)]
public int RequestNoteId { get; set; }
[Editable(false)]
public int CreatedByWebUserId { get; set; }
[Editable(false)]
public string CreatedByUserName { get; set; }
[Editable(true)]
[Required (AllowEmptyStrings = false, ErrorMessage = "A Numberic or Alpha Character is Required")]
public string Note { get; set; }
public string NoteType { get; set; }
public string Action { get; set; }
[Editable(false)]
public DateTime CreatedDate { get; set; }
public string Subject
{
get
{
if( NoteType == "log" ) {
return CreatedByUserName + " " + Action + " a request on " + CreatedDate;
} else {
return CreatedByUserName + " created a note on " + CreatedDate;
}
}
set { }
}
public bool IsOwner { get; set; }
}
The problem I am having is when creating a note in IE 8. For some reason, the request object sent to the controller does not contain the note entered by the user. It is null even when text is entered on the screen. The mystery here is it works great in IE 9, FireFox and Chrome.
Has anyone had any issues with the request object not being populated in IE 8?
The View
@model IEnumerable<BlueJayPPE.ViewModels.RequestNoteViewModel>
<script type="text/x-kendo-tmpl" id="requestTemplateNote">
<div class="request-note-view k-widget">
<div class="request-note">
<b>#:Subject#</b>
<p>#:Note#</p>
#if (IsOwner==true){#
<div class="request-note-buttons">
<div class="request-note-edit-button">
<a id="addButton" class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
</div>
</div>
#} else {#
<div class="request-note-buttons">
<div class="request-note-edit-button">
<div>
<span class="k-icon k-edit k-state-disabled" >
</div>
<div>
<span class="k-icon k-delete k-state-disabled" >
</div>
</div>
</div>
#}#
</div>
</div>
</script>
<div class="request-note-section">
<div class="request-note-section-button">
<a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>@ViewRes.CCE.AddNoteButtonLabel</a>
</div>
@(Html.Kendo().ListView<BlueJayPPE.ViewModels.RequestNoteViewModel>(Model)
.Name("RequestNotesView")
.TagName("div")
.ClientTemplateId("requestTemplateNote")
.DataSource(dataSource => dataSource
.Model(model => {
model.Id("RequestNoteId");
})
.Read(read => read.Action("GetRequestNotes", "ProposalEngine").Data("RequestLogActivity.getRequestNotesParams"))
.Create(create => create.Action("AddNote", "ProposalEngine").Data("RequestLogActivity.getRequestNotesParams"))
.Update(update => update.Action("UpdateNote", "ProposalEngine"))
.Destroy(destroy => destroy.Action("DeleteNote", "ProposalEngine"))
)
.Editable(editable => editable.TemplateName("RequestNoteEdit"))
)
</div>
<script>
$(function() {
var listView = $("#RequestNotesView").data("kendoListView");
var dsRequestNote = $("#RequestNotesView").data("kendoListView").dataSource;
dsRequestNote.bind("requestEnd", function (e) {
var dsAllActivity = $('#RequestAllActivityView').data('kendoListView').dataSource;
var responseErr = false;;
if (e.type == "create")
{
try{
console.log(e.response.Data[0].RequestId);
}
catch (err) {
console.log("no request id");
}
try {
console.log(e.response.Data[0].Note);
}
catch (err) {
console.log("no note");
}
dsAllActivity.add({
RequestId: e.response.Data[0].RequestId,
RequestNoteId: e.response.Data[0].RequestNoteId,
NoteType: e.response.Data[0].NoteType,
Note: e.response.Data[0].Note,
CreatedByUserName: e.response.Data[0].CreatedByUserName,
Subject: e.response.Data[0].Subject
});
dsAllActivity.sync;
}
else if (e.type == "update"){
var item = dsAllActivity.get(e.response.Data[0].RequestNoteId);
item.set("Note", e.response.Data[0].Note);
dsAllActivity.sync;
}
else if (e.type == "destroy")
{
dsAllData = dsAllActivity._data;
for (var pos = 0; pos < dsAllData.length; pos++) {
if (dsAllData[pos].RequestNoteId == e.response.Data[0].RequestNoteId) {
dsAllActivity.remove(dsAllData[pos]);
dsAllActivity.sync;
break;
}
}
}
});
$(".k-add-button").click(function (e) {
listView.add();
e.preventDefault();
});
listView.bind("remove", function (e) {
if (!confirm("Are you sure you want to delete this item?")) {
e.preventDefault();
}
});
});
</script>
The Controller (irrelevant actions removed for brievity)
public class EngineController : Controller
{
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddNote(int requestId, [DataSourceRequest] DataSourceRequest request, RequestNoteViewModel requestNote)
{
var results = new List<RequestNoteViewModel>();
if (requestNote != null && ModelState.IsValid)
{
int webUserId = unchecked((int)User.WebUserKey());
requestNote.RequestId = (requestId == 0 ? requestId : requestNote.RequestId);
requestNote.IsOwner = true;
var commitedNote = RequestNoteRepository.Insert(webUserId, requestNote);
results.Add(commitedNote);
}
return Json(results.ToDataSourceResult(request, ModelState));
}
}
The View Model
public class RequestNoteViewModel
{
[Editable(false)]
public int RequestId { get; set; }
[Editable(false)]
public int RequestNoteId { get; set; }
[Editable(false)]
public int CreatedByWebUserId { get; set; }
[Editable(false)]
public string CreatedByUserName { get; set; }
[Editable(true)]
[Required (AllowEmptyStrings = false, ErrorMessage = "A Numberic or Alpha Character is Required")]
public string Note { get; set; }
public string NoteType { get; set; }
public string Action { get; set; }
[Editable(false)]
public DateTime CreatedDate { get; set; }
public string Subject
{
get
{
if( NoteType == "log" ) {
return CreatedByUserName + " " + Action + " a request on " + CreatedDate;
} else {
return CreatedByUserName + " created a note on " + CreatedDate;
}
}
set { }
}
public bool IsOwner { get; set; }
}