CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcasp.net-mvc-4
Bob Horn
Bob Horn

Reputation: 34297

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.

datatables views

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

Upvotes: 1

Views: 879

Answers (2)

Joey Gennari
Joey Gennari

Reputation: 2361

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.

Upvotes: 1

Carlos Martinez T
Carlos Martinez T

Reputation: 6528

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.

Upvotes: 1

Related Questions