پیشتر مطلبی را در مورد
ایجاد Drop Down Listهای به هم پیوسته توسط jQuery Ajax در این سایت مطالعه کرده بودید. شبیه به همان مطلب را اینبار قصد داریم توسط Kendo UI پیاده سازی کنیم.
مدل‌های برنامه
در اینجا قصد داریم لیست گروه‌ها را به همراه محصولات مرتبط با آنها، توسط دو drop down list نمایش دهیم:
public class Category
{
public int CategoryId { set; get; }
public string CategoryName { set; get; }
[JsonIgnore]
public IList<Product> Products { set; get; }
}
public class Product
{
public int ProductId { set; get; }
public string ProductName { set; get; }
}
از ویژگی
JsonIgnore جهت عدم درج لیست محصولات، در خروجی JSON نهایی تولیدی گروه‌ها، استفاده شده‌است.
منبع داده JSON سمت سرور
پس از مشخص شدن مدل‌های برنامه، اکنون توسط دو اکشن متد، لیست گروه‌ها و همچنین لیست محصولات یک گروه خاص را با فرمت JSON بازگشت می‌دهیم:
using System.Linq;
using System.Text;
using System.Web.Mvc;
using KendoUI12.Models;
using Newtonsoft.Json;
namespace KendoUI12.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View(); // shows the page.
}
[HttpGet]
public ActionResult GetCategories()
{
return new ContentResult
{
Content = JsonConvert.SerializeObject(CategoriesDataSource.Items),
ContentType = "application/json",
ContentEncoding = Encoding.UTF8
};
}
[HttpGet]
public ActionResult GetProducts(int categoryId)
{
var products = CategoriesDataSource.Items
.Where(category => category.CategoryId == categoryId)
.SelectMany(category => category.Products)
.ToList();
return new ContentResult
{
Content = JsonConvert.SerializeObject(products),
ContentType = "application/json",
ContentEncoding = Encoding.UTF8
};
}
}
}
بار اولی که صفحه بارگذاری میشود، توسط یک درخواست Ajax ایی، لیست گروه‌ها دریافت خواهد شد. سپس با انتخاب یک گروه، اکشن متد GetProducts جهت بازگرداندن لیست محصولات آن گروه، فراخوانی می‌گردد.
در اینجا به عمد از JsonConvert.SerializeObject استفاده شده‌است تا ویژگی JsonIgnore کلاس گروه‌ها، توسط کتابخانه‌ی JSON.NET مورد استفاده قرار گیرد (ASP.NET MVC برخلاف ASP.NET Web API به صورت پیش فرض از JSON.NET
استفاده نمی‌کند).
کدهای سمت کاربر برنامه
کدهای جاوا اسکریپتی Kendo UI را جهت تعریف دو drop down list به هم مرتبط و آبشاری، در ادامه ملاحظه می‌کنید:
<!--نحوه‌ی راست به چپ سازی -->
<div class="k-rtl k-header demo-section">
<label for="categories">گروه‌ها: </label><input id="categories" style="width: 270px" />
<label for="products">محصولات: </label><input id="products" disabled="disabled" style="width: 270px" />
</div>
@section JavaScript
{
<script type="text/javascript">
$(function () {
$("#categories").kendoDropDownList({
optionLabel: "انتخاب گروه...",
dataTextField: "CategoryName",
dataValueField: "CategoryId",
dataSource: {
transport: {
read: {
url: "@Url.Action("GetCategories", "Home")",
dataType: "json",
contentType: 'application/json; charset=utf-8',
type: 'GET'
}
}
}
});
$("#products").kendoDropDownList({
autoBind: false, // won’t try and read from the DataSource when it first loads
cascadeFrom: "categories", // the id of the DropDown you want to cascade from
optionLabel: "انتخاب محصول...",
dataTextField: "ProductName",
dataValueField: "ProductId",
dataSource: {
// When the serverFiltering is disabled, then the combobox will not make any additional requests to the server.
serverFiltering: true, // the DataSource will send filter values to the server
transport: {
read: {
url: "@Url.Action("GetProducts", "Home")",
dataType: "json",
contentType: 'application/json; charset=utf-8',
type: 'GET',
data: function () {
return { categoryId: $("#categories").val() };
}
}
}
}
});
});
</script>
<style scoped>
.demo-section {
width: 100%;
height: 100px;
}
</style>
}
دراپ داون اول، به صورت متداولی تعریف شده‌است. ابتدا فیلدهای Text و Value هر ردیف آن مشخص و سپس منبع داده آن به اکشن متد GetCategories تنظیم گردیده‌است. به این ترتیب با اولین بار مشاهده‌ی صفحه، این دراپ داون پر خواهد شد.
سپس دراپ دوم که وابسته‌است به دراپ داون اول، با این نکات طراحی شده‌است:
الف) خاصیت autoBind آن به false تنظیم شده‌است. به این ترتیب این دراپ داون در اولین بار نمایش صفحه، به سرور جهت دریافت اطلاعات مراجعه نخواهد کرد.
ب) خاصیت cascadeFrom آن به id دراپ داون اول تنظیم شده‌است.
ج) در منبع داده‌ی آن دو تغییر مهم وجود دارند:
- خاصیت serverFiltering به true تنظیم شده‌است. این مورد سبب خواهد شد تا آیتم گروه انتخاب شده، به سرور ارسال شود.
- خاصیت data نیز تنظیم شده‌است. این مورد پارامتر categoryId اکشن متد GetProducts را تامین میکند و مقدار آن از مقدار انتخاب شده‌ی دراپ داون اول دریافت می‌گردد.
اگر برنامه را اجرا کنیم، برای بار اول لیست گروه‌ها دریافت خواهند شد:
سپس با انتخاب یک گروه، لیست محصولات مرتبط با آن در دراپ داون دوم ظاهر می‌گردند:
کدهای کامل این مثال را از اینجا می‌توانید دریافت کنید.
