Update view's model or datatable for client updates?

In a web page, when a user deletes rows from a datatable, should I be using the view's model or the datatable to do the data manipulation? (I'm learning MVC 4, and I'm not sure if accessing the model causes a hit to the server.)

Here's a quick example of what I'm trying to do. In my controller, I'm returning some Person objects:

public ActionResult Index()
{
    List<Person> people = new List<Person>();
    people.Add(new Person() { Id = 1, FirstName = "Geddy", LastName = "Lee" });
    people.Add(new Person() { Id = 2, FirstName = "Alex", LastName = "Lifeson" });
    // more people here...

    return View(people);
}

This is how my view references people (first line in view):

@model List<MiscCommon.Entities.Person>

In my view, I'm using datatables to display. That part is working just fine.

In my javascript function, I'm successfully able to pass the ID when the user hits delete (the x) on a row in the table. However, I'm not sure if I should manipulate the datatable directly (as shown below), or if I should be modifying @model then refreshing the datatable. Which way is considered correct? Or is there even another approach that I'm not aware of?

function RemovePerson(personIdToDelete) {
    var oTable = $('#tablePeople').dataTable();
    var rows = oTable.fnGetNodes();
    var rowToDelete;

    for (var i = 0; i < rows.length; i++) {
        var idFromCurrentRow = oTable.fnGetData(i, 1);  // ID column
        if (idFromCurrentRow == personIdToDelete) {
            rowToDelete = i;
        }                
    }

    oTable.fnDeleteRow(rowToDelete);
}

Note: I'm using the model to populate the table in the first place:

@foreach (var person in Model) {
                @:$('#tablePeople').dataTable().fnAddData([@MvcHtmlString.Create(string.Format("'<a href=\"\", onclick=\"RemovePerson({0}); return false;\">x</a>'", @person.Id)), '@person.FirstName', '@person.LastName']);
            }

Answers


Your @model only exists server-side. Once the DOM is rendered and sent to the client, the @model is disposed. You need to contact the server again to let database know that record should be deleted. You have two options to do that:

Option One

Contact the server during your RemovePerson function in Javascript via AJAX.

Option Two

Post the entire page back to the server and parse the results. This would require your table being wrapped in a form and an input for each one of your rows.

I prefer to use option one and using the jQuery.ajax() method found here.


The best approach is to use a ViewModel which is the what you will pass to your view. so it becomes:

Database -> Model -> Controller -> ViewModel -> View

And then when the users updates or deletes a record:

View -> ViewModel -> Controller -> Model -> Database

In other words you will create a PeopleModel class that will include only the properties needed for the view.


Need Your Help

How to fill the treeTableView correctly

java javafx nullpointerexception treetableview

I have a record in database which being get must be in the tree table view. Here is the filling method:

How can I use hover in a child without the parent's hover being activated?

css html hover parent-child

My code can add divs as child or sibling, I've created two classes and two :hover for each class but when I put the mouse on a child the parent hover is activated as well.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.