Chào mừng đến với Diễn đàn lập trình - Cộng đồng lập trình.
Kết quả 1 đến 5 của 5
  1. #1
    Ngày tham gia
    Sep 2015
    Bài viết
    0

    Load dữ liệu lên combox sau khj đã chọn trong combobox khác - mvc3

    Mình đang cặp một vấn đề nho nhỏ nhưng mà khó giải quyết ae nào bjt chỉ dùm với nhé
    trong mvc3 mình có 1 dropdownlist loại chuyên mục VD News, Clip, photo ...
    Với mỗi dạng News hay clip mình lại load các chuyên mục thuộc dạng đó lên(nhằm mục đích tránh tạo loại chuyên mục clip lại có cha là news) dropdownlist
    mình dùng jquery để postback về sever mà vẫn không được
    các pro nào làm rùi chỉ mình với nhé (có demo càng tốt hehe)

  2. #2
    Cái này là cascading dropdownlist mình thấy cũng khá phổ biến. Bạn google thử phát là ra à.
    Ý tưởng:
    - Get List (ví dụ List News, Clip...) rồi trả về Json
    - Qua Jquery hứng cái list này để bind theo ID.
    Code tham khảo:

    - Model
    Mã:
    namespace CascadingDropdownlist.Models
    {
        public class MyViewModel
        {
            public string SelectedProvinceId { get; set; }
            public string SelectedCityId { get; set; }
            public List<Province> Provinces { get; set; }
            public List<City> Cities { get; set; }
        }
    
        public class Province
        {
            public string Id { get; set; }
            public string Name { get; set; }
        }
    
        public class City
        {
            public string Id { get; set; }
            public string Name { get; set; }
            public string ProvinceId { get; set; }
        }
    }
    - Controller:

    Mã:
    namespace CascadingDropdownlist.Controllers
    {
        public class HomeController : Controller
        {
            //
            // GET: /Home/
    
            public ActionResult Index()
            {
                var model = new MyViewModel
                {
                    Provinces = new List<Province> {
                        new Province{Id="0", Name="Choose..."},
                        new Province{Id="1", Name="Quang Ninh"},
                        new Province{Id="2", Name="Tien Giang"}
                    }
                };
                return View(model);
            }
    
            public ActionResult Cities(int provinceId)
            {            
                var model = new MyViewModel
                {
                    Cities = new List<City> { 
                        new City{Id="0", Name="Choose...", ProvinceId="1"},
                        new City{Id="1", Name="Hạ Long", ProvinceId="1"},
                        new City{Id="2", Name="Uông Bí", ProvinceId="1"},
                        new City{Id="3", Name="Cẩm Phả", ProvinceId="1"},
                        new City{Id="4", Name="Móng Cái", ProvinceId="1"},
                        new City{Id="0", Name="Choose...", ProvinceId="2"},
                        new City{Id="5", Name="Mỹ Tho", ProvinceId="2"},
                        new City{Id="6", Name="Gò Công", ProvinceId="2"}
                    }
                };
    
                var cities = model.Cities.Where(c => c.ProvinceId == provinceId.ToString());
    
                return Json(cities, JsonRequestBehavior.AllowGet);
            }
        }
    }
    - View:
    Mã:
    @model CascadingDropdownlist.Models.MyViewModel
    <script type="text/javascript">
        $(function () {
            $('#SelectedProvinceId').change(function () {
                var selectedProvinceId = $(this).val();
                $.getJSON('@Url.Action("Cities")', { provinceId: selectedProvinceId }, function (cities) {
                    var citiesSelect = $('#SelectedCityId');
                    citiesSelect.empty();
                    $.each(cities, function (index, city) {
                        citiesSelect.append(
                            $('<option/>')
                                .attr('value', city.Id)
                                .text(city.Name)
                        );
                    });
                });
            });
        });
    </script>
    
    Index
    
    <div>
        Province:
        @Html.DropDownListFor(d=>d.SelectedProvinceId, new SelectList(Model.Provinces, "Id", "Name"))
    </div>
    
    <div>
        City:
        @Html.DropDownListFor(d=>d.SelectedCityId, Enumerable.Empty<SelectListItem>())
    </div>

  3. #3
    Ngày tham gia
    Sep 2015
    Bài viết
    0
    ok cảm ơn bạn vanthuong420 mình ko search đc cái này vì ko biết gọi nó ntn. bjo mới bjt là cascading. Demo của bạn rất rõ ràng

  4. #4

    @model CascadingDropdownlist.Models.MyViewModel
    <script type="text/javascript">
    $(function () {
    $('#SelectedProvinceId').change(function () {
    var selectedProvinceId = $(this).val();
    $.getJSON('@Url.Action("Cities")', { provinceId: selectedProvinceId }, function (cities) {
    var citiesSelect = $('#SelectedCityId');
    citiesSelect.empty();
    $.each(cities, function (index, city) {
    citiesSelect.append(
    $('<option/>')
    .attr('value', city.Id)
    .text(city.Name)
    );
    });
    });
    });
    });
    </script>

    Index

    <div>
    Province:
    @Html.DropDownListFor(d=>d.SelectedProvinceId, new SelectList(Model.Provinces, "Id", "Name"))
    </div>

    <div>
    City:
    @Html.DropDownListFor(d=>d.SelectedCityId, Enumerable.Empty<SelectListItem>())
    </div>
    bạn ơi chỗ

    $.each(cities, function (index, city) {
    citiesSelect.append(
    $('<option/>')
    .attr('value', city.Id)
    .text(city.Name)
    );
    thì cái city mình tự đặt hay lấy ở đâu thế /

    p/s: mình làm bằng csdl.

  5. #5
    Ngày tham gia
    Sep 2015
    Bài viết
    0
    city là đặt tên thế nào thì nó zư thế thui mà [IMG]images/smilies/biggrin.png[/IMG]. và nó đây này:

    public class City
    {
    public string Id { get; set; }
    public string Name { get; set; }
    public string ProvinceId { get; set; }
    }

 

 

Quyền viết bài

  • Bạn Không thể gửi Chủ đề mới
  • Bạn Không thể Gửi trả lời
  • Bạn Không thể Gửi file đính kèm
  • Bạn Không thể Sửa bài viết của mình
  •