我在使用从DAL返回的新模型更新我的webgrid时遇到问题。
在我的视图中，我有用于过滤网格上显示的数据的复选框。勾选一个复选框后，这会调用一些jQuery ajax函数，该函数将复选框值传递给我的控制器中的方法。然后调用我的DAL，它返回一个具有正确值的模型的新列表。我将此列表返回到我的视图，但是当页面加载时，没有什么是不同的。网格看起来是一样的，这不是我想要的，复选框也是我想要的。
我会粘贴我的视图和控制器，所以希望有人知道一个好的解决方案：
查看
@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>
控制器中的操作结果
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);
}
要点：
有没有人知道如何在使用actionResult方法和包含模型的新列表的ajax请求后更新webgrid？
谢谢！
答案 0 :(得分：2)
如果您创建了一个部分视图，然后使用回发/ ajax方法进行更改，那么您可以将页面的整个部分更改为您希望它的外观。
在初始加载时，我在div中进行了部分调用
<div id="userTime">
@Html.Partial("UserTimeLogs", Model.TimeLogDetail)
</div>
然后我调用了一个定义的动作来获取更新的信息/视图
// 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);
}
});
Controller上的Action被定义为HttpPost，并返回在初始加载中定义的相同局部视图。
[HttpPost]
public ActionResult AjaxUserLogTimes(Guid id, DateTime requestedDate)
{
return View("UserTimeLogs", timeLogService.GetLogsForUser(id, Period.Daily, requestedDate));
}
因此，在success上，从操作返回的HTML将覆盖'#usertime'div内的部分，并用新网格替换它。
如果AJAX，请确保您的ViewStart具有以下内容以绕过视图返回上的布局绑定：
@{
if (!Request.IsAjaxRequest())
{
Layout = "~/Views/Shared/_Layout.cshtml";
}
}