HI sivanaidu,
Using the below article i have modified the sample.
MVC Inline Editing: Implement Inline Editing in GridView in ASP.Net MVC
Refer below example and modify your code accordingly. I have implemented for DropDownList. You need to chage your code for other controls as well.
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
CustomersEntities entities = new CustomersEntities();
List<Customer> customers = entities.Customers.ToList();
return View(customers.ToList());
}
[HttpPost]
public ActionResult UpdateCustomer(Customer customer)
{
using (CustomersEntities entities = new CustomersEntities())
{
Customer updatedCustomer = (from c in entities.Customers
where c.CustomerId == customer.CustomerId
select c).FirstOrDefault();
updatedCustomer.Name = customer.Name;
updatedCustomer.Country = customer.Country;
entities.SaveChanges();
}
return new EmptyResult();
}
}
View
@model IEnumerable<Customer>
@{
Layout = null;
WebGrid webGrid = new WebGrid(source: Model, canPage: true, canSort: false);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
@webGrid.GetHtml(
htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
columns: webGrid.Columns(
webGrid.Column(header: "Customer Id", format: @<span class="label">@item.CustomerId</span>, style: "CustomerId"),
webGrid.Column(header: "Name", format: @<span>
<span class="label">@item.Name</span>
<input class="text" type="text" value="@item.Name" style="display:none" />
</span>, style: "Name"),
webGrid.Column(header: "Country", format: @<span>
<span class="label">@item.Country</span>
@*<input class="text" type="text" value="@item.Country" style="display:none" />*@
<input type="hidden" class="hidden" name="country" value="@item.Country" />
<select name="Dept" id="txtCountry" style="display:none" class="text">
<option value="-1">--Select Country--</option>
<option value="India">India</option>
<option value="Russia">Russia</option>
<option value="France">France</option>
<option value="United States">United States</option>
</select>
</span>, style: "Country"),
webGrid.Column(header: "Country Check", format: @<span>
<span class="label">@item.Country</span>
@*<input class="text" type="text" value="@item.Country" style="display:none" />*@
<input type="hidden" class="hiddenCheck" name="country" value="@item.Country" />
<label class="text" id="skills1" style="display:none">
<input class="list" id="skills" type="checkbox" value="India" name="skills"> India<br />
<input class="list" id="skills" type="checkbox" value="Russia" name="skills"> Russia<br />
<input class="list" id="skills" type="checkbox" value="France" name="skills"> France<br />
<input class="list" id="skills" type="checkbox" value="United States" name="skills"> United States<br />
</label>
</span>, style: "Country"),
webGrid.Column(header: "Country Radio", format: @<span>
<span class="label">@item.Country</span>
@*<input class="text" type="text" value="@item.Country" style="display:none" />*@
<input type="hidden" class="hiddenRadio" name="country" value="@item.Country" />
<label class="text" id="radio" style="display:none">
<input type="radio" name="gender1" value="India">India
<input type="radio" name="gender1" value="Russia">Russia
<input type="radio" name="gender1" value="France">France
<input type="radio" name="gender1" value="United States"> United States
@*<input class="radio" value="@item.Gender" style="display:none" />*@
</label>
</span>, style: "Country"),
webGrid.Column(format:@<span class="link">
<a class="Edit" href="javascript:;">Edit</a>
<a class="Update" href="javascript:;" style="display:none">Update</a>
<a class="Cancel" href="javascript:;" style="display:none">Cancel</a>
</span> )))
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript">
//Edit event handler.
$("body").on("click", "#WebGrid TBODY .Edit", function () {
var row = $(this).closest("tr");
$("td", row).each(function () {
if ($(this).find(".text").length > 0) {
var country = $(this).find("input[type=hidden]").val();
$(this).find('#txtCountry').val(country);
$(this).find(".text").show();
$(this).find(".label").hide();
$.each($(this).find('input[name=gender1]'), function () {
if ($(this).val() == country) {
$(this).prop("checked", true);
}
else {
$(this).prop("checked", false);
}
});
$.each($(this).find('input[name=skills]'), function () {
if ($(this).val() == country) {
$(this).prop("checked", true);
}
else {
$(this).prop("checked", false);
}
});
}
});
row.find(".Update").show();
row.find(".Cancel").show();
$(this).hide();
});
//Update event handler.
$("body").on("click", "#WebGrid TBODY .Update", function () {
var row = $(this).closest("tr");
$("td", row).each(function () {
if ($(this).find(".text").length > 0) {
var span = $(this).find(".label");
var input = $(this).find(".text");
span.html(input.val());
span.show();
input.hide();
}
});
row.find(".Edit").show();
row.find(".Cancel").hide();
$(this).hide();
var customer = {};
customer.CustomerId = row.find(".CustomerId").find(".label").html();
customer.Name = row.find(".Name").find(".label").html();
customer.Country = row.find(".Country").find(".label").html();
$.ajax({
type: "POST",
url: "/Home/UpdateCustomer",
data: '{customer:' + JSON.stringify(customer) + '}',
contentType: "application/json; charset=utf-8",
dataType: "json"
});
});
//Cancel event handler.
$("body").on("click", "#WebGrid TBODY .Cancel", function () {
var row = $(this).closest("tr");
$("td", row).each(function () {
if ($(this).find(".text").length > 0) {
var span = $(this).find(".label");
var input = $(this).find(".text");
input.val(span.html());
span.show();
input.hide();
}
});
row.find(".Edit").show();
row.find(".Update").hide();
$(this).hide();
});
</script>
</body>
</html>
Screenshot
