Problem
The purpose of the logements indexpage is that the user must be able to change the value by simply enter the textbox, change it and leave the textbox.
The database value changes perfectly.
But the webgrid
keeps showing the old value when I go to another page and get back to the index page
When I refresh the indexpage it shows the new value.
Tried
ModelState.Clear()
to force the webgrid to pick up the new value from the database.
myObjectContext.Refresh(...)
to update the model with the database values.
When I go to another page, clear the cache and get back it also shows the new value
so now I think I must clear the specific cache for the index View via LogementsController.
Model Logement
public long LogementID { get; set; }
public string Naam { get; set; }
public string Omschrijving { get; set; }
public Nullable<decimal> PrijsPerNacht { get; set; }
public Nullable<System.DateTime> StartDatum { get; set; }
public Nullable<System.DateTime> EindDatum { get; set; }
LogementsController
public JsonResult ChangeLogement(CustomObject obj)
{
Logement oLogement = db.Logement.SingleOrDefault<Logement>(o => o.LogementID == obj.ID);
var oConverter = TypeDescriptor.GetConverter(oLogement.GetType().GetProperty(obj.Property).PropertyType);
oLogement.GetType().GetProperty(obj.Property).SetValue(oLogement, oConverter.ConvertFrom(obj.Value));
db.SaveChanges();
string message = "Success";
return Json(message, JsonRequestBehavior.AllowGet);
}
Index
$('body').on('mouseout', '.edit-mode', function () {
var td = $(this).parent();
var tr = td.parent();
var sLogementID = tr.find('#txtLogementID').val();
if (!isNaN(sLogementID)) {
var sCurrentID = '#' + $(this).attr('id');
var sProperty = sCurrentID.substr(4);
var sLabelID = '#' + $(this).prev().children('label').attr('id');
var sValue = tr.find(sCurrentID).val();
tr.find(sLabelID).text(sValue);
var obj =
{
"ID": sLogementID,
"Property": sProperty,
"Value": sValue
};
$.ajax({
url: '/Logements/ChangeLogement/',
data: JSON.stringify(obj),
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function () {
}
});
td.find('.edit-mode, .display-mode').toggle();
}
});
$('body').on('mouseleave', 'td', function () {
var tr = $(this).parent();
var sLogementID = tr.find('#txtLogementID').val();
if (!isNaN(sLogementID)) {
$(this).find('.edit-mode').hide();
$(this).find('.display-mode').show();
}
});
@{
var oGrid = new WebGrid(Model);
}
<div>
@oGrid.GetHtml(
tableStyle: "webgrid-table", headerStyle: "webgrid-header", footerStyle: "webgrid-footer", alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row", rowStyle: "webgrid-row-style", mode: WebGridPagerModes.All,
columns: oGrid.Columns(
oGrid.Column(null, format: @<input type="text" id="txtLogementID" value="@item.LogementID" />),
oGrid.Column("clnNaam", "Naam", format: @<text>
<span class="display-mode"><label id="lblNaam">@item.Naam</label></span><input type="text" id="txtNaam" value="@item.Naam" class="edit-mode" /></text>),
oGrid.Column("clnOmschrijving", "Omschrijving", format: @<text>
<span class="display-mode"><label id="lblOmschrijving">@item.Omschrijving</label></span><input type="text" id="txtOmschrijving" value="@item.Omschrijving" class="edit-mode" /></text>),
oGrid.Column("clnPrijsPerNacht", "Prijs per nacht", format: @<text>
<span class="display-mode"><label id="lblPrijsPerNacht">@item.PrijsPerNacht</label></span><input type="text" id="txtPrijsPerNacht" value="@item.PrijsPerNacht" class="edit-mode" /></text>),
oGrid.Column("clnVan", "Van", format: @<text>
<span class="display-mode"><label id="lblStartDatum">@(item.StartDatum != null ? item.StartDatum.ToShortDateString() : string.Empty)</label></span><input type="text" id="txtStartDatum" value="@(item.StartDatum != null ? item.StartDatum.ToShortDateString() : string.Empty)" class="edit-mode" /></text>),
oGrid.Column("clnTot", "Tot", format: @<text>
<span class="display-mode"><label id="lblEindDatum">@(item.EindDatum != null ? item.EindDatum.ToShortDateString() : string.Empty)</label></span><input type="text" id="txtEindDatum" value="@(item.EindDatum != null ? item.EindDatum.ToShortDateString() : string.Empty)" class="edit-mode" /></text>),
oGrid.Column("", "", style:"extra-kolom", format: @<text></text>)
))
</div>