I convert it to my requirement and updating is null instead of dropdown value, i want to update userID.
@model IEnumerable<Account_App.Models.CustomerMV>
@{
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" /></span>, style: "Country"),
webGrid.Column(header: "UserName", format: @<span>
<span class="label">@item.UserName</span>
<input type="hidden" class="hidden" name="username" value="@item.UserName" />
<select name="username" id="ddlUserName" style="display:none" class="text ddlusername"></select>
</span>, style: "UserName"),
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">
function PopulateCountries(ddl) {
$.ajax({
type: "POST",
url: "/Customer/GetUserName",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var ddlUserName = $(ddl);
ddlUserName.empty().append('<option selected="selected" value="0">Please select</option>');
$.each(data, function () {
ddlUserName.append('<option value="' + this + '">' + this + '</option>');
});
},
error: function (response) {
alert(response.responseText);
}
});
}
//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 username = $(this).find("input[type=hidden]").val();
PopulateCountries($(this).find('#ddlUserName'));
alert(username);
$(this).find('#ddlUserName').val(username);
$(this).find(".text").show();
$(this).find(".label").hide();
}
});
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();
customer.username = row.find(".UserName").find(".label").html();
$.ajax({
type: "POST",
url: "/Customer/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>
using AADatabaseLayer;
using Account_App.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Account_App.Controllers
{
public class CustomerController : Controller
{
// GET: Customer
EmpDBEntities DB = new EmpDBEntities();
public ActionResult Index()
{
var custom = DB.Customers.ToList();
var user = DB.tblUsers.ToList();
var investerlist = from e in custom
join u in user on e.UserID equals u.UserID into table1
from u in table1.ToList()
select new CustomerMV
{
CustomerId=e.CustomerId,
Country=e.Country,
Name=e.Name,
UserName = u.UserName
};
return View(investerlist);
}
[HttpPost]
public ActionResult UpdateCustomer(Customer customer)
{
{
Customer updatedCustomer = (from c in DB.Customers
where c.CustomerId == customer.CustomerId
select c).FirstOrDefault();
updatedCustomer.Name = customer.Name;
updatedCustomer.Country = customer.Country;
updatedCustomer.UserID = customer.UserID;
DB.SaveChanges();
}
return new EmptyResult();
}
[HttpPost]
public ActionResult GetCountries()
{
{
return Json(DB.Customers.Select(x => x.UserID).Distinct().ToList());
}
}
}
}
Table Structure
CREATE TABLE [dbo].[Customers](
[CustomerId] [int] IDENTITY(1,1) NOT NULL,
[Name] [varchar](50) NULL,
[Country] [varchar](50) NULL,
[UserID] [int] NULL,
CONSTRAINT [PK_Customers] PRIMARY KEY CLUSTERED
(
[CustomerId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
