Question

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!

Answer 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";
    }
}