Question

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']);
            }

Answer 1

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.