I am using Webgrid in one of my project and all of the functionalities (Add, Edit, Delete, Details) are working fine. I am using ajax post method to delete the records on the same form.
So when I simply click on Delete it removes the record from the database. But when I first click on Category Name To show details of that category and after that I click on Delete it doesn't do anything.
The Click event of delete link is not working then. I don't know why is this happening.
Below is my view:
@model IEnumerable<Demo.Models.CategoryModel>
@{
ViewBag.Title = "Category List";
}
@{
Demo.Models.CategoryModel category = new Demo.Models.CategoryModel();
}
@{
var gd = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent");
}
<div class="main">
<h2>
Category List</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<div id="gridContent">
@using (Html.BeginForm("Delete", null, FormMethod.Post, new { @class = "updateForm" }))
{
@gd.GetHtml(tableStyle: "tbl",
headerStyle: "",
alternatingRowStyle: "altRow",
selectedRowStyle: "selectRow",
mode: WebGridPagerModes.All,
columns: gd.Columns(
gd.Column("Category Name", format: (item) => item.GetSelectLink(item.Name)),
gd.Column("Description", "Description"),
gd.Column("ParentCategoryName", "Parent Category"),
gd.Column("", header: "", format: @<text>
@Html.ActionLink("Edit", "Edit", new { id = item.CategoryId }, new { @class = "edit" })
| <a href="JavaScript:void(0)" class="RemoveLink" data-id="@item.CategoryId" onclick = "return confirm('Do you want to Delete this Category?')">
Delete</a>
</text>, style: "last-item"
)
))
<div class="cat-dets">
@if (gd.HasSelection)
{
<h2>
Category Details</h2>
category = (Demo.Models.CategoryModel)gd.Rows[gd.SelectedIndex].Value;
<b>Category Id: </b> @category.CategoryId<br />
<b>Category Name: </b> @category.Name<br />
<b>Description</b> @category.Description<br />
<b>Parent Category</b> @category.ParentCategoryName<br />
}
</div>
}
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".RemoveLink").click(function () {
var recordToDelete = $(this).attr("data-id");
if (recordToDelete != '') {
$.post("/Category/Delete", { "id": recordToDelete },
function (data) {
if (data.status == "success") {
window.location.href = window.location.href;
}
});
}
});
});
</script>
Please help me if I have left something..
Thanks
UPDATE:
After some googling I found that this might be a issue between webgrid Get Method posting and my form's Post Method data posting. As the delete is also not functioning after paging and sorting. If anyone has used the Form Post method with the webgrid then please help me.
