动态数据更改在Html表中不起作用(asp.net mvc)

时间:2018-01-12 11:11:08

标签: asp.net-mvc

我是asp.net mvc的新手我在这里尝试从列表中的html表中显示记录。第二次点击我想显示不同的记录,但问题是它显示的是同一个表。此处变量i是静态变量,最初设置为1

这是代码

模型类 - > 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>

下面的图像是时间点击时显示的表格。

enter image description here

第一次按钮点击enter image description here

第二时间按钮单击enter image description here

第二时间按钮单击列表enter image description here

中的值

2 个答案:

答案 0 :(得分:1)

使用empty()和append(data)而不是replaceWith(data)

答案 1 :(得分:0)

这是因为获取方法。

使用post方法

当请求没有变化时,浏览器会在get方法中返回缓存响应值。

或者针对每个请求发送唯一ID

您的代码没有任何问题。

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