问题
I have an issue with updating my webgrid with a new model which is returned from my DAL.
On my view I have checkboxes used to filter data displayed on the grid. Once a checkbox is ticked this calls some jQuery ajax function which passes the checkbox values to my method in my controller. This then calls my DAL and it returns a new list of my model with the correct values. I return this list to my view but when the page loads nothing is different. The grid looks the same which isn't what I intend and the checkboxes are the same which is how I want it.
I will paste my view and controller so hopefully someone knows a good solution:
View
@model IEnumerable<UserManager.Models.vw_UserManager_Model>
@*@model UserManager.Models.vw_UserManager_Model
*@
@{
ViewBag.Title = "User Manager Dashboard";
}
@Html.ActionLink("Create New User", "CreateUser")
@*<div class="webgrid-filter">
<b>@Html.Label("Select a filter: ")</b>
<br />
@Html.Label("Hide ALF Intelligence users:")
<input name="User logged in" type="checkbox" onclick="filterGrid('@Url.Action("FilterGrid", "UserManager", new { filterVal = Model.FirstOrDefault().alfIntelligence + "," + "alfIntelligence" })')" id="chkFilterAlfIntell" />
@Html.Label("Hide ALF Connect users:")
<input name="User logged in" type="checkbox" onclick="filterGrid('@Url.Action("FilterGrid", "UserManager", new { filterVal = Model.FirstOrDefault().alfIntelligence + "," + "alfIntelligence" })')" id="chkFilterAlfConn" />
@Html.Label("Hide BRAD users:")
<input name="User logged in" type="checkbox" onclick="filterGrid('@Url.Action("FilterGrid", "UserManager", new { filterVal = Model.FirstOrDefault().alfIntelligence + "," + "alfIntelligence" })')" id="chkFilterBrad" />
</div>*@
<div class="webgrid-filter">
<b>@Html.Label("Select a filter: ")</b>
<br />
@Html.Label("Toggle ALF Intelligence users:")
<input name="User logged in" type="checkbox" onclick="filterGrid('@Url.Action("FilterGrid", "UserManager")')" id="chkFilterAlfIntell" checked="checked" />
@Html.Label("Toggle ALF Connect users:")
<input name="User logged in" type="checkbox" onclick="filterGrid('@Url.Action("FilterGrid", "UserManager")')" id="chkFilterAlfConn" checked="checked"/>
@Html.Label("Toggle BRAD users:")
<input name="User logged in" type="checkbox" onclick="filterGrid('@Url.Action("FilterGrid", "UserManager")')" id="chkFilterBrad" checked="checked"/>
</div>
<div class="webgrid-wrapper">
@{
ViewBag.Title = "Jobs";
WebGrid grid = new WebGrid(Model, canPage: true, canSort: true, rowsPerPage: 15, selectionFieldName: "selectedRow", fieldNamePrefix: "gridItem");
}
@grid.GetHtml(
fillEmptyRows: true,
tableStyle: "webgrid",
alternatingRowStyle: "webgrid-alternating-row",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
mode: WebGridPagerModes.All,
columns: new[] {
grid.Column("UserName"),
grid.Column("salutation"),
grid.Column("FirstName"),
grid.Column("LastName"),
grid.Column("Password"),
//grid.Column("isactive"),
//grid.Column(header: "Is logged in?", format: (model) => @Html.Raw("<input type='checkbox' checked='" + ((model.isactive) ? "checked" : "unchecked") + "' />")),
grid.Column(header: "User logged in", format: @<text><input name="User logged in"
type="checkbox" @(item.isactive == true ? "Checked" : null) onclick="logUserOff('@Url.Action("LogUserOff", "UserManager", new {userid = item.userid} )')" id="chkboxIsActive" /></text>),
grid.Column("isApproved"),
grid.Column("MaxConcurrentUsers"),
grid.Column("email"),
grid.Column("group_name"),
grid.Column("module_name"),
grid.Column(header:"Edit", format:@<text><div id="btnEditSelectedRow">
"@Html.ActionLink("Edit record", "EditUser", "UserManager", new {
userid = item.userid,
salutation = item.salutation,
firstname = item.FirstName,
lastname = item.LastName,
password = item.Password,
isactive = item.isactive,
isapproved = item.IsApproved,
maxconcurrentusers = item.MaxConcurrentUsers,
email = item.email,
module = item.module_name,
group = item.group_name }, null)</div></text>),
grid.Column(header:"Delete", format:@<text><div id="btnDelSelectedRow">
"@Html.ActionLink("Delete record", "DeleteUser", "UserManager", new {
userid = item.userid,
username = item.UserName,
salutation = item.salutation,
firstname = item.FirstName,
lastname = item.LastName,
password = item.Password,
isactive = item.isactive,
email = item.email,
module = item.module_name,
group = item.group_name }, null)</div></text>)
})
</div><br />
<script type="text/javascript">
$(document).ready(function () {
// Disable checkboxs where a user is not active.
$(".webgrid-wrapper input:not(:checked)").attr("disabled", "disabled");
// Style tables.
function jQueryUIStyling() {
$('input:button, input:submit').button();
$('.webgrid-wrapper').addClass('ui-grid ui-widget ui-widget-content ui-corner-all');
$('.webgrid-title').addClass('ui-grid-header ui-widget-header ui-corner-top');
jQueryTableStyling();
} // end of jQueryUIStyling
function jQueryTableStyling() {
$('.webgrid').addClass('ui-grid-content ui-widget-content');
$('.webgrid-header').addClass('ui-state-default');
$('.webgrid-footer').addClass('ui-grid-footer ui-widget-header ui-corner-bottom ui-helper-clearfix');
} // end of jQueryTableStyling
});
</script>
<script type="text/javascript">
function filterGrid(url) {
alert("entering filter grid");
var filters = getFilterVals();
console.log(filters);
$.ajax({
url: url,
type: "POST",
async: false,
data: "alfConnect=" + filters.alfConnect + "&" + "alfIntelligence=" + filters.alfIntelligence + "&" + "brad=" + filters.brad
// data: value
}).done(function () {
$(this).addClass("done");
});
}
function getFilterVals() {
filters = new Object();
if ($('.webgrid-filter #chkFilterAlfIntell').is(':checked')) {
filters.alfIntelligence = 1;
}
else {
filters.alfIntelligence = 0;
}
if ($('.webgrid-filter #chkFilterAlfConn').is(':checked')) {
filters.alfConnect = 1;
}
else {
filters.alfConnect = 0;
}
if ($('.webgrid-filter #chkFilterBrad').is(':checked')) {
filters.brad = 1;
}
else {
filters.brad = 0;
}
return filters;
}
function logUserOff(url) {
var answer = confirm('Are you sure you want to save this data?')
if (answer) {
// alert(url + ": " + value);
$.ajax({
url: url,
type: "POST"
// data: value
}).done(function () {
$(this).addClass("done");
});
return true;
}
else {
return false;
}
};
</script>
Action result in controller
public ActionResult FilterGrid(int alfConnect, int alfIntelligence, int brad)
{
List<UserManager.Models.vw_UserManager_Model> modelList = DAL.getGrid(alfConnect, alfIntelligence, brad);
return View("Index", modelList);
}
Summary:
Does anyone know how to update a webgrid after an ajax request from using a actionResult method and new list that contains model?
Thanks!
回答1:
If you created a partial view that you then change with a postback / ajax method, then you can change an entire section of a page to how you want it to look.
On the initial load here, I have a Partial call in a div
<div id="userTime">
@Html.Partial("UserTimeLogs", Model.TimeLogDetail)
</div>
then I have a call to an action defined to get me the updated information/view
// Fired on click event of object, use live "click" if control in in the partial view as well. in this case it is on a date change in a textbox.
Post(baseUrl + "User/AjaxUserLogTimes/" + loginId, loginId, $("#date").val(), "#userTime");
function Post(PostUrl, id, dateTime, control) {
$.ajax({
type: "POST",
url: PostUrl,
async: false,
data: { id: id, requestedDate: dateTime},
dataType: "html",
error: function (xhr, status, error) {
// you may need to handle me if the json is invalid
// this is the ajax object
alert(xhr.statusText);
},
success: function (data) {
$(control).html(data);
}
});
The Action on the Controller is defined as an HttpPost and returns the same partial view defined on the intial load.
[HttpPost]
public ActionResult AjaxUserLogTimes(Guid id, DateTime requestedDate)
{
return View("UserTimeLogs", timeLogService.GetLogsForUser(id, Period.Daily, requestedDate));
}
So on success the HTML returned from the action overwrites the section inside the '#usertime' div and replaces it with a new grid.
make sure your ViewStart has the following to bypass the layout bind on the view return if AJAX:
@{
if (!Request.IsAjaxRequest())
{
Layout = "~/Views/Shared/_Layout.cshtml";
}
}
来源：https://stackoverflow.com/questions/13397837/mvc-3-razor-how-to-bind-new-model-to-webgrid-using-jquery-ajax