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

no the value of i get incremented and it is coming to else block but table remains the same — PRATEEK GHOSH
– PRATEEK GHOSH, Commented Jan 12, 2018 at 11:16
Did you debug the Action method to see what is returned on both times ? (And when you click the second time, why didn't you entered else, did i didn't changed ?) — Orel Eraki
– Orel Eraki, Commented Jan 12, 2018 at 11:25
I meant Debugging you code, not DebugMode when running the application. Add a breakpoint on the condition i == 1 run you application. — Orel Eraki
– Orel Eraki, Commented Jan 12, 2018 at 11:33

hamza · Accepted Answer · 2018-01-12 12:53:52Z

1

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

answered Jan 12, 2018 at 12:53

hamza

262 bronze badges

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

1 Comment

user3559349 Over a year ago

Note you do not need the .empty() (.append() overwrites the html within the element)

score 0 · Accepted Answer · 2018-01-12 12:25:15Z

0

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

edited Jan 12, 2018 at 12:25

answered Jan 12, 2018 at 11:28

user2792959

6 Comments

PRATEEK GHOSH Over a year ago

I have tried using post method but result is the same

PRATEEK GHOSH Over a year ago

Can you give me some example on how to send unique code on every request

user2792959 Over a year ago

take any variable at client side and increment there. and send it with ajax. First check what is in response of ajax.

PRATEEK GHOSH Over a year ago

Stil it is same as it was earlier

user2792959 Over a year ago

Let us continue this discussion in chat.

|

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related