آموزش ساخت لیست مرتب شونده با Asp.Net MVC و JQuery
آموزش ساخت لیست مرتب شونده با MVC

آموزش ساخت لیست مرتب شونده با Asp.Net MVC و JQuery

در این پروژه قصد داریم یک لیست مرتب شونده با قبلیت ذخیره تغییرات  با استفاده از پلاگین JQuery که قابلیت کشیدن و رها کردن (Drag & Drop) گزینهای لیست وجود دارد را پیاده سازی کنیم. این پروژه توسط مهندس حب اللهی و اختصاصی سایت برنامه نویسان نوین پندار می باشد.

برای مشاهده لینک وارد شود

برای این کار ما باید نخست یک لیست درختی را پیاده سازی کنیم. ابتدا برای پیدا سازی یک لیست مدل زیر را داریم:

public class CategoryModel { 
  public CategoryModel() { 
    this.Children=new HashSet<CategoryModel>(); 
  } 
  public int Id { get; set; } 
  public string Name { get; set; }
  public virtual ICollection<CategoryModel> Children { get; set; } 
}

این لیست یک لیست تو در تو یا درختی خواهد بود. Children برای ایجاد ارتباط چند به چند استفاده می شود. یک کلاس static برای ذخیره داده ها ایجاد می کنیم:

public static class DataRepository { 
  public static IList<CategoryModel> Categories { get; set; } 
}

سپس در کلاس Context مقداردهی های اولیه را انجام می دهیم:

public DbContext() { 
  DataRepository.Categories=new List<CategoryModel> { 
    new CategoryModel { 
      Id = 1, 
      Name = "Root", 
      Children = new Collection<CategoryModel> { 
        new CategoryModel { 
          Id = 2, 
          Name = "Games", 
          Children = new Collection<CategoryModel> { 
            new CategoryModel { 
            Id = 3, Name = "PSP", 
            Children = Enumerable.Empty<CategoryModel>().ToSafeReadOnlyCollection(), 
          },
          new CategoryModel { 
            Id = 4, 
            Name = "PC", 
            Children = Enumerable.Empty<CategoryModel>().ToSafeReadOnlyCollection(), 
          }, 
          new CategoryModel { 
            Id = 5, 
            Name = "PS3", 
            Children = Enumerable.Empty<CategoryModel>().ToSafeReadOnlyCollection(), 
          }, 
        } 
      }, 
        new CategoryModel { 
          Id = 6, 
          Name = "Application", 
          Children = new Collection<CategoryModel> { 
            new CategoryModel { 
              Id = 7, 
              Name = "Windows", 
              Children = Enumerable.Empty<CategoryModel>().ToSafeReadOnlyCollection(), 
            }, 
            new CategoryModel { 
              Id = 8, 
              Name = "Android", 
              Children = Enumerable.Empty<CategoryModel>().ToSafeReadOnlyCollection(), 
            } 
          } 
        } 
      } 
    } 
  }; 
}

برای نمایش یک لیست درختی نیاز باید از توابع پیمایش درختی استفاده کنیم. ما برای این منظور از توابع قابل رند MVC استفاده میکنیم. یک Layout در پوشه App_Code با نام Func.cshtml ایجاد می کنیم. از توابع زیر برای نمایش لیست درختی استفاده می کنیم.

@using SortableList.Models 
@helper RenderCategories(ICollection<CategoryModel> categories) 
{ 
  if (categories != null) { 
    var root = categories.FirstOrDefault(c => c.Id == 1); 
    <div class="cf nestable-lists"> 
      <div class="dd" id="nestable"> 
        @if (root != null){ 
          <ol class="dd-list"> @RenderCategoryChildren(root.Children) </ol> 
        } 
      </div> 
    </div> 
  } 
}

این تابع برای ایجاد لیست ( RenderCategories ) استفاده خواهد شد و از تابع زیر برای ایجاد زیرلیست ها ( SubList ) استفاده خواهد شد.

@helper RenderCategoryChildren(ICollection<CategoryModel> categories) { 
  if (categories != null) { 
    foreach (var category in categories) { 
      if (category != null) { 
        <li class="dd-item dd3-item" data-id="@category.Id" data-name="@category.Name">
          <span class="dd-icon glyphicon glyphicon-chevron-down"></span>
          <div class="dd-handle dd3-handle">Drag</div> <div class="dd3-content">@category.Name</div>
          <div class="dd-dev"></div>
          @if (category.Children.Any()) { 
            <ol class="dd-list"> 
              @RenderCategoryChildren(category.Children) 
            </ol> 
          } 
        </li> 
      } 
    } 
  } 
}

اکنون یک کنترلر ایجاد و View آن را نیز به پروژه اضافه کنید. تغییرات زیر را کنترلر خود اعمال کنید:

public ActionResult Index() { 
  var db = new DbContext();
  return View(); 
}

سپس کد زیر را به View خود اضافه کنید:

@Func.RenderCategories(DataRepository.Categories)

بعد از اجرا نتیجه زیر حاصل خواهد شد:

آموزش ساخت لیست مرتب شونده
آموزش ساخت لیست مرتب شونده

برای اینکه قابلیت مرتب سازی را به لیست خود اضافه کنیم می توانیم از افزونه های متعدد JQuery استفاده کنیم ولی ما در این پروژه از افزونه Jquert Nestable (لینک) استفاده کنیم چون علاوه برای ایجاد امکان مرتب سازی لیست امکان ذخیره آن را نیز دارد. پروژه را از این لینک دانلود و به پروژه ی خود اضافه کنید. فایل jquery.nestable.js را به پوشه Scripts افزوده و آن را به View خود اضافه کنید. سپس استایل nestable.css در پوشه Content را به پروژه ی خود اضافه کنید. View شما باید شامل کدهای زیر باشد:

@Styles.Render(Url.Content("~/Content/nestable.css"))
@{ 
  var db = new DbContext(); 
}
@Func.RenderCategories(DataRepository.Categories)
@Scripts.Render(Url.Content("~/Scripts/jquery-1.9.1.min.js")) 
@Scripts.Render(Url.Content("~/Scripts/jquery.nestable.js"))

و برای اعمال افزونه بر روی لیست شما، اسکریپت زیر را به پروژه ی خوی اضافه کنید:

<script> 
  $(function () { 
    $('#nestable').nestable({ group: 1, collapseBtnHTML: "" }).on('change'); 
  }) 
</script>

نتیجه کد شما بعد از تغییرات به شکل زیر خواهد بود:

آموزش ساخت لیست مرتب شونده 2
آموزش ساخت لیست مرتب شونده ۲

اکنون می بینید که امکان جایجایی آیتم های لیست وجود دارد.
تا اینجا ما توانسته ایم یک لیست با قابلیت مرتب سازی ایجاد کنیم. از این به بعد امکان ایجاد تغییرات در لیست و ذخیره آن را انجام خواهیم داد. حال با ایجاد تغییر آیتم ها و تازه کردن صفحه ( Refresh ) لیست به صورت اول بر می گردد. برای ذخیره تغییرات در لیست، تغییرات زیر را در View خود اعمال کنید:

@using (Html.BeginForm()) { 
  <input type="hidden" id="nestable-output" name="sendjson" /> 
  <a href="#" class="btn btn-primary" id="Save">Save</a> 
}
@Func.RenderCategories(DataRepository.Categories)

یک Input برای ذخیره تغییرات و ارسال به سرور به کد اضافه شد. حال تغییرات زیر را در اسکریپت خو اعمال کنید:

$(function () { 
  $('#nestable').nestable({ group: 1, collapseBtnHTML: "" }).on('change');
  
  var updateOutput = function (e) {
    var list = e.length ? e : $(e.target), output = list.data('output');
    
    if (window.JSON) { 
      output.val(window.JSON.stringify(list.nestable('serialize'), ["id", "name", "url", "descript", "children"]), '\t'); 
    } else { 
      output.val('JSON browser support required for this demo.'); 
    } 
  };
  $('#Save').click(function () { 
    updateOutput($('#nestable').data('output', $('#nestable-output'))); 
    $('form').submit(); 
    return; 
  }); 
})

این کد data های موجود در لیست را به شکل JSON در می آورد و آنها را به سمت سرور ارسال می کند. نمونه ای این داده را در زیر می بینید:

[{"id":2,"name":"Games","children":[{"id":4,"name":"PC"},{"id":5,"name":"PS3"},{"id":3,"name":"PSP"}]},{"id":6,"name":"Application","children":[{"id":7,"name":"Windows"},{"id":8,"name":"Android"}]}]

با کلیک بر روی Save عمل تبدیل لیست به JSON انجام و فرم تایید می شود و این دادها ( JSON ) به سرور ارسال می شود. اکنون باید این کد را در سمت سرور دریافت و تغییرات را اعمال کنیم.

برای دریافت داده ها، این اکشن را به کنترلر خود اضافه کنید:

[HttpPost] 
public ActionResult Index(string sendjson) { 
  return View(DataRepository.Categories); 
}

داده ها به صورت رشته به سرور ارسال می شود ولی ما برای ایجاد تغییرات باید آن را به کلاس تبدیل کنیم. برای این کار از امکانی که خود مایکروسافت فراهم کرده استفاده می کنیم. این کار توسط کلاس JavaScriptSerializer برای ما فراهم شده است. تغییرات زیر را اکشن بالا انجام دهید:

[HttpPost] 
public ActionResult Index(string sendjson) {
  var items = new JavaScriptSerializer().Deserialize<List<CategoryModel>>(sendjson);
  DataRepository.Categories=new List<CategoryModel>();
  DataRepository.Categories.Add(new CategoryModel() { 
    Id = 1, 
    Name = "Root", 
    Children = items, 
  });
  return View(DataRepository.Categories); 
}

داده ی دریافت شده توسط تابع Deserialize به کلاس مدل ما یعنی CategoryModel می شود این داده شامل لیستی از این مدل و حاوی تغییرات نیز هست. لیست مخرن اولیه ما پاک و داده های دریافت شده در آن قرار داده شده است.
لطفا نظرات و پیشنهادات خود را در مورد پروژه و آموزش ها  ارسال و ما را برای ارائه بهتر آموزش ها یاری نمایید.
با تشکر
پایان

+5
-1


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

۹ دیدگاه ها

  1. خیلی وقت بود همچین چیزی تو ذهنم بود … بسیار از شما متشکرم.

  2. ممنون از سایت و آموزش مفیدتون
    تشکر

  3. بسیار متشکر از آموزش مفیدتون

  4. با سلام ایا امکانش هست که بدون داشتن root هم این روش رو پیاده سازی کرد؟

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


هفت × 4 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>