MVC 3 Razor-如何使用jQuery Ajax将新模型绑定到WebGrid [英] MVC 3 Razor- how to bind new model to webgrid using jQuery ajax
问题描述
在使用从DAL返回的新模型更新Webgrid时遇到问题.
I have an issue with updating my webgrid with a new model which is returned from my DAL.
在我看来，我有用于过滤网格上显示的数据的复选框.选中复选框后，它将调用一些jQuery ajax函数，该函数将复选框值传递给控制器中的方法.然后，这将调用我的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:
查看
@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);
}
摘要:
有人知道如何在ajax请求之后通过使用actionResult方法和包含模型的新列表来更新Webgrid?
Does anyone know how to update a webgrid after an ajax request from using a actionResult method and new list that contains model?
谢谢！
推荐答案
如果创建了部分视图，然后使用回发/ajax方法进行了更改，则可以将页面的整个部分更改为所需的方式看.
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.
在这里的初始加载中，我在div中有一个Partial调用
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);
}
});
Controller上的Action定义为HttpPost，并返回初始加载时定义的相同局部视图.
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));
}
因此，在success上，从操作返回的HTML会覆盖'#usertime'div中的部分，并将其替换为新的网格.
So on success the HTML returned from the action overwrites the section inside the '#usertime' div and replaces it with a new grid.
请确保您的ViewStart具有以下内容，以在AJAX情况下绕过视图返回上的布局绑定:
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";
}
}
这篇关于MVC 3 Razor-如何使用jQuery Ajax将新模型绑定到WebGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
