Update is not working in my mvc project - asp.net-mvc

Question

hello everyone i am tring to update the database. but update is not working in my project. i used a single action to create and update.And i am using kendo grid control in this project and edit the popup template. so please check this and suggest me something why update is not working.
this is my code.
public class ImageController : Controller
{
ShoppingContext db = new ShoppingContext();
string imagename;
string path;
// GET: /Image/
public ActionResult Index()
{
return View();
}
public JsonResult GetData([DataSourceRequest] DataSourceRequest request)
{
var list = db.ImageModels.ToList();
return Json(list.ToDataSourceResult(request));
}
public ActionResult Create(IEnumerable<HttpPostedFileBase> files, ImageModel imageModel)
{
foreach (var image in files)
{
imagename = Path.GetFileName(image.FileName);
path = "~/Images/" + imagename;
var projectpath = Path.Combine(Server.MapPath("~/Images"), imagename);
image.SaveAs(projectpath);
}
var id = imageModel.Imageid;
if (id > 0)
{
imageModel.ImageName = imagename;
imageModel.ImageUrl = path;
db.SaveChanges();
}
else
{
imageModel.ImageName = imagename;
imageModel.ImageUrl = path;
db.ImageModels.Add(imageModel);
db.SaveChanges();
}
return RedirectToAction("Index");
}
}
My view
#(Html.Kendo().Grid<TelerikMVCImageProject.Models.ImageModel>()
.Name("grdImage")
.DataSource(datasource => datasource
.Ajax()
.Model(model => model.Id(p=>p.Imageid))
.Create(create => create.Action("Create", "Image"))
.Update(update => update.Action("Create", "Image"))
.Destroy(delete => delete.Action("Delete", "Image"))
.Read(read => read.Action("GetData", "Image"))
.ServerOperation(false)
.Model(model =>
{
model.Field(p => p.Imageid).Editable(true);
model.Id(p => p.Imageid);
// model.Field(p => p.isenabled).DefaultValue(true);
})
)
.Columns(columns =>
{
//columns.Bound(c => c.IMAGESIZE_ID).ClientTemplate("<input type='checkbox' value #=IMAGESIZE_ID# />").Width(50);
columns.Bound(c => c.ProductName).Width(140).Title("Product Name");
columns.Bound(c => c.ProductDesc).Title("Product Desc");
columns.Bound(c => c.ImageName).Title("Image Name");
columns.Bound(c => c.ImageUrl).Title("Image Url");
columns.Command(command =>
{
command.Edit();
command.Destroy();
//command.Custom("Edit").Action("Update", "Imagetest").Text("Edit");
});
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ImageModel"))
.HtmlAttributes(new { style = "height: 580px;" })
.Scrollable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5)
)
)
My Editor Templates
#model TelerikMVCImageProject.Models.ImageModel
<style>
.k-state-default {
visibility:hidden;
}
</style>
<script>
function onSelect(e) {
alert("Select");
$demo = $("#files").val();
var filename = $demo.substr(12);
var path = "~/Images/" + filename;
$("#divimage").append('<img src = "#Url.Content("~/Images/")' + filename + '">');
alert(path);
}
function onRemove(e) {
alert("Remove");
$("#divimage").empty();
}
</script>
<form method="post" action="#Url.Action("Create")">
<table>
<tr>
#Html.HiddenFor(m=>m.Imageid)
</tr>
<tr>
<td>#Html.Label("Product Name")</td>
<td>#Html.TextBoxFor(m=>m.ProductName)</td>
</tr>
<tr>
<td>#Html.Label("Product Desc")</td>
<td>#Html.TextBoxFor(m=>m.ProductDesc)</td>
</tr>
<tr>
<td>#Html.Label("Image Desc")</td>
<td>#(Html.Kendo().Upload()
.Name("files")
.Multiple(false)
.Messages(msg => msg.Select("Browser"))
//.Async(a=>a.AutoUpload(false).Save("Save","Imagetest"))
.Events(e=>e.Select("onSelect").Remove("onRemove"))
)</td>
</tr>
<tr>
<td></td>
<td><div id="divimage" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Save" /></td>
</tr>
</table>
</form>

Answer 1

This is because you are receiving the model from the user and not "attaching" it to the EF db context. You need to attach it before saving changes.
Try the following (in ImageController):
if (id > 0)
{
db.ImageModels.Attach(imageModel);
imageModel.ImageName = imagename;
imageModel.ImageUrl = path;
db.SaveChanges();
}