Какой элемент управления использовать для привязки данных в MVC?

Question

Я очень новичок в Asp.net MVC. У меня есть опыт работы с Webforms, где я широко использую ретрансляторы и представления сетки для моих привязок данных, встроенных редактирований, сортировки и подкачки.

Но теперь, когда MVC отличается от всех, мы не должны использовать серверные элементы управления ASP.net. Поэтому я начал искать альтернативы для представления сетки в MVC. Но я столкнулся с трудностями в выборе.

Один из вариантов - Jqgrid, но у меня нет много знаний о JSON. Другой - помощник веб-сетки в MVC.

Мое сомнение здесь в том, смогу ли я заполнить элементы управления в помощнике сетки и смогу сделать встроенное редактирование?

Я очень беспокоюсь об этой части MVC, и я плачу MVC усложняет жизнь по сравнению с веб-сайтами, но все же я хочу пойти с MVC beacause из других вещей, таких как Clean html output и красивые URL.

Поэтому, пожалуйста, дайте свои запатентованные сугестоны, на которых органы управления могут быть предпочтительными для вышеуказанных требований.

Answer 1

В MVC вы используете контроллер для привязки (View) Модели для вашего просмотра. В ViewModel вы определяете все необходимое для отображения представления. Я покажу вам небольшой пример.

модели представления:

public class CustomerModel 
{ 
    public int Id { get; set; } 
    public string Name { get; set; } 
    public string EmailAddress { get; set; } 
} 

Действие в контроллере, который создает ViewModel. Я использовал db.Customers в качестве источника данных:

public ActionResult List() 
{ 
    var customerModel = db.Customers.Select(c => new CustomerModel 
                { 
                 Id = c.Id, 
                 Name = c.Name, 
                 EmailAddress = c.EmailAddress 
                }).ToList(); 
    return View(customerModel); 
} 

The View, содержащий таблицу, это является частью связывания данных. В WebForms вы используете методы, такие как Eval() и Bind() здесь, в MVC вы создаете строго типизированный вид.

@model IEnumerable<CustomerModel> 

<table> 
    <tr> 
     <th>@Html.DisplayNameFor(m => m.Id)</th> 
     <th>@Html.DisplayNameFor(m => m.Name)</th> 
     <th>@Html.DisplayNameFor(m => m.EmailAddress)</th> 
    </tr> 
    @foreach (CustomerModel customer in Model) 
    { 
     <tr> 
      <td>@Html.DisplayFor(m => m.Id)</td> 
      <td>@Html.DisplayFor(m => m.Name)</td> 
      <td>@Html.DisplayFor(m => m.EmailAddress)</td> 
     </tr> 
    } 
</table> 

Теперь вы можете использовать один из изобилия JQuery GridViews плагин для создания сетки с рядным редактированием и т.д. См this question для некоторых вариантов.

Answer 2

Мы отчасти переключиться с WebForms в MVC, который я как лучше это, как мы делаем grid.Will выглядеть следующим образом https://datatables.net

<script type="text/javascript" charset="utf-8"> 
      $(document).ready(function() { 
       $('#example').dataTable(); 
      }); 
</script> 

    <table id="example" border="1"> 
    <thead> 
      <tr> 
       <th>Bill Number</th> 
       <th>LR Number</th>   
       <th>Previous Year</th> 
        <th>Committee Rec</th> 
       <th>Committee</th> 
       <th>Save</th> 
      </tr> 
     </thead> 
     <tbody> 
    @for (int i = 0; i < Model.billVersion.Count; i++) 
    {<tr> 
     <td>@Html.DisplayFor(model => model.billVersion[i].billNumber)</td> 
     <td>@Html.DisplayFor(model => model.billVersion[i].lrNumber)</td> 
     <td>@Html.DisplayFor(model => model.billVersion[i].previousYear)</td> 
     <td>@Html.DisplayFor(model => model.billVersion[i].committeeRec)</td> 
     <td>@Html.CheckBoxFor(model => model.billVersion[i].save_Remove)</td> 
    </tr>     
    } 
    </tbody> 

Answer 3

Я считаю, что вы думаете о MVC в неправильном направлении (это обычно при перемещении из веб-форм)

Для примера GridView мы можем сравнить это с таблицей html. Для того, чтобы создать HTML таблицу в MVC, мы должны были бы следующими:

@* This tells the page what object you are supplying as the data for the page *@ 
@model IEnumerable<MyWebsite.TableDataViewModel> 

<table> 
    <thead> 
     <tr> 
      <th>Header 1</th> 
      <th>Header 2</th> 
      <th>Header 3</th> 
      <th>Header 4</th> 
     </tr> 
    </thead> 
    <tbody> 
     @* Here we are looping through each item in the 
      Model (defined above) and putting each property 
      in a cell of the table *@ 
     @foreach(var row in Model) 
     { 
     <tr> 
      <td>@item.Property1</td> 
      <td>@item.Property2</td> 
      <td>@item.Property3</td> 
      <td>@item.Property4</td> 
     </tr> 
     } 
    </tbody> 
</table>