jquery sortable function not working in view (mvc)

Question

Я использую jQuery UI sortable, чтобы сделать сетку таблицы сортируемой. однако мои элементы по-прежнему не изменяются и ошибки не отображаются. Я никогда не использовал этот метод в asp.net mvc.

было бы приятно получить руководство от вас.

<script type="text/javascript"> 

$('td, th', '#MenuItem').each(function() { 
    var cell = $(this); 
    cell.width(cell.width()); 
}); 

$('#MenuItem tbody').sortable().disableSelection(); 

<table id = "MenuItem" class="promo full-width alternate-rows" style="text-align: center;"> 
      <tr> 
       <th>Prode Code 
       </th> 
       <th>ProdeTemplate 
       </th> 
       <th>Description <!-- JACK EDIT --> 
       </th> 
       <th>Action</th> 
      </tr> 
      <tbody> 
      @foreach (var item in Model.IndexListitem) 
      { 


       <tr> 
        <td class="center-text"> 
         @Html.DisplayFor(modelItem => item.ProductCode) 
        </td> 
        <td> 
         @Html.DisplayFor(modelItem => item.ProdeTemplate.Description) 
        </td> 
        <td> 
         @Html.DisplayFor(modelItem => item.Description) 
        </td> 

        <td class="center-text nowrap"> 
         @Html.ActionLink(" ", "Edit", new { id = item.ProdeID }, new { title = "Edit", @class = "anchor-icon-no-text edit" }) 
         @Html.ActionLink(" ", "Details", new { id = item.ProdeID }, new { title = "Details", @class = "anchor-icon-no-text details" }) 
         @Html.ActionLink(" ", "Delete", new { id = item.ProdeID }, new { title = "Delete", @class = "anchor-icon-no-text delete" }) 
        </td> 
       </tr> 

      } 

       </tbody> 

     </table> 

Answer 1

Я не очень знаком с @Html and @foreach аннотациями. Однако, я думаю, эти аннотации обрабатываются на стороне сервера. По сути, вы пытаетесь выбрать некоторые html-элементы jquery, которые еще не сгенерированы.

Одно решение поместить весь блок следующего кода в блоке document.ready

// A $(document).ready() block. 
$(document).ready(function() { 
$('td, th', '#MenuItem').each(function() { 
var cell = $(this); 
cell.width(cell.width()); 
}); 

$('#MenuItem tbody').sortable().disableSelection(); 

});