Добавить данные json в таблицу с помощью jquery и View в MVC

Question

Добавить данные json в таблицу с помощью jquery и View в MVC

0

Контроллер Я получаю данные от использования 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>

Francis Padron 03 окт. 2013, в 06:46

Источник

0

Вы можете попробовать использовать JQgrid, плагин, который хорошо работает с JSON.
AthibaN 03 окт. 2013, в 06:29
2

Какой смысл передавать данные для просмотра, сериализации в json, а затем использовать javascript для их добавления, почему бы не визуализировать данные сразу, используя бритву?
Giedrius 03 окт. 2013, в 06:34
0

проверьте эту ссылку stackoverflow.com/questions/12797343/…
Nitin Varpe 03 окт. 2013, в 06:39

Показать ещё 1 комментарий

Теги:

jquery

json

asp.net-mvc-3

2 ответа

1

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

Вы можете использовать цикл foreach.

Jagz W 03 окт. 2013, в 04:41

Ещё вопросы

Вы можете попробовать использовать JQgrid, плагин, который хорошо работает с JSON.
Какой смысл передавать данные для просмотра, сериализации в json, а затем использовать javascript для их добавления, почему бы не визуализировать данные сразу, используя бритву?
проверьте эту ссылку stackoverflow.com/questions/12797343/…

Andriy Gubal · Accepted Answer · 2013-10-03T09-00-00.000Z

если вы хотите просто заполнить таблицу данными при нажатии кнопки, вы выбрали не самое простое решение. Я бы лучше создал 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>

OMG, ты герой, спасибо, это работает очень хорошо !!!!
Я работал с этим в течение нескольких недель !!!