Question

I’ve got a nice MVC app running now, and I’m adding some AJax functionality. I have a table which displays 10 items, only certain users can see certain items. When the user adds a new post I’ve set-up the ajax to save the new entry.

However I then need to update the table, I cant find out from JQuery what status the user is (And hence what they can see) so I cant just insert a new row (As some users cant see that row). If this was web-forms I would likly have a page that dumps the table and then i would use JQuery to load the contents of that trimed down ‘page’ into the relevent slot on the current page.

Whats the best way to achieve this with MVC?

Thanks

Answer 1

As @Robert Koritnik suggests, the best way to handle this is using a PartialView. I would suggest having two separate controller actions — one that handles the original request and another that handles the AJAX new entry. Both actions would call the same logic to get the data for the table. The former would put the data into the view model along with other page data. The latter would package the data into a model for the partial view.

Model classes

public class PageViewModel
{
    ....
    public IEnumerable<TableViewModel> TableData { get; set; }
}

public class TableViewModel
{
    ...
}

Controller Code

[AcceptVerbs( HttpVerbs.Get )]
public ActionResult Index()
{
    var model = new PageViewModel();
    model.TableData = GetTableForUser( this.User );

    return View( model );
}

[AcceptVerbs( HttpVerbs.Post )]
public ActionResult AddEntry( ... )
{
    ...  add the new entry ...
    var model = GetTableForUser( this.User );

    return PartialView( "TableView", model );
}


private TableViewModel GetTableForUser( IIdentity user )
{
  ...
}

View Code

Main View

<% Html.RenderPartial( "TableView", model.TableData ); %>

<script type="text/javascript">
    $('#entryForm').submit( function() {
        $.post( '<%= Url.Action( "addentry", "controller" ) %>',
                $('#entryForm').serialize(),
                function(data) {
                   $('#table').replaceWith( data );
                },
                'html' );
        return false;
    });
</script>

TableView

<table id="table">
<% foreach (var row in Model) { %>
    <tr>
     ...
    </tr>
<% } %>
</table>