Home Dynamic Data Change Not Working In Html Table(asp.net mvc)
Reply: 2

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

PRATEEK GHOSH
1#
PRATEEK GHOSH Published in 2018-01-12 11:11:07Z

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

hamza
2#
hamza Reply to 2018-01-12 12:53:52Z

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

Hardik Viradiya
3#
Hardik Viradiya Reply to 2018-01-12 12:25:15Z

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);
                });
            });
        });
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.304592 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO