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

Rick Anderson tarafından

Bu öğretici, bir ASP.NET MVC web uygulamasındaki DropDownList Yardımcısı ve ListBox Yardımcısı ile çalışma hakkında temel bilgileri öğretir. Öğreticiyi izlemek için Microsoft Visual Studio ü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. Şu bağlantıya tıklayarak hepsini yükleyebilirsiniz: Web Platformu Yükleyicisi. Alternatif olarak, aşağıdaki bağlantıları kullanarak önkoşulları ayrı ayrı yükleyebilirsiniz:

Visual Web Developer 2010 yerine Visual Studio 2010 kullanıyorsanız, aşağıdaki bağlantıya tıklayarak önkoşulları yükleyebilirsiniz: Visual studio 2010 önkoşulları. Bu öğreticide, ASP.NET MVC öğreticisi veyaASP.NET MVC müzik mağazası öğreticisini tamamlayan veya ASP.NET MVC geliştirme hakkında bilgi sahibi olduğunuz varsayılır. Bu öğretici, ASP.NET MVC müzik deposu öğreticisindeki değiştirilmiş bir projeyle başlar. Başlangıç projesini aşağıdaki bağlantıyla indirebilirsiniz C# sürümü indirebilirsiniz.

Tamamlanmış öğretici C# kaynak koduna sahip bir Visual Web Developer projesi, bu konuyla birlikte kullanılabilecek. İndirin.

Ne oluşturacağız?

Bir kategori seçmek için DropDownList yardımcısını kullanan eylem yöntemleri ve görünümleri oluşturacaksınız. Ayrıca, yeni bir kategori (örn. tarz veya sanatçı) gerektiğinde kullanılabilecek bir kategori ekle iletişim kutusu eklemek için jQuery ' i de kullanacaksınız. Aşağıda yeni bir tarz eklemek ve yeni bir sanatçı eklemek için bağlantıları gösteren oluştur görünümünün ekran görüntüsü verilmiştir.

Öğrenmeniz gereken yetenekler

Öğrenirsiniz:

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

Başlarken

Aşağıdaki bağlantıyla birlikte Başlatıcı projesini indirerek başlayın, indirin. Windows Gezgini 'nde, DDL_Starter. zip dosyasına sağ tıklayın ve Özellikler ' i seçin. DDL_Starter. zip özellikleri Iletişim kutusunda Engellemeyi kaldır ' ı seçin.

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

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

Film kategorisi seçin (basit) bağlantısını seçin. Seçili değeri komedi bir film türü seçme listesi görüntülenir.

Tarayıcıya sağ tıklayın ve kaynağı görüntüle ' yi seçin. Sayfa için HTML görüntülenir. Aşağıdaki kodda select öğesi için HTML gösterilmektedir.

<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 bir öğenin bir değere sahip olduğunu görebilirsiniz (eylem için 0, Drama için 1, komedi için 2 ve bilimi için 3) ve bir görünen ad (eylem, Drama, komedi ve bilim kurgu). Yukarıdaki kod, bir seçim listesi için standart HTML 'dir.

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

Controllers\homecontroller.cs dosyasını açın ve SelectCategory metodunu inceleyin.

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 bir IEnumerable<SelectListItem > gerektirir. Diğer bir deyişle, ıenumerable<selectlistıtem > açıkça DropDownList Yardımcısı 'na geçirebilir veya IEnumerable<SelectListItem > öğesini, SelectListItem Için model özelliği olarak aynı adı kullanarak ViewBag 'e ekleyebilirsiniz. SelectListItem 'ın örtük ve açık olarak bir sonraki bölümünde ele geçirilmesi önerilir. Yukarıdaki kod, bir ıenumerable<SelectListItem > oluşturmak için mümkün olan en basit yolu gösterir ve metin ve değerlerle doldurmaktır. ComedySelectListItem 'ın Seçili özelliği true olarak ayarlandığını aklınızda, bu, işlenen seçim listesinin listedeki seçili öğe olarak komedi görüntülemesine neden olur.

Yukarıda oluşturulan ıenumerable<SelectListItem > , ViewBag 'e MovieType adıyla eklenir. Ienumerable<SelectListItem > aşağıda gösterilen DropDownList Yardımcısı 'na örtük olarak geçiririz.

Views\home\selectcategory.exe dosyasını açın ve biçimlendirmeyi 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/paylaşılan/_basit_Layout. cshtml olarak ayarlayacağız. Bu, Standart Düzen dosyasının basitleştirilmiş bir sürümüdür. Bunu, görüntüleme ve işlenmiş HTML 'in basit tutulması için yaptık.

Bu örnekte, uygulamanın durumunu değiştirmedik, bu nedenle verileri http Al, http postdeğil kullanarak gönderecağız. Http get veya post ' i seçmek IÇIN W3C bölümüne hızlı denetim listesi' ne bakın. Uygulamayı değiştirmedik ve formu gönderdiğ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ıyoruz. Genellikle görünümler, hiçbir parametre alan HTML. BeginForm aşırı yüklemesini içerir. Hiçbir parametre sürümü varsayılan olarak form verilerini aynı eylem yönteminin ve denetleyicinin GÖNDERI sürümüne nakletmez.

Aşağıdaki satır

@Html.DropDownList("MovieType")

DropDownList Yardımcısı 'na bir dize bağımsız değişkeni geçirir. Örneğimizde "MovieType" dizesi şu iki şeyi yapar:

  • ViewBagIçinde bir IEnumerable<SelectListItem > bulmak için DropDownList Yardımcısı için anahtar sağlar.
  • MovieType form öğesine veri bağımlıdır. Gönderme yöntemi http getise, MovieType bir sorgu dizesi olacaktır. Gönderme yöntemi http postise, ileti gövdesine MovieType eklenecektir. Aşağıdaki görüntüde, değeri 1 olan sorgu dizesi gösterilmektedir.

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

public ViewResult CategoryChosen(string MovieType) {

    ViewBag.messageString = MovieType;

    return View("Information");

}

Sınama sayfasına geri gidin ve HTML SelectList bağlantısını seçin. HTML sayfası, basit ASP.NET MVC test sayfasına benzer bir select öğesi oluşturur. Tarayıcı penceresine sağ tıklayın ve kaynağı görüntüle' yi seçin. Seçim listesi için HTML biçimlendirmesi temelde aynıdır. HTML sayfasını test edin, ASP.NET MVC eylem yöntemi ve daha önce sınadığımız görünüm gibi çalışacaktır.

Numaralandırmalar içeren film seçme listesini geliştirme

Uygulamanızdaki Kategoriler düzeltildiğinde ve değişmeyecektir, kodunuzun daha sağlam ve daha basit olması için Numaralandırmaların avantajlarından faydalanabilirsiniz. Yeni bir kategori eklediğinizde, doğru kategori değeri oluşturulur. Yeni bir kategori eklediğinizde kopyalama ve yapıştırma hatalarını önler, ancak Kategori değerini güncelleştirmeyi unutabilirsiniz.

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");

}

Enum eMovieCategories dört film türünü yakalar. SetViewBagMovieType yöntemi eMovieCategoriesnumaralandırmasından IEnumerable<SelectListItem > oluşturur ve Selected özelliğini selectedMovie parametresinden ayarlar. SelectCategoryEnum Action yöntemi, SelectCategory Action yöntemiyle aynı görünümü kullanır.

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

Enum değerlerini postalama

HTML formları genellikle sunucuya veri göndermek için kullanılır. Aşağıdaki kod SelectCategoryEnumPost yönteminin HTTP GET ve HTTP POST sürümlerini 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");

}

eMovieCategories numaralandırması POST yöntemine geçirerek hem enum 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ısına tıklayın. Bir film türü seçip Gönder düğmesine basın. Görüntü hem değeri hem de film türünün adını gösterir.

Birden çok bölüm Seç öğe oluşturma

ListBox HTML Yardımcısı, HTML <select> öğesini, kullanıcıların birden çok seçim yapmasına izin veren multiple özniteliğiyle işler. Test bağlantısına gidin ve Çoklu ülke seç bağlantısını seçin. İşlenmiş Kullanıcı arabirimi birden çok ülke seçmenizi sağlar. Aşağıdaki görüntüde Kanada ve Çin seçilidir.

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, ülkelerin bir listesini oluşturur ve sonra bunu MultiSelectList oluşturucusuna geçirir. Yukarıdaki GetCountries yönteminde kullanılan MultiSelectList 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, ülkelerin listesi.
  2. DataValueField: değeri içeren IEnumerable listesindeki özelliğin adı. Yukarıdaki örnekte ID özelliği.
  3. DataTextField: görüntülenecek bilgileri içeren IEnumerable listesindeki özelliğin adı. Yukarıdaki örnekte name özelliği.
  4. SelectedValues: seçili değerlerin listesi.

Yukarıdaki örnekte MultiSelectCountry yöntemi seçili ülkeler için bir null değeri geçirir, bu yüzden Kullanıcı arabirimi görüntülenirken hiçbir ülke seçilmezler. Aşağıdaki kod MultiSelectCountry görünümünü işlemek için kullanılan Razor işaretlemesini 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 iki parametre alır, model bağlama özelliğinin adı ve Select seçeneklerini ve değerlerini Içeren MultiSelectList . Yukarıdaki ViewBag.YouSelected kodu, formu gönderdiğinizde seçtiğiniz ülkelerin değerlerini göstermek için kullanılır. MultiSelectCountry yönteminin HTTP POST yüklemesini inceleyin.

[HttpPost]

public ActionResult MultiSelectCountry(FormCollection form) {

    ViewBag.YouSelected = form["Countries"];

    string selectedValues = form["Countries"];

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

    return View();

}

ViewBag.YouSelected Dynamic özelliği, form koleksiyonundaki Countries girdisi için edinilen Seçili ülkeleri içerir. Bu sürümde, Getülkeler yöntemine seçili ülkelerin bir listesi geçirilir, bu nedenle MultiSelectCountry görünümü görüntülendiğinde, seçilen ülkeler Kullanıcı arabiriminde seçilir.

Seçili jQuery eklentisi ile bir select öğesi kullanımı kolay yapılıyor

Seçili jQuery EKLENTISI bir HTML <eklenebilir ve Kullanıcı dostu BIR kullanıcı arabirimi oluşturmak için> öğesini seçin. Aşağıdaki görüntüler, MultiSelectCountry görünümü ile Seçili jQuery eklentisini gösterir.

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

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

Seçili jQuery eklentisinin takılarak

JQuery ile ilgili bazı deneyiminiz varsa aşağıdaki bölüm daha kolay olur. Daha önce jQuery kullanmadıysanız, aşağıdaki jQuery öğreticilerden birini denemek isteyebilirsiniz.

Seçilen eklenti, Bu öğreticiye eşlik eden başlatıcı ve tamamlanmış örnek projelere dahildir. Bu öğreticide, yalnızca Kullanıcı arabirimine bağlamak için jQuery kullanmanız gerekir. Seçili jQuery eklentisini bir ASP.NET MVC projesinde kullanmak için şunları yapmanız gerekir:

  1. Seçili eklentiyi GitHub'dan indirin. Bu adım sizin için gerçekleştirildi.
  2. Seçilen klasörü ASP.NET MVC projenize ekleyin. Önceki adımda indirdiğiniz seçili olan eklentiden varlıkları seçili klasöre ekleyin. Bu adım sizin için gerçekleştirildi.
  3. Seçili eklentiyi DropDownList veya ListBox HTML Yardımcısı 'na bağlama.

Seçili eklenti MultiSelectCountry görünümüne yerleştirdim.

Views\home\multiselectcountry.exe dosyasını açın ve Html.ListBoxbir htmlAttributes parametresi ekleyin. Ekleyeceğiniz parametre seçim listesi için bir sınıf adı içerir (@class = "chzn-select"). Tamamlanan kod aşağıda gösterilmektedir:

<div class="editor-field">

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

     , new

     {

         @class = "chzn-select",

         data_placeholder = "Choose  Countries..."

     }

    )

</div>

Yukarıdaki kodda, class = "chzn-select"HTML özniteliğini ve öznitelik değerini ekliyoruz. Önceki @ karakteri Razor görünüm altyapısıyla hiçbir şey yapmaz. class bir C# anahtar sözcüktür. C#anahtar sözcükler, @ önek olarak içermedikleri sürece tanımlayıcı olarak kullanılamaz. Yukarıdaki örnekte, @class geçerli bir tanımlayıcıdır , ancak sınıf bir anahtar sözcüktür.

Seçili/seçili. jQuery. js ve Seçili/seçili. css dosyalarına başvuruları ekleyin. Seçili/seçili. jQuery. js ve seçilen eklentinin işlev düzeyini uygular. Seçili/seçili. css dosyası stili sağlar. Bu başvuruları Views\home\multiselectcountry.exe. cshtml dosyasının altına ekleyin. Aşağıdaki kod, seçilen eklentiye nasıl başvurulacağı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" />

HTML. ListBox kodunda kullanılan sınıf adını kullanarak seçili eklentiyi etkinleştirin. Yukarıdaki örnekte, sınıf adı chzn-select. Views\home\multiselectcountry.exe. cshtml görünüm dosyasının altına aşağıdaki satırı ekleyin. Bu satır seçili eklentiyi etkinleştirir.

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

Aşağıdaki satır, sınıf adı chzn-selectDOM öğesini seçen jQuery Ready işlevini çağırma sözdizimidir.

$(".chzn-select")

Yukarıdaki çağrıdan döndürülen sarmalanmış küme, seçilen eklentiyi bağlayan seçili yöntemi (.chosen();) uygular.

Aşağıdaki kod, tamamlanan Views\home\multiselectcountry.exe. 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 MultiSelectCountry görünümüne gidin. Ülke eklemeyi ve silmeyi deneyin. Örnek yükleme, Ayrıca, ViewBagyerine bir görünüm modeli kullanarak MultiSelectCountry işlevlerini uygulayan bir MultiCountryVM yöntemi ve görünümü içerir.

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