Guys I have a html table in my ASP MVC home view. Now the table is being filled initially through the data present in model. Now upon clicking certain buttons on the homepage, I want to update the data present in the table i.e. clear the data present in the table and update it with the one from ajax call.

This is my table from view :

<article class="scrlable">
<table>
    <tr>
        <td>#</td>
        <td>Name</td>
        <td>Status</td>
        <td>Since</td>
    </tr>

    @{   
    int srno = 1;
    foreach (var pendingResponseModel in Model.hrPendingResponseList)
    {
    <tr>
        <td>@srno</td>
        <td>@pendingResponseModel.CandidateName</td>
         <td>@pendingResponseModel.CandidateLifeCycleStatusName</td>
          @if (pendingResponseModel.DayDifference == "1")
                {
          <td>@(pendingResponseModel.DayDifference) day</td>
                    }
                    else
                    {
                        <td>@(pendingResponseModel.DayDifference) days</td>
                    }
                </tr>
                    srno++;
                }
            }
        </table>
    </article>

And this is my ajax call :

function GetStatusWise(control, departCode) {
    $.ajax(
        {
            type: "GET",
            url: "...URL..." + departCode,
            dataType: "json",
            crossDomain: true,
            async: true,
            cache: false,
            success: function (data) {
                $.each(data.data, function (index, value) {
                 // UPDATE TABLE HERE...
                });
            },
            error: function (x, e) {
                alert('There seems to be some problem while fetching records!');
            }

        }
    );
}

The data returned from ajax call is in JSON. It has Name, Status and Since elements. They can be viewed by using value.CandidateName, value.Status etc

Now I want to update the values of above table with the values I am getting through AJAX call. How would I go about doing that? Is it possible to replace the whole article ?

Note : I am getting multiple values through ajax call so that is why I put a loop on the function.

Guys I have a html table in my ASP MVC home view. Now the table is being filled initially through the data present in model. Now upon clicking certain buttons on the homepage, I want to update the data present in the table i.e. clear the data present in the table and update it with the one from ajax call.

This is my table from view :

<article class="scrlable">
<table>
    <tr>
        <td>#</td>
        <td>Name</td>
        <td>Status</td>
        <td>Since</td>
    </tr>

    @{   
    int srno = 1;
    foreach (var pendingResponseModel in Model.hrPendingResponseList)
    {
    <tr>
        <td>@srno</td>
        <td>@pendingResponseModel.CandidateName</td>
         <td>@pendingResponseModel.CandidateLifeCycleStatusName</td>
          @if (pendingResponseModel.DayDifference == "1")
                {
          <td>@(pendingResponseModel.DayDifference) day</td>
                    }
                    else
                    {
                        <td>@(pendingResponseModel.DayDifference) days</td>
                    }
                </tr>
                    srno++;
                }
            }
        </table>
    </article>

And this is my ajax call :

function GetStatusWise(control, departCode) {
    $.ajax(
        {
            type: "GET",
            url: "...URL..." + departCode,
            dataType: "json",
            crossDomain: true,
            async: true,
            cache: false,
            success: function (data) {
                $.each(data.data, function (index, value) {
                 // UPDATE TABLE HERE...
                });
            },
            error: function (x, e) {
                alert('There seems to be some problem while fetching records!');
            }

        }
    );
}

The data returned from ajax call is in JSON. It has Name, Status and Since elements. They can be viewed by using value.CandidateName, value.Status etc

Now I want to update the values of above table with the values I am getting through AJAX call. How would I go about doing that? Is it possible to replace the whole article ?

Note : I am getting multiple values through ajax call so that is why I put a loop on the function.

• javascript
• jquery
• ajax
• asp-mvc

• Why -1. Please care to explain. – NewbieProgrammer Commented Jun 18, 2014 at 14:16
• Probably the reason listed when you hover over the downvote button – Kevin B Commented Jun 18, 2014 at 14:16
• 3 You've already done most of the hard work, all you have to do now is extract the table from the response and insert it. Since we don't exactly know what the response is, we can't really suggest a working solution. All we can do is push you in the right direction (which doesn't make for very good answers) – Kevin B Commented Jun 18, 2014 at 14:18

3 Answers 3

I have solved my problem by the following code

function GetStatusWise(control, departCode) {
    $.ajax(
        {
            type: "GET",
            url: WebApiURL + ".....URL...." + departCode,
            dataType: "json",
            crossDomain: true,
            async: true,
            cache: false,
            success: function (data) {
                var srno = 1;
                $('#tblPendingHrResponse').find($('.trTblPendingHrResponse')).remove();

                $.each(data.data, function (index, value) {
                    random(value, srno);
                    srno++;
                });
            },
            error: function (x, e) {
                alert('There seems to be some problem while fetching records!');
            }

        }
    );
}

.

function random(values, srno) {
        var daydifference = values.DayDifference == 1 ? '<td>' + values.DayDifference + ' day </td>' : '<td>' + values.DayDifference + ' days </td>';

        var tr = '<tr class="trTblPendingHrResponse">' +
        '<td>' + srno + '</td>' +
        '<td>' + values.CandidateName + '</td>' +
        '<td>' + values.CandidateLifeCycleStatusName + '</td>' +
         daydifference + '</tr>' + srno++;

        $('#tblPendingHrResponse').append(tr);

    }

You can use jQuery append.

success: function (data) {
    $.each(data.data, function (index, value) {
        $("table").html("Your HTML to updated");
    });
},

Have your controller method return a partial which contains your table or article.

[HttpPost]
public virtual ActionResult GetTable(ArticleViewModel viewModel)
{
    // do stuff
    return PartialView("_ArticleTable", viewModel);
}

Then update the table or article in jQuery:

ou can use jQuery append.

success: function (data) {
    $("table").html(data);
},