SORU
16 Aralık 2010, PERŞEMBE


Basamaklı-çıkışlar damla MVC 3 Razor view

Jilet gibi bir görünüm adresleri için basamaklı açılır liste nasıl ilgileniyorum. Site benim varlık Suburbİd bir özelliği vardır. Banliyösünde bir Cityİd ve Şehir Provinceİd vardır. İsterim açılır listesini görüntülemek için tüm Banliyösünde, Şehir, eyalet ve Site manzarası, örneğin burada banliyösünde açılan olacak başlangıçta ekran "İlk seçin bir Şehir" ve Şehri açılır, "İlk seçme ili". Bir il seçilmesi üzerine, il şehirler vb doldurulur.

Bunu nasıl başarabilir? Nereden başlayayım?

CEVAP
16 Aralık 2010, PERŞEMBE


Hadi bir örnek ile göstermek. Her zaman bir model ile başlamak gibi

public class MyViewModel
{
    public string SelectedProvinceId { get; set; }
    public string SelectedCityId { get; set; }
    public string SelectedSuburbId { get; set; }
    public IEnumerable<Province> Provinces { get; set; }
}

public class Province
{
    public string Id { get; set; }
    public string Name { get; set; }
}

Bir sonraki denetleyicisi:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            // TODO: Fetch those from your repository
            Provinces = Enumerable.Range(1, 10).Select(x => new Province
            {
                Id = (x   1).ToString(),
                Name = "Province "   x
            })
        };
        return View(model);
    }

    public ActionResult Suburbs(int cityId)
    {
        // TODO: Fetch the suburbs from your repository based on the cityId
        var suburbs = Enumerable.Range(1, 5).Select(x => new
        {
            Id = x,
            Name = "suburb "   x
        });
        return Json(suburbs, JsonRequestBehavior.AllowGet);
    }

    public ActionResult Cities(int provinceId)
    {
        // TODO: Fetch the cities from your repository based on the provinceId
        var cities = Enumerable.Range(1, 5).Select(x => new
        {
            Id = x,
            Name = "city "   x
        });
        return Json(cities, JsonRequestBehavior.AllowGet);
    }
}

Ve son olarak bir görünüm:

@model SomeNs.Models.MyViewModel

@{
    ViewBag.Title = "Home Page";
}

<script type="text/javascript" src="/scripts/jquery-1.4.4.js"></script>
<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)
                    );
                });
            });
        });

        $('#SelectedCityId').change(function () {
            var selectedCityId = $(this).val();
            $.getJSON('@Url.Action("Suburbs")', { cityId: selectedCityId }, function (suburbs) {
                var suburbsSelect = $('#SelectedSuburbId');
                suburbsSelect.empty();
                $.each(suburbs, function (index, suburb) {
                    suburbsSelect.append(
                        $('<option/>')
                            .attr('value', suburb.Id)
                            .text(suburb.Name)
                    );
                });
            });
        });
    });
</script>

<div>
    Province: 
    @Html.DropDownListFor(x => x.SelectedProvinceId, new SelectList(Model.Provinces, "Id", "Name"))
</div>
<div>
    City: 
    @Html.DropDownListFor(x => x.SelectedCityId, Enumerable.Empty<SelectListItem>())
</div>
<div>
    Suburb: 
    @Html.DropDownListFor(x => x.SelectedSuburbId, Enumerable.Empty<SelectListItem>())
</div>

Bir gelişme olarak javascript kodu bazı parçaları yinelenmemesi için bir jquery eklentisi yazarak kısaltılmış olabilir.


GÜNCELLEME:

Ve bir eklenti söz satır arasında bir şey var:

(function ($) {
    $.fn.cascade = function (options) {
        var defaults = { };
        var opts = $.extend(defaults, options);

        return this.each(function () {
            $(this).change(function () {
                var selectedValue = $(this).val();
                var params = { };
                params[opts.paramName] = selectedValue;
                $.getJSON(opts.url, params, function (items) {
                    opts.childSelect.empty();
                    $.each(items, function (index, item) {
                        opts.childSelect.append(
                            $('<option/>')
                                .attr('value', item.Id)
                                .text(item.Name)
                        );
                    });
                });
            });
        });
    };
})(jQuery);

Ve sonra sadece bu kadar Tel:

$(function () {
    $('#SelectedProvinceId').cascade({
        url: '@Url.Action("Cities")',
        paramName: 'provinceId',
        childSelect: $('#SelectedCityId')
    });

    $('#SelectedCityId').cascade({
        url: '@Url.Action("Suburbs")',
        paramName: 'cityId',
        childSelect: $('#SelectedSuburbId')
    });
});

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • esnathesinger

    esnathesinge

    6 NİSAN 2009
  • olinerd

    olinerd

    23 AĞUSTOS 2007
  • Video-Tutorials.Net

    Video-Tutori

    15 Mart 2011