Using MVC and JQuery to dynamically & consistently add values to a table

Question

I have a form which can have multiple values in it.

For example:

Please list your dependants.

I have a fieldset containing my three fields

First name,
Last name,
Date of Birth

as well as an Add button.

My add button fires of a jQuery ajax request and upon the success adds a table row into the table

Pseudo Code:

$.ajax({
    url: myUrl,
    data: myData,
    success: function(){
        var row = $("<tr id='...'>");
        row.append("<td>").text(txtFirstName.val());
        row.append("<td>").text(txtLastName.val());
        row.append("<td>").text(dteDateOfBirth.val());
        row.appendTo($("#myDependantsTable"));
    }
    ...
});

This works great. However, now I have my HTML defined in two different places, my javascript and also in my View

IE:

<tr>
    <td>@Model.FirstName</td>
    <td>@Model.LastName</td>
    <td>@Model.DateOfBirth</td>
</tr>

A problem comes into play when I start modifying these, such as, adding a class on the date column, I need to modify the code twice.

Is there anyway around this problem?

I would like:

Rows to be added "ajaxy" without a postback
Consistent layout where I only need to make a change in one place

Darin Dimitrov · Accepted Answer · 2012-08-13 18:05:16Z

4

You could have the controller action that is called with AJAX request to return a partial view containing a row. The same partial you would use when generating your table. So instead of manipulating HTML with javascript, simply append the returned partial to the table:

$.ajax({
    url: myUrl,
    data: { 
        // That's to bind to the view model that the controller
        // action you are invoking with the AJAX request takes
        // as parameter
        firstName: txtFirstName.val(), 
        lastName: txtLastName.val(), 
        dob: dteDateOfBirth.val() 
    }
    success: function(result) {
        $("#myDependantsTable").append(result);
    }
    ...
});

and in your markup:

<table id="myDependantsTable">
    @foreach(var item in Model)
    {
        @Html.Partial("_Row", item)
    }
</table>

Now your controller action will return the same partial:

public ActionResult SomeActionInvokedWithAjax(MyViewModel model)
{
    return PartialView("_Row", model);
}

answered Aug 13, 2012 at 18:05

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nathan Koop Over a year ago

nice, this is exactly what I want. Thanks Darin

Collectives™ on Stack Overflow

Using MVC and JQuery to dynamically & consistently add values to a table

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related