Dynamic Data Change Not Working In Html Table(asp.net mvc)

Question

I am new to asp.net mvc here i am trying to show record in a html table from the list .On second time click i want to show different record but the problem is that it is showing the same table.Here the variable i is a static variable and intially it is set to 1.

Here is the Code

Model class-->Employee.cs

public class Employee
    {
        public string Name { get; set; }
        public string ID { get; set; }
        public string Department { get; set; }
        public int Salary { get; set; }
    }

Index.cshtml

  <input type="button" value="Show Grid" id="btnClick" class="btn btn-primary"  style="margin-left:10px;" />
         <div id="divTest"></div>


    @*<link rel="Stylesheet" href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />*@
            <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
        @*<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>*@

    <script type="text/javascript">
        $(function () {
            $('#btnClick').click(function () {
                $.get('@Url.Action("ShowGrid","Test")', function (data) {
                    $('#divTest').replaceWith(data);
                });
            });
        });
    </script>

TestController

[HttpGet]
        public PartialViewResult ShowGrid()
        {

           List<Employee> _emplyeeList;

            if (i == 1)
            {
                _emplyeeList = new List<Employee>();
                _emplyeeList.Add(new Employee() { Name = "Steve", ID = "1", Department = "IT", Salary = 1000 });
                _emplyeeList.Add(new Employee() { Name = "Samules", ID = "2", Department = "Telecom", Salary = 2000 });
                _emplyeeList.Add(new Employee() { Name = "Edward", ID = "3", Department = "Sales", Salary = 3000 });
                var a = _emplyeeList;
                ViewBag.Details = a;
                i++;
            }
            else {
                _emplyeeList = new List<Employee>();
                _emplyeeList.Add(new Employee() { Name = "Prateek", ID = "1", Department = "IT", Salary = 1000 });
                _emplyeeList.Add(new Employee() { Name = "Partho", ID = "2", Department = "Telecom", Salary = 2000 });
                _emplyeeList.Add(new Employee() { Name = "Pinaki", ID = "3", Department = "Sales", Salary = 3000 });
                var a = _emplyeeList;
                ViewBag.Details = a;


            }
            return PartialView("partial");

}

partial.cshtml

<div style="margin-top:10px;">
    <table id="MyTable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Id</th>
                <th>Department</th>
                <th>Salary</th>
            </tr>

        </thead>
        <tbody>
            @if (ViewBag.Details != null) { 
            foreach (var item in ViewBag.Details)
            {

                <tr>

                    <td>
                        @item.Name
                    </td>
                    <td>
                        @item.ID
                    </td>
                    <td>@item.Department</td>
                    <td>@item.Salary</td>
                </tr>

            }
            }
        </tbody>



    </table>
</div>

Below Image is the table which is been shown on both time click.

First time Button Click

Second Time Button Click

Second Time Button Click values from list

Answer 1

Use empty() and append(data) instead of replaceWith(data)

Answer 2

This is because of Get method.

Use post method.

Browser returns cached response value in get method when there is no change in request.

Or send unique id with every request.

There is nothing wrong in your code.

var ajaxid=1;
        $(function () {
            $('#btnClick').click(function () {
                $.get('@Url.Action("ShowGrid","Test")' + '?ajaxid=' + (ajaxid++), function (data) {
                    debugger;
                    $('#divTest').replaceWith(data);
                });
            });
        });