Webgrid Drop down Save or Update - asp.net-mvc

Question

I started using web grid from last couple of days. Everything was so handy with webgrid like displaying columns with different datatype like textbox, label, drop down etc. But how do I save data or update data.
I tried using action link and submit buttons but none of them worked for me. They weren't fetching the modified drop down data in my controller. The action link was able to fetch the user id but it couldn't get the changed drop down value.
Below is the code:
View
WebGridColumn colLocation = null;
foreach (var col in Model)
{
colLocation = new WebGridColumn()
{
Header = "Locations",
Format = (item) => #Html.DropDownList("LocationId", #col.LocationItems.Select(l => new SelectListItem
{
Text = l.Text,
Value = l.Value,
Selected = ((WebGridRow)item)["LocationId"].ToString() == l.Value
}
)
)
};
colSave = new WebGridColumn()
{
Header = "Save User",
Format = (item) => Html.ActionLink("Save", "Save", "UsersList", new { userId = item.UserId, locationId = item.LocationId }, new { #class = "btn btn-default" }),
CanSort = true
};
}
columns.Add(colLocation);
columns.Add(colSave);
#grid.GetHtml(tableStyle: "webgrid",
headerStyle: "header",
selectedRowStyle: "select",
alternatingRowStyle: "alt",
columns: columns
)
Controller
public ActionResult Save(int userId, int locationId)
{
var user = Utility.SetUserDetails(userId, locationId);
return RedirectToAction("UsersList");
}

Answer 1

After some rigorous trials, I've achieved this functionality. This can be done using ajax.
I've to extend my column properties to include class & id attribute
colUser = new WebGridColumn()
{
Header = "User Id",
ColumnName = "UserId",
CanSort = true,
Format = #<text>
<span class="display"><label id="lblUserId">#item.UserId</label></span>
<input type="text" id="inUserId" value="#item.UserId" class="edit" style="visibility:hidden" />
</text>
};
colLocation = new WebGridColumn()
{
Header = "Locations",
Format = #<text>
#Html.DropDownList("Location", #col.LocationItems.Select(l => new SelectListItem
{
Text = l.Text,
Value = l.Value,
Selected = ((WebGridRow)item)["LocationId"].ToString() == l.Value
}
), new { #class = "edit", #id = "inLocation" })
</text>
};
colSave = new WebGridColumn()
{
Header = "Save User",
Format = #<text>
Save
</text>
};
After adding the jquery script, we can post the selected values into controller,
<script type="text/javascript">
$(function () {
$('.save-btn').on("click", function () {
var tr = $(this).parents('tr:first');
var id = tr.find("#inUserId").val();
var location = tr.find("#inLocation").val();
var User =
{
"UserId": id,
"LocationId": location
};
$.ajax({
url: '/UsersList/SaveData/',
data: JSON.stringify(User),
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (result) {
isSuccess = result;
},
error: function (result) {
isSuccess = result;
}
})
});
});
</script>
In the controller, add new method,
public ActionResult SaveData(UserAccountViewModel User)
{
int userId = User.UserId;
int locationId = Convert.ToInt32(User.LocationId);
var user = Utility.SetUserDetails(userId, locationId);
return RedirectToAction("UsersList");
}