Aracılığıyla paylaş

ASP.NET MVC ile DropDownList Yardımcısını Kullanma

  • Makale

tarafından Rick Anderson

Bu öğreticide, ASP.NET MVC Web uygulamasında DropDownList yardımcısı ve ListBox yardımcısıyla çalışmanın temelleri öğretilecektir. Öğreticiyi izlemek için Microsoft Visual Studio'nun ücretsiz bir sürümü olan Microsoft Visual Web Developer 2010 Express Service Pack 1'i kullanabilirsiniz. Başlamadan önce, aşağıda listelenen önkoşulları yüklediğinizden emin olun. Aşağıdaki bağlantıya tıklayarak bunların tümünü yükleyebilirsiniz: Web Platformu Yükleyicisi. Alternatif olarak, aşağıdaki bağlantıları kullanarak önkoşulları tek tek yükleyebilirsiniz:

Visual Web Developer 2010 yerine Visual Studio 2010 kullanıyorsanız, aşağıdaki bağlantıya tıklayarak önkoşulları yükleyin: Visual Studio 2010 önkoşulları. Bu öğreticide ASP.NET MVC'ye Giriş öğreticisini veya MVC Müzik Mağazası'nı ASP.NET öğreticisinitamamladığınız veya ASP.NET MVC geliştirme hakkında bilgi sahibi olduğunuz varsayılır. Bu öğretici, ASP.NET MVC Müzik Mağazası öğreticisinden değiştirilmiş bir projeyle başlar.

Tamamlanmış öğretici C# kaynak kodunu içeren bir Visual Web Developer projesi bu konuya eşlik edebilir. İndir.

Oluşturacakların

Kategori seçmek için DropDownList yardımcısını kullanan eylem yöntemleri ve görünümler oluşturacaksınız. Ayrıca jQuery kullanarak yeni bir kategori (tarz veya sanatçı gibi) gerektiğinde kullanılabilecek bir kategori ekleme iletişim kutusu da ekleyebilirsiniz. Yeni bir tür ekleme ve yeni sanatçı ekleme bağlantılarını gösteren Oluştur görünümünün ekran görüntüsü aşağıdadır.

Açılan liste yardımcısı kullanan resim

Öğreneceğiniz Beceriler

Şunları öğreneceksiniz:

  • Kategori verilerini seçmek için DropDownList yardımcısını kullanma.
  • Yeni kategoriler eklemek için jQuery iletişim kutusu ekleme.

Kullanmaya Başlama

Başlangıç projesini aşağıdaki İndir bağlantısıyla indirerek başlayın. Windows Gezgini'nde DDL_Starter.zip dosyasına sağ tıklayın ve özellikleri seçin. DDL_Starter.zip Özellikleri iletişim kutusunda Engeli Kaldır'ı seçin.

Özellikler iletişim kutusunun görüntüsü engellemeyi kaldır'ı seçin

DDL_Starter.zip dosyasına sağ tıklayın ve dosyanın sıkıştırmasını açmak için Tümünü Ayıkla'yı seçin. StartMusicStore.sln dosyasını Visual Web Developer 2010 Express ("Visual Web Developer" veya "VWD" kısaca) veya Visual Studio 2010 ile açın.

Uygulamayı çalıştırmak için CTRL+F5 tuşlarına basın ve Test bağlantısına tıklayın.

Uygulama testi bağlantısının görüntüsü

Film Kategorisi Seç (Basit) bağlantısını seçin. Film Türü Seçme listesi görüntülenir ve Comedy seçili değerle birlikte görüntülenir.

Film türü seçme listesinin resmi

Tarayıcıya sağ tıklayın ve kaynağı görüntüle'yi seçin. Sayfanın HTML'i görüntülenir. Aşağıdaki kod select öğesinin HTML'sini gösterir.

<form action="/Home/CategoryChosen" method="get">

<fieldset>Movie Type <select id="MovieType" name="MovieType">

<option value=""></option>

<option value="0">Action</option>

<option value="1">Drama</option>

<option selected="selected" value="2">Comedy</option>

<option value="3">Science Fiction</option>

</select>

<p><input type="submit" value="Submit" /> </p>

</fieldset>

</form>

Seçim listesindeki her öğenin bir değeri (Eylem için 0, Drama için 1, Komedi için 2 ve Bilim Kurgu için 3) ve bir görünen adı (Eylem, Drama, Komedi ve Bilim Kurgu) olduğunu görebilirsiniz. Yukarıdaki kod, seçme listesi için standart HTML'dir.

Seçme listesini Drama olarak değiştirin ve Gönder düğmesine basın. Tarayıcıdaki URL'dir http://localhost:2468/Home/CategoryChosen?MovieType=1 ve sayfada Seçtiğiniz: 1 görüntülenir.

Tarayıcıda U R L görüntüsü

Controllers\HomeController.cs dosyasını açın ve yöntemini inceleyinSelectCategory.

public ActionResult SelectCategory() {

     List<SelectListItem> items = new List<SelectListItem>();

     items.Add(new SelectListItem { Text = "Action", Value = "0"});

     items.Add(new SelectListItem { Text = "Drama", Value = "1" });

     items.Add(new SelectListItem { Text = "Comedy", Value = "2", Selected = true });

     items.Add(new SelectListItem { Text = "Science Fiction", Value = "3" });

     ViewBag.MovieType = items;

     return View();

 }

HTML seçme listesi oluşturmak için kullanılan DropDownList yardımcısı, açıkça veya örtük olarak IEnumerable<SelectListItem >gerektirir. Diğer bir deyişle, IEnumerable SelectListItem'i dropDownList yardımcısına açıkça geçirebilir veya model özelliğiyle SelectListItem için aynı adı kullanarak IEnumerable<SelectListItem >öğesini ViewBag'e ekleyebilirsiniz.>< SelectListItem'i örtük ve açıkça geçirme, öğreticinin sonraki bölümünde ele alınmıştır. Yukarıdaki kod, IEnumerable<SelectListItem >oluşturmanın ve bunu metin ve değerlerle doldurmanın mümkün olan en basit yolunu gösterir. SelectListItem öğesinin ComedySelected özelliğinin true olarak ayarlandığını unutmayın; bu, işlenen seçme listesinin listede seçili öğe olarak Komedi'yi göstermesine neden olur.

Yukarıda oluşturulan IEnumerable<SelectListItem>, ViewBag'e MovieType adıyla eklenir. Aşağıda gösterilen DropDownList yardımcısına IEnumerable<SelectListItem'ı >örtük olarak geçirme yöntemimiz budur.

Views\Home\SelectCategory.cshtml dosyasını açın ve işaretlemeyi inceleyin.

@{

    ViewBag.Title = "Category Select";

    Layout = "~/Views/Shared/_Simple_Layout.cshtml";

}

@using (Html.BeginForm("CategoryChosen", "Home", FormMethod.Get)) {

    <fieldset>

            Movie Type

            @Html.DropDownList("MovieType")

        <p>

            <input type="submit" value="Submit" />

        </p>

    </fieldset>

}

Üçüncü satırda düzeni, standart düzen dosyasının basitleştirilmiş bir sürümü olan Views/Shared/_Simple_Layout.cshtml olarak ayarlıyoruz. Bunu, görüntülenen ve işlenen HTML'yi basit tutmak için yaparız.

Bu örnekte uygulamanın durumunu değiştirdiğimiz için verileri HTTP POST değil HTTP GET kullanarak göndereceğiz. HTTP GET veya POST Seçme için W3C bölümü Hızlı Denetim Listesi'ne bakın. Uygulamayı değiştirmediğimiz ve formu göndermediğimiz için eylem yöntemini, denetleyiciyi ve form yöntemini (HTTP POST veya HTTP GET) belirtmemizi sağlayan Html.BeginForm aşırı yüklemesini kullanırız. Görünümler genellikle parametre içermeyen Html.BeginForm aşırı yüklemesini içerir. Parametre sürümü yok, form verilerini aynı eylem yönteminin ve denetleyicisinin POST sürümüne göndermek için varsayılan olarak kullanılır.

Aşağıdaki satır

@Html.DropDownList("MovieType")

DropDownList yardımcısına bir dize bağımsız değişkeni geçirir. Örneğimizdeki "MovieType" dizesi iki şey yapar:

  • DropDownList yardımcısının ViewBag'te IEnumerable<SelectListItem'i > bulması için gereken anahtarı sağlar.
  • MovieType form öğesine bağlı verilerdir. Gönderme yöntemi HTTP GET ise, MovieType bir sorgu dizesi olacaktır. Gönderme yöntemi HTTP POST ise, MovieType ileti gövdesine eklenir. Aşağıdaki görüntüde 1 değerine sahip sorgu dizesi gösterilmektedir.

Değeri 1 olan sorgu dizesinin görüntüsü

Aşağıdaki kod, formun CategoryChosen gönderildiği yöntemi gösterir.

public ViewResult CategoryChosen(string MovieType) {

    ViewBag.messageString = MovieType;

    return View("Information");

}

Test sayfasına dönün ve HTML SelectList bağlantısını seçin. HTML sayfası, basit ASP.NET MVC test sayfasına benzer bir seçme öğesi işler. Tarayıcı penceresine sağ tıklayın ve kaynağı görüntüle'yi seçin. Seçme listesinin HTML işaretlemesi temelde aynıdır. HTML sayfasını test edin; ASP.NET MVC eylem yöntemi gibi çalışır ve daha önce test ettiğimiz görünümü görüntüler.

Sabit Listeleri ile Film Seçme Listesini Geliştirme

Uygulamanızdaki kategoriler sabitse ve değişmezse, kodunuzun daha sağlam ve daha kolay genişletilmelerini sağlamak için sabit listelerinden yararlanabilirsiniz. Yeni bir kategori eklediğinizde, doğru kategori değeri oluşturulur. yeni bir kategori eklediğinizde kopyalama ve yapıştırma hatalarından kaçınır ancak kategori değerini güncelleştirmeyi unutursunuz.

Controllers\HomeController.cs dosyasını açın ve aşağıdaki kodu inceleyin:

public enum eMovieCategories { Action, Drama, Comedy, Science_Fiction };

private void SetViewBagMovieType(eMovieCategories selectedMovie) {

    IEnumerable<eMovieCategories> values = 

                      Enum.GetValues(typeof(eMovieCategories))

                      .Cast<eMovieCategories>();

    IEnumerable<SelectListItem> items =

        from value in values

        select new SelectListItem

        {

            Text = value.ToString(),

            Value = value.ToString(),

            Selected = value == selectedMovie,

        };

    ViewBag.MovieType = items;

}

public ActionResult SelectCategoryEnum() {

    SetViewBagMovieType(eMovieCategories.Drama);

    return View("SelectCategory");

}

sabit listesi eMovieCategories dört film türünü yakalar. SetViewBagMovieType yöntemi, sabit listesinden IEnumerable<SelectListItem'i eMovieCategories>oluşturur ve parametresinden selectedMovie özelliğini ayarlar.Selected Eylem SelectCategoryEnum yöntemi, eylem yöntemiyle SelectCategory aynı görünümü kullanır.

Test sayfasına gidin ve bağlantıya tıklayın Select Movie Category (Enum) . Bu kez, görüntülenen bir değer (sayı) yerine sabit listesi temsil eden bir dize görüntülenir.

Sabit Listesi Değerlerini Deftere Nakil

HTML Formları genellikle verileri sunucuya göndermek için kullanılır. Aşağıdaki kod, yönteminin HTTP GET ve HTTP POST sürümlerini SelectCategoryEnumPost gösterir.

public ActionResult SelectCategoryEnumPost() {

    SetViewBagMovieType(eMovieCategories.Comedy);

    return View();

}

[HttpPost]

public ActionResult SelectCategoryEnumPost(eMovieCategories MovieType) {

    ViewBag.messageString = MovieType.ToString() +

                            " val = " + (int)MovieType;

    return View("Information");

}

Yönteme POST bir eMovieCategories sabit listesi geçirerek hem sabit listesi değerini hem de sabit listesi dizesini ayıklayabiliriz. Örneği çalıştırın ve Test sayfasına gidin. Select Movie Category(Enum Post) Bağlantıya tıklayın. Bir film türü seçin ve gönder düğmesine basın. Görüntüde film türünün hem değeri hem de adı gösterilir.

Film türünün değerinin ve adının resmi

Birden Çok Bölüm Seçme Öğesi Oluşturma

ListBox HTML yardımcısı, HTML <select> öğesini özniteliğiyle multiple işler ve bu da kullanıcıların birden çok seçim yapmasını sağlar. Test bağlantısına gidin ve Birden Çok Seçim Ülkesi bağlantısını seçin. İşlenen kullanıcı arabirimi birden çok ülke seçmenize olanak tanır. Aşağıdaki resimde Kanada ve Çin seçilmiştir.

Birden çok seçim açılan listesinin resmi

MultiSelectCountry Kodunu inceleme

Controllers\HomeController.cs dosyasından aşağıdaki kodu inceleyin.

private MultiSelectList GetCountries(string[] selectedValues) {

    List<Country> Countries = new List<Country>()

        {

            new Country() { ID = 1, Name= "United States" },

            new Country() { ID = 2, Name= "Canada" },

            new Country() { ID = 3, Name= "UK" },

            new Country() { ID = 4, Name= "China" },

            new Country() { ID = 5, Name= "Japan" }

        };

    return new MultiSelectList(Countries, "ID", "Name", selectedValues);

}

public ActionResult MultiSelectCountry() {

    ViewBag.Countrieslist = GetCountries(null);

    return View();

}

GetCountries yöntemi bir ülke listesi oluşturur ve bunu oluşturucuya MultiSelectList geçirir. MultiSelectList Yukarıdaki yöntemde GetCountries kullanılan oluşturucu aşırı yüklemesi dört parametre alır:

public MultiSelectList(

    IEnumerable items,

    string dataValueField,

    string dataTextField,

    IEnumerable selectedValues

)
  1. items: Listedeki öğeleri içeren bir IEnumerable . Yukarıdaki örnekte, Ülkeler listesi.
  2. dataValueField: Değeri içeren IEnumerable listesindeki özelliğin adı. Yukarıdaki ID örnekte özelliği.
  3. dataTextField: Görüntülenecek bilgileri içeren IEnumerable listesindeki özelliğin adı. Yukarıdaki name örnekte özelliği.
  4. selectedValues: Seçili değerlerin listesi.

Yukarıdaki örnekte, MultiSelectCountry yöntem seçilen ülkeler için bir null değer geçirir, bu nedenle kullanıcı arabirimi görüntülendiğinde hiçbir ülke seçilmez. Aşağıdaki kod, görünümü işlemek için kullanılan Razor işaretlemesini MultiSelectCountry gösterir.

@{

    ViewBag.Title = "MultiSelect Country";

    Layout = "~/Views/Shared/_Simple_Layout.cshtml";

}

@if (ViewBag.YouSelected != null) {

    <div> You Selected:  @ViewBag.YouSelected</div>

}

@using (Html.BeginForm()) {

    <fieldset>

        <legend>Multi-Select Demo</legend>

        <div class="editor-field">

            @Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList

            )

        </div>

        <p>

            <input type="submit" value="Save" />

        </p>

    </fieldset>

}

Yukarıda kullanılan HTML yardımcı ListBox yöntemi, bağlama modelleme özelliğinin adı ve seçim seçeneklerini ve değerlerini içeren MultiSelectList olmak üzere iki parametre alır. Yukarıdaki ViewBag.YouSelected kod, formu gönderirken seçtiğiniz ülkelerin değerlerini görüntülemek için kullanılır. Yönteminin HTTP POST aşırı yüklemesini MultiSelectCountry inceleyin.

[HttpPost]

public ActionResult MultiSelectCountry(FormCollection form) {

    ViewBag.YouSelected = form["Countries"];

    string selectedValues = form["Countries"];

    ViewBag.Countrieslist = GetCountries(selectedValues.Split(','));

    return View();

}

ViewBag.YouSelected Dinamik özellik, form koleksiyonundaki giriş için Countries elde edilen seçili ülkeleri içerir. Bu sürümde GetCountries yöntemine seçilen ülkelerin listesi geçirilir, bu nedenle MultiSelectCountry görünüm görüntülendiğinde, seçilen ülkeler kullanıcı arabiriminde seçilir.

Harvest Chosen jQuery Eklentisi ile Seçme ElemanıNı Kolay Hale Getirme

Harvest Chosen jQuery eklentisi, kullanıcı dostu bir kullanıcı arabirimi oluşturmak için html <seçme> öğesine eklenebilir. Aşağıdaki görüntülerde Harvest Chosen jQuery eklentisi görüntülenmiştir MultiSelectCountry .

Harvest Chosen j Query eklentisinin görüntüsü

Aşağıdaki iki görüntüde Kanada seçilidir.

Seçilen Kanada resmi

Kaldırılacak X işaretiyle seçilen Kanada resmi

Yukarıdaki resimde Kanada seçilidir ve seçimi kaldırmak için tıklayabileceğiniz bir x içerir. Aşağıdaki görüntüde Kanada, Çin ve Japonya'nın seçili olduğu gösterilmektedir.

Seçilen Kanada Çin ve Japonya görüntüsü

Harvest Chosen jQuery Eklentisini Bağlama

jQuery konusunda biraz deneyiminiz varsa aşağıdaki bölümü takip etmek daha kolaydır. Daha önce hiç jQuery kullanmadıysanız, aşağıdaki jQuery öğreticilerinden birini denemek isteyebilirsiniz.

Seçilen eklentisi, bu öğreticiye eşlik eden başlangıç ve tamamlanmış örnek projelere dahildir. Bu öğreticide yalnızca jQuery kullanarak kullanıcı arabirimine bağlamanız gerekir. Bir ASP.NET MVC projesinde Harvest Chosen jQuery eklentisini kullanmak için:

  1. Seçilen eklentiyi github'dan indirin. Bu adım sizin için yapılmıştır.
  2. Seçilen klasörünü ASP.NET MVC projenize ekleyin. Önceki adımda indirdiğiniz Seçili eklentideki varlıkları Seçili klasörüne ekleyin. Bu adım sizin için yapılmıştır.
  3. Seçilen eklentiyi DropDownList veya ListBox HTML yardımcısına bağlama.

Seçilen Eklentiyi MultiSelectCountry Görünümüne bağlama.

Views\Home\MultiSelectCountry.cshtml dosyasını açın ve öğesine Html.ListBoxbir htmlAttributes parametre ekleyin. Ekleyeceğiniz parametre, seçme listesi@class = "chzn-select"() için bir sınıf adı içerir. Tamamlanmış kod aşağıda gösterilmiştir:

<div class="editor-field">

    @Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList

     , new

     {

         @class = "chzn-select",

         data_placeholder = "Choose  Countries..."

     }

    )

</div>

Yukarıdaki kodda HTML özniteliğini ve öznitelik değerini class = "chzn-select"ekliyoruz. Sınıfın önündeki @ karakterinin Razor görünüm altyapısıyla hiçbir ilgisi yoktur. class bir C# anahtar sözcüğüdür. C# anahtar sözcükleri, ön ek olarak @ eklemedikleri sürece tanımlayıcı olarak kullanılamaz. Yukarıdaki örnekte geçerli @class bir tanımlayıcıdır, ancak sınıfın bir anahtar sözcük olması değildir.

Seçilen/chosen.jquery.js ve Seçilen/chosen.css dosyalarına başvurular ekleyin. Seçilen /chosen.jquery.js ve Seçilen eklentisinin işlevsel olarak uygulanmasını sağlar. Seçilen/chosen.css dosyası stil sağlar. Bu başvuruları Views\Home\MultiSelectCountry.cshtml dosyasının altına ekleyin. Aşağıdaki kod, Seçilen eklentiye nasıl başvuracaklarını gösterir.

<script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script><script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script>

<link href="@Url.Content("~/Chosen/chosen.css")" rel="stylesheet"  type="text/css" />

Seçilen eklentisini Html.ListBox kodunda kullanılan sınıf adını kullanarak etkinleştirin. Yukarıdaki örnekte sınıf adı şeklindedir chzn-select. Views\Home\MultiSelectCountry.cshtml görünüm dosyasının altına aşağıdaki satırı ekleyin. Bu satır Seçilen eklentisini etkinleştirir.

<script >    $(".chzn-select").chosen(); </script>  @*Hookup Chosen Plugin*@

Aşağıdaki satır, sınıf adına chzn-selectsahip DOM öğesini seçen jQuery ready işlevini çağırmak için söz dizimidir.

$(".chzn-select")

Yukarıdaki çağrıdan döndürülen sarmalanmış küme daha sonra Seçilen eklentisini oluşturan seçilen yöntemi ().chosen(); uygular.

Aşağıdaki kod, tamamlanmış Views\Home\MultiSelectCountry.cshtml görünüm dosyasını gösterir.

@{

    ViewBag.Title = "MultiSelect Country";

    Layout = "~/Views/Shared/_Simple_Layout.cshtml";

}

@if (ViewBag.YouSelected != null) {

    <div> You Selected:  @ViewBag.YouSelected</div>

}

@using (Html.BeginForm()) {

    <fieldset>

        <legend>Multi-Select Demo</legend>

<div class="editor-field">

    @Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList

     , new

     {

         @class = "chzn-select"

     }

    )

</div>

        <p>

            <input type="submit" value="Save" />

        </p>

    </fieldset>

}

<script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script>

<link href="@Url.Content("~/Chosen/chosen.css")" rel="stylesheet"  type="text/css" />

<script >    $(".chzn-select").chosen(); </script> @*Hookup Chosen Plugin*@

Uygulamayı çalıştırın ve görünüme MultiSelectCountry gidin. Ülke eklemeyi ve silmeyi deneyin. Sağlanan örnek indirme ayrıca ViewBag yerine bir MultiCountryVM görünüm modeli kullanarak MultiSelectCountry işlevini uygulayan bir yöntem ve görünüm içerir.

Sonraki bölümde, ASP.NET MVC iskele mekanizmasının DropDownList yardımcısıyla nasıl çalıştığını göreceksiniz.

İleri