MVC 3 Razor-如何绑定新车型使用jQuery Ajax来的WebGrid(MVC 3 Ra

我有更新我的WebGrid与从我DAL返回一个新的模式的问题。

在我看来，我已经使用复选框筛选的网格显示的数据。 一旦一个复选框被打勾这个调用其通过在我的控制器的复选框值我的方法的一些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？

谢谢！

Answer 1:

如果你创建了一个局部视图，你再用回传/ 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);
        }
    });

控制器上的动作被定义为HttpPost并返回对INTIAL负载所定义的相同的局部视图。

    [HttpPost]
    public ActionResult AjaxUserLogTimes(Guid id, DateTime requestedDate)
    {
        return View("UserTimeLogs", timeLogService.GetLogsForUser(id, Period.Daily, requestedDate));
    }

因此，在success返回的HTML从操作将覆盖“#usertime” DIV中的部分，并用新的网格替换它。

请确保您的ViewStart具有绕过对AJAX如果视图返回的布局绑定的情况如下：

@{
    if (!Request.IsAjaxRequest())
    {
    Layout = "~/Views/Shared/_Layout.cshtml";
    }
}

文章来源: MVC 3 Razor- how to bind new model to webgrid using jQuery ajax