Agregar fila de tabla usando jQuery - MVC 4

Actualmente estoy tratando de implementar una funcionalidad Agregar a mi página. Actualmente, el complemento ya está funcionando, pero tengo que actualizar la página para que la fila recién agregada aparezca en la tabla.

Consulte mis códigos a continuación:

Así es como genero mi tabla:

<table class="webGrid" id="ProductsTable">
<tr>
    <td><strong><span>ProductID</span></strong></td>
    <td><strong><span>ProductName</span></strong></td>
    <td><strong><span>Price</span></strong></td>
    <td colspan="2"><strong><span>Action</span></strong></td>
</tr>

@foreach (var item in repository.GetAllProducts(ViewData["BranchCode"].ToString()))
{ 
<tr>
    <td><span class="ProductID">@item.ProductID</span></td>
    <td><span class="ProductName">@item.ProductName</span></td>
    <td><span class="Price">@item.Price</span></td>
    <td>@Html.ActionLink("Edit", "Edit", new { RecordID = item.RecordID }, new { @class = "editLink" })</td>
    <td>@Html.ActionLink("Delete", "Delete", new { RecordID = item.RecordID }, new { @class = "editLink" })</td>
</tr>
}

Actualmente, la edición y la eliminación ya funcionan bien. A continuación se muestra cómo hago la edición:

function update(data) {
if (data.Success == true) {
    var parent = linkObj.closest("tr");

    parent.find(".ProductID").html(data.Object.ProductID);
    parent.find(".ProductName").html(data.Object.ProductName);
    parent.find(".Price").html(data.Object.Price);
}
else {
    $("#update-message").html(data.ErrorMessage);
    $("#update-message").show();
}

}

Ahora estoy tratando de implementar una funcionalidad de agregar que es casi la misma que la edición jquery que estoy usando. He intentado usar el .append método sin éxito.

EDIT:

He intentado usar el siguiente código para el complemento. Pero no parece hacer nada. O tal vez estoy haciendo algo mal:

    function add(data) {
    if (data.Success == true) {

        var rowTemplate = $("#rowTemplate").html();
        var tbl = document.getElementById("ProductsTable");
        var counter = $("#ProductsTable tr").length;
        data.Counter = counter;
        $("#ProductsTable").append(applyTemplate(rowTemplate, data));

    }
    else {
        $("#update-message").html(data.ErrorMessage);
        $("#update-message").show();
    }
}

function applyTemplate(template, data) {
    var str = template;
    if ($.isPlainObject(data)) {
        $.each(data, function (index, value) {
            var find = new RegExp("\\$1" + index, "ig");
            str = str.replace(/\$/g, "\$1");
            str = str.replace(find, value);
        });
    }
    return str;
}

Hace uso de una plantilla de fila como la siguiente:

<script type="text/x-template" id="rowTemplate">
        <tr><td><input type="text" id="txtName_$Counter" value="" /></td></tr>
    </script>

Acabo de encontrar esta solución en línea, pero no puedo hacer que funcione. También probé el código a continuación (lo inventé en función de la edición jquery que tengo):

    function add(data) {
    if (data.Success == true) {
        var parent = linkObj.closest("tr");
        parent.find(".ProductID").append(data.Object.ProductID);
        parent.find(".ProductName").append(data.Object.ProductName);
        parent.find(".Price").append(data.Object.Price);
    }
    else {
        $("#update-message").html(data.ErrorMessage);
        $("#update-message").show();
    }
}

EDIT:

En este momento, así es como se ve mi jQuery:

function add(data) {
    if (data.Success == true) {
        data = { Counter: 3 };
        $("#rowTemplate").tmpl(data).appendTo("#ProductsTable");
        $('#updateDialog').dialog('close');
    }
    else {
        $("#update-message").html(data.ErrorMessage);
        $("#update-message").show();
    }
}

y esta es mi plantilla:

<script type="text/x-template" id="rowTemplate">
    <tr>
        <td><span class="ProductID"></span></td>
        <td><span class="ProductName"></span></td>
        <td><span class="Price"></span></td>
        <td>@Html.ActionLink("Edit", "_EditProduct", new { @class = "editLink" })</td>
        <td>@Html.ActionLink("Delete", "_DeleteProduct", new { @class = "editLink" })</td>
    </tr>
</script>

Gracias a Sir @Muhammad Adeel Zahid por ayudarme a hacer que jQuery funcione para agregar filas. Sin embargo, solo agrega una nueva fila a mi tabla. Lo que necesito ahora es hacer que agregue los valores que tengo de la data objeto en el add function del jQuery.

He intentado seguir el tutorial de ESTE ENLACE pero parece que no puedo hacerlo funcionar. Mi código está a continuación:

function add(data) {
    if (data.Success == true) {
        var prod = $.map(data.results, function (obj, index) {
            return {
                ProductID:  obj.text,
                ProductName: obj.text,
                Price: obj.text
            };
        });

        prod = { Counter: 3 };
        $("#rowTemplate").tmpl(prod).appendTo("#ProductsTable");
        $('#updateDialog').dialog('close');
    }
    else {
        $("#update-message").html(data.ErrorMessage);
        $("#update-message").show();
    }
}

¡Muchas gracias por ayudar!