使用jquery和View in MVC在表中附加json数据

时间:2013-10-03 04:21:49

标签: jquery json asp.net-mvc-3

  

控制器我从使用datacontext

获取数据
 private Data.EmployeeDataContext _employees = new Data.EmployeeDataContext();

 public ActionResult Index()
    {          
       var data = from emp in _employees.Employees
                   select new Models.Employees
                   {
                       FirstName = emp.FirstName,
                       LastName = emp.LastName,
                   };
       ViewData["Employees"] = data;
       return View(data);
    }

查看

@{
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    var employees = serializer.Serialize(ViewData["Employees"]);
}

<html>
<head>
    <title>Index</title>
</head>
<body>
    <script src="../../Scripts/jquery-1.7.1.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#ViewData").click(function () { 
           $("#employee2").append("<tr><td>" + '@employees.ToString()' + "</tr></td>");      
            });  
         });
    </script>

    <div>
       <button id="ViewData">View Data</button>       
              <table id="employee2">
              <tr>
              <td>FirstName</td>
              </tr>
              <tr>
              <td>LastName</td>
              </tr>
              </table>
    </div>
</body>

模型

 public class Employees
    {
        public string FirstName
        {
            get;
            set;
        }
        public string LastName
        {
            get;
            set;
        }
     }

* 这是我到目前为止所获得的,或者是附加到我的表格中的数据 *

[{"FirstName":"Nancy","LastName":"Davolio"},{"FirstName":"Andrew","LastName":"Fuller"},    {"FirstName":"Janet","LastName":"Leverling"},{"FirstName":"Margaret","LastName":"Peacock"},{"FirstName":"Steven","LastName":"Buchanan"},{"FirstName":"Michael","LastName":"Suyama"},{"FirstName":"Robert","LastName":"King"},{"FirstName":"Laura","LastName":"Callahan"},{"FirstName":"Anne","LastName":"Dodsworth"}]

问题

如何正确地将这些数据附加到我的表格中?请帮助我,我只是想像这样。

    <div>
       <button id="ViewData">View Data</button>       
              <table id="employee2">
              <tr>
              <td>Nancy</td>
              </tr>
              <tr>
              <td>Davolio</td>
              </tr>....
              </table>
    </div>

2 个答案:

答案 0 :(得分:1)

<table>@foreach(var item in employees){<tr><td>@Html.DisplayFor(item.FirstName)</td><td>@Html.DisplayFor(item.LastName)</td>}</tr>}</table>

您可以使用foreach循环。

答案 1 :(得分:1)

如果您只想在按钮点击时使用数据填充表格,那么您选择的不是最简单的解决方案。我最好创建partialView:

在您的控制器中:

public ActionResult Index()
    {                 
       return View();
    }


public ActionResult Employees()
    {          
       var data = from emp in _employees.Employees
                   select new Models.Employees
                   {
                       FirstName = emp.FirstName,
                       LastName = emp.LastName,
                   };
       return PartialView(data);
    }

在您的员工PartialView中:

              <table>
@foreach(var i in Model)
{
              <tr>
              <td>@i.FirstName @i.LastName</td>
              </tr>
}
              </table>

在索引视图中:

<script>
        $("#ViewData").click(function () { 
           $(".data").load("@Url.Action("Employees", "Home")");      
            });  
    </script>


   <button id="ViewData">View Data</button>

   <div class="data"></div>