Hi friends,in this article I will explain about Inline Editing in WebGrid using MVC 4 Razor or WebGrid with
inline editing, updating, cancel and delete the record using JSON AJAX.
In this, toggle command is used to swap the data between the
two presentations on a line-by-line basis.Get the userdata and pass in to WebGrid.There
are two things in each item one is Display mode and second is Edit mode.we
Display all Edit Item is Display none at First Time.when click on Edit Button
the Edit Item is Shown.
Add Users table in the ADO.NET Entity Data Model then
connectionstring will be added in the web.config file and USER.edmx will be
created.
After adding users table ,.edmx file will be like as shown in the below figure.
Model(UserModel.cs):
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
namespace
MvcInlineEditingWebgrid.Models
{
public
class UserModel
{
public static List<USER>
getUsers()
{
//User is Entity Name in the users.edmx
UserDBEntities db = new
UserDBEntities();
List<USER>
users = new List<USER>();
users = (from p in db.USERS select p).ToList();
return users;
}
}
}
|
Controller(UserController.cs):
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using
MvcInlineEditingWebgrid.Models;
namespace
MvcInlineEditingWebgrid.Controllers
{
public
class UserController
: Controller
{
List<USER>
users = null;
UserDBEntities db = new
UserDBEntities();
public ActionResult
Index()
{
users = (from p in db.USERS select p).ToList();
return View(users);
}
public ActionResult
UpdateUser(USER obj)
{
var query = db.USERS.Where(x => x.User_id ==
obj.User_id).FirstOrDefault();
query.UserName =
obj.UserName;
query.Gender =
obj.Gender;
query.Address =
obj.Address;
db.SaveChanges();
ViewBag.msg = "Record Updated Successfully";
return RedirectToAction("Index");
}
public ActionResult
DeleteUser(USER obj)
{
USER p = db.USERS.SingleOrDefault(x =>
x.User_id == obj.User_id);
db.USERS.DeleteObject(p);
db.SaveChanges();
ViewBag.msg = "Record Deleted Successfully";
return RedirectToAction("Index");
}
}
}
|
View(Index.cshtml):
@model IEnumerable<MvcInlineEditingWebgrid.Models.USER>
<script src="../../Scripts/jquery-1.9.1.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function
() {
$('.edit-mode').hide();
$('.edit-user, .cancel-user').on('click', function
() {
var tr = $(this).parents('tr:first');
tr.find('.edit-mode, .display-mode').toggle();
});
$('.save-user').on('click',
function () {
var tr = $(this).parents('tr:first');
var UserName = tr.find("#UserName").val();
var Gender = tr.find("#Gender").val();
var User_Id = tr.find("#UserID").html();
var Address = tr.find("#Address").val();
tr.find('.edit-mode, .display-mode').toggle();
var UserModel =
{
"User_Id": User_Id,
"UserName": UserName,
"Gender":
Gender,
"Address": Address
};
$.ajax({
url: '/User/UpdateUser/',
data:
JSON.stringify(UserModel),
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (data) {
}
});
});
$('.delete-user').on('click',
function () {
var tr = $(this).parents('tr:first');
var UserName = tr.find("#UserName").val();
var Gender = tr.find("#Gender").val();
var User_Id = tr.find("#UserID").html();
var Address = tr.find("#Address").val();
var UserModel =
{
"User_Id":
User_Id,
"UserName": UserName,
"Gender": Gender,
"Address": Address
};
$.ajax({
url: '/User/DeleteUser/',
data:
JSON.stringify(UserModel),
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (data) {
}
});
});
})
</script>
<style type="text/css">
.webGrid
{
margin: 4px;
border-collapse: collapse;
width: 100%;
font-family: Tahoma;
}
.grid-header
{
background-color: #990000;
font-weight: bold;
color: White !important;
}
.webGrid
th a
{
color: White;
text-decoration: none;
}
.webGrid
th, .webGrid
td
{
border: 1px solid black;
padding: 5px;
}
.alt
{
background-color: #F4EFEF;
}
.webGrid
th a:hover
{
text-decoration: underline;
}
.to-the-right
{
text-align: right;
}
</style>
@{
var
grid = new WebGrid(source:
Model, canPage: true, defaultSort: "User_Id", rowsPerPage: 3, canSort: true);
}
<h2 style="float: right; padding-right:
40%;">
@Html.ActionLink("Refresh",
"Index", "User")
</h2>
<div id="gridContent"
style="padding-right:
40%;">
@grid.GetHtml(
tableStyle: "webGrid",
fillEmptyRows: false,
alternatingRowStyle: "alt",
headerStyle: "grid-header",
footerStyle: "foot-grid",
mode: WebGridPagerModes.All,
firstText: "<< First",
previousText: " < Previous",
nextText: "Next >",
lastText: "Last >>",
caption: "User Details",
emptyRowCellValue: null,
columns:
grid.Columns(
grid.Column("ID", format: @<text>
<span class="display-mode">@item.User_Id</span>
<label id="UserID"
class="edit-mode">@item.User_Id</label>
</text>),
grid.Column("UserName", "UserName",
format: @<text>
<span class="display-mode">
<label id="lblName">@item.UserName</label>
</span>
<input type="text"
id="UserName"
value="@item.UserName" class="edit-mode" />
</text>),
grid.Column("Gender", "Last
Name", format: @<text>
<span class="display-mode">
<label id="lblGender">@item.Gender</label>
</span>
<input type="text"
id="Gender"
value="@item.Gender" class="edit-mode" /></text>),
grid.Column("Address", "Address",
format: @<text>
<span class="display-mode">
<label id="lblAddress">@item.Address</label>
</span>
<input type="text"
id="Address"
value="@item.Address" class="edit-mode" />
</text>),
grid.Column("Action", format: @<text>
<button class="edit-user display-mode"> Edit</button>
<button class="delete-user display-mode"> Delete</button>
<button class="save-user edit-mode"> Save</button>
<button class="cancel-user edit-mode"> Cancel</button>
</text>, canSort: false)
))
</div>
|
The output of the above code as shown in the below figure.
When you click on Edit button then you can able to edit the values
Change the values and click on Save button then values will updated.
You can download the above code by clicking on the below Download image.
Good Job! I like your code snippet
ReplyDeleteThnx :)...
ReplyDeleteit help me a alot
Thank You
ReplyDelete