使用jquery在ASP.NET MVC中使列表可排序 [英] Making a list sortable in ASP.NET MVC using jquery

问题描述

我试图弄清楚如何实现可排序的jquery.

I'm trying to figure out how to implement jquery sortable..

我有一个页面，其中包含按类别分组的一堆属性，例如:

I have a page with a bunch of attributes grouped by category, like this:

• 类别A
  • Attribute1
  • Attribute2
  • Attribute3
  • Attribute4
  • Attribute5
  • Attribute6
  • Attribute7
  • Attribute8
  • Attribute9
  • Attribute10
  • Attribute11
  • Attribute12

  最终的解决方案是能够对所有内容进行排序；使用拖放" ...对父类(类别)进行排序，对属性(子项)进行排序，并在类别之间移动属性.但是我想这正在扩展它..

  The ultimate solution would be to be able to sort everything; sort parents (categories), sort attributes (children) and move attributes between categories with Drag-And-Drop!.... But I'm guessing that is stretching it right now..

  因此，只需能够使用拖放"对每个类别下的属性进行排序，将是一个不错的开始.我一直在寻找似乎可以做到这一点的jquery sortable，但是我如何实现它呢?我猜我每个类别都需要一个脚本...

  So, just being able to sort the attributes under each category with Drag-And-Drop would be a nice start.. I've been looking at jquery sortable which seems to do this, but how do I implement it? I'm guessing I need one script for each category...

  类似这样的内容: http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/

  ASP.NET 4，EF 4，ASP.NET MVC 3，Razor视图...

  ASP.NET 4, EF 4, ASP.NET MVC 3, Razor views...

  这就是我要工作的:

  @using (Html.BeginForm())
  {
      @Html.ValidationSummary(true)
      <fieldset>
          <legend>ArrangeAttributesViewModel</legend>
          @foreach (var _category in Model.AllAttributesForCheckBoxList.AttributeList)
          {
              <p>
              </p>
              <p>
              </p>
              <div id="@_category.CategoryName">
                  @_category.CategoryName
                  <ul>
                      @foreach (var item in _category.AttributesList)
                      {
                          <li id="@item.Priority.ToString()">
                              @Html.CheckBox(item.AttributeID.ToString(), item.Chosen)
                              @(" " + item.AttributeTitle)
                          </li>
                      }
                  </ul>
              </div>
          }
          <p>
              @Html.ActionLink("Create New", "Create")
          </p>
          <p>
          </p>
          <p>
              <input type="submit" value="Save Changes" />
          </p>
      </fieldset>
  }
  

  有什么想法吗?任何帮助深表感谢！

  Any ideas? Any help is much appreciated!

  推荐答案

  您无需遍历它们，但是对 ul 元素使用一个类将有助于区分它们.使用 containment 父级将其移动限制在父级元素上可能会使意图更清晰，但除非指定 connectWith 选项，否则它们应位于各自的列表中.在 http://jsfiddle.net/R4afy/

  You don't need to iterate over them, but using a class for the ul elements would help to distinguish them. Using containment parent to constrain their movement to the parent element might make the intent clearer, but unless you specify the connectWith option they should stay within their respective lists. See a simple example at http://jsfiddle.net/R4afy/

      <div id="@_category.CategoryName">
          @_category.CategoryName
          <ul class="sortable-container">
              @foreach (var item in _category.AttributesList)
              {
                  <li id="@("P" + item.Priority.ToString())">
                      @Html.CheckBox(item.AttributeID.ToString(), item.Chosen)
                      @(" " + item.AttributeTitle)
                  </li>
              }
          </ul>
      </div>
  
  <script type="text/javascript">
       $(function() {
            $('.sortable-container').sortable({
                containment: 'parent'
            });
       });
  </script>
  

  注意:这不能解决保留选择的排序顺序的问题.为此，您需要超出所述问题范围的其他代码.除非排序功能只是为了帮助用户识别此页面上的元素，否则我认为您会发现记录订单非常重要.

  Note: This doesn't address persisting the sort order chosen. To do that you'd need additional code outside the scope of your stated problem. Unless the ability to sort is simply to help the user identify elements on this page, I think you'll find recording the order is pretty important.

  这篇关于使用jquery在ASP.NET MVC中使列表可排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！