ASP.NET MVC ile DropDownList Yardımcısını KullanmaUsing the DropDownList Helper with ASP.NET MVC

Rick Anderson tarafındanby Rick Anderson

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.This tutorial will teach you the basics of working with the DropDownList helper and the ListBox helper in an ASP.NET MVC Web application. Öğreticiyi izlemek için Microsoft Visual Studio ücretsiz bir sürümü olan Microsoft Visual Web Developer 2010 Express Service Pack 1 ' i kullanabilirsiniz.You can use Microsoft Visual Web Developer 2010 Express Service Pack 1, which is a free version of Microsoft Visual Studio to follow the tutorial. Başlamadan önce, aşağıda listelenen önkoşulları yüklediğinizden emin olun.Before you start, make sure you've installed the prerequisites listed below. Şu bağlantıya tıklayarak hepsini yükleyebilirsiniz: Web Platformu Yükleyicisi.You can install all of them by clicking the following link: Web Platform Installer. Alternatif olarak, aşağıdaki bağlantıları kullanarak önkoşulları ayrı ayrı yükleyebilirsiniz:Alternatively, you can individually install the prerequisites using the following links:

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ı.If you're using Visual Studio 2010 instead of Visual Web Developer 2010, install the prerequisites by clicking the following link: Visual Studio 2010 prerequisites. 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.This tutorial assumes you have completed the Intro to ASP.NET MVC tutorial or theASP.NET MVC Music Store tutorial or you are familiar with ASP.NET MVC development. Bu öğretici, ASP.NET MVC müzik deposu öğreticisindeki değiştirilmiş bir projeyle başlar.This tutorial starts with a modified project from the ASP.NET MVC Music Store tutorial. Başlangıç projesini aşağıdaki bağlantıyla indirebilirsiniz C# sürümü indirebilirsiniz.You can download the starter project with the following link Download the C# version.

Tamamlanmış öğretici C# kaynak koduna sahip bir Visual Web Developer projesi, bu konuyla birlikte kullanılabilecek.A Visual Web Developer project with the completed tutorial C# source code is available to accompany this topic. İndirin.Download.

Ne oluşturacağız?What You'll Build

Bir kategori seçmek için DropDownList yardımcısını kullanan eylem yöntemleri ve görünümleri oluşturacaksınız.You'll create action methods and views that use the DropDownList helper to select a category. 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.You will also use jQuery to add an insert category dialog that can be used when a new category (such as genre or artist) is needed. 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.Below is a screenshot of the Create view showing links to add a new genre and add a new artist.

Öğrenmeniz gereken yeteneklerSkills You'll Learn

Öğrenirsiniz:Here's what you'll learn:

  • Kategori verilerini seçmek için DropDownList Yardımcısını kullanma.How to use the DropDownList helper to select category data.
  • Yeni kategoriler eklemek için jQuery iletişim kutusu ekleme.How to add a jQuery dialog to add new categories.

BaşlarkenGetting Started

Aşağıdaki bağlantıyla birlikte Başlatıcı projesini indirerek başlayın, indirin.Start by downloading the starter project with the following link, Download. Windows Gezgini 'nde, DDL_Starter. zip dosyasına sağ tıklayın ve Özellikler ' i seçin.In Windows Explorer, right click on the DDL_Starter.zip file and select properties. DDL_Starter. zip özellikleri Iletişim kutusunda Engellemeyi kaldır ' ı seçin.In the DDL_Starter.zip Properties dialog box, select Unblock.

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.Right click the DDL_Starter.zip file and select Extract All to unzip the file. Visual Web Developer 2010 Express ("Visual Web Developer" veya "VWD" for short) veya Visual Studio 2010 ile Startmusicstore. sln dosyasını açın.Open the StartMusicStore.sln file with Visual Web Developer 2010 Express ("Visual Web Developer" or "VWD" for short) or Visual Studio 2010.

Uygulamayı çalıştırmak için CTRL + F5 tuşlarına basın ve Test bağlantısına tıklayın.Press CTRL+F5 to run the application and click the Test link.

Film kategorisi seçin (basit) bağlantısını seçin.Select the Select Movie Category (Simple) link. Seçili değeri komedi bir film türü seçme listesi görüntülenir.A Movie Type Select list is displayed, with Comedy the selected value.

Tarayıcıya sağ tıklayın ve kaynağı görüntüle ' yi seçin.Right click in the browser and select view source. Sayfa için HTML görüntülenir.The HTML for the page is displayed. Aşağıdaki kodda select öğesi için HTML gösterilmektedir.The code below shows the HTML for the select element.

<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).You can see that each item in the select list has a value (0 for Action, 1 for Drama, 2 for Comedy and 3 for Science Fiction) and a display name (Action, Drama, Comedy and Science Fiction). Yukarıdaki kod, bir seçim listesi için standart HTML 'dir.The code above is standard HTML for a select list.

Seçim listesini Drama olarak değiştirin ve Gönder düğmesine basın.Change the select list to Drama and hit the Submit button. Tarayıcıdaki URL http://localhost:2468/Home/CategoryChosen?MovieType=1 ve sayfa seçtiğiniz sayfada görüntülenir : 1.The URL in the browser is http://localhost:2468/Home/CategoryChosen?MovieType=1 and the page displays You Selected: 1.

Controllers\homecontroller.cs dosyasını açın ve SelectCategory metodunu inceleyin.Open the Controllers\HomeController.cs file and examine the SelectCategory method.

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.The DropDownList helper used to create an HTML select list requires a IEnumerable<SelectListItem >, either explicitly or implicitly. 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.That is, you can pass the IEnumerable<SelectListItem > explicitly to the DropDownList helper or you can add the IEnumerable<SelectListItem > to the ViewBag using the same name for the SelectListItem as the model property. SelectListItem 'ın örtük ve açık olarak bir sonraki bölümünde ele geçirilmesi önerilir.Passing in the SelectListItem implicitly and explicitly is covered in the next part of the tutorial. 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.The code above shows the simplest possible way to create an IEnumerable<SelectListItem > and populate it with text and values. 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.Note the ComedySelectListItem has the Selected property set to true; this will cause the rendered select list to show Comedy as the selected item in the list.

Yukarıda oluşturulan ıenumerable<SelectListItem > , ViewBag 'e MovieType adıyla eklenir.The IEnumerable<SelectListItem > created above is added to the ViewBag with the name MovieType. Ienumerable<SelectListItem > aşağıda gösterilen DropDownList Yardımcısı 'na örtük olarak geçiririz.This is how we pass the IEnumerable<SelectListItem > implicitly to the DropDownList helper shown below.

Views\home\selectcategory.exe dosyasını açın ve biçimlendirmeyi inceleyin.Open the Views\Home\SelectCategory.cshtml file and examine the markup.

@{

    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.On the third line, we set the layout to Views/Shared/_Simple_Layout.cshtml, which is a simplified version of the standard layout file. Bunu, görüntüleme ve işlenmiş HTML 'in basit tutulması için yaptık.We do this to keep the display and rendered HTML simple.

Bu örnekte, uygulamanın durumunu değiştirmedik, bu nedenle verileri http Al, http postdeğil kullanarak gönderecağız.In this sample we are not changing the state of the application, so we will submit the data using an HTTP GET, not HTTP POST. Http get veya post ' i seçmek IÇIN W3C bölümüne hızlı denetim listesi' ne bakın.See the W3C section Quick Checklist for Choosing HTTP GET or POST. 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.Because we are not changing the application and posting the form, we use the Html.BeginForm overload that allows us to specify the action method, controller and form method (HTTP POST or HTTP GET). Genellikle görünümler, hiçbir parametre alan HTML. BeginForm aşırı yüklemesini içerir.Typically views contain the Html.BeginForm overload that takes no parameters. Hiçbir parametre sürümü varsayılan olarak form verilerini aynı eylem yönteminin ve denetleyicinin GÖNDERI sürümüne nakletmez.The no parameter version defaults to posting the form data to the POST version of the same action method and controller.

Aşağıdaki satırThe following line

@Html.DropDownList("MovieType")

DropDownList Yardımcısı 'na bir dize bağımsız değişkeni geçirir.passes a string argument to the DropDownList helper. Örneğimizde "MovieType" dizesi şu iki şeyi yapar:This string, "MovieType" in our example, does two things:

  • ViewBagIçinde bir IEnumerable<SelectListItem > bulmak için DropDownList Yardımcısı için anahtar sağlar.It provides the key for the DropDownList helper to find a IEnumerable<SelectListItem > in the ViewBag.
  • MovieType form öğesine veri bağımlıdır.It is data-bound to the MovieType form element. Gönderme yöntemi http getise, MovieType bir sorgu dizesi olacaktır.If the submit method is HTTP GET, MovieType will be a query string. Gönderme yöntemi http postise, ileti gövdesine MovieType eklenecektir.If the submit method is HTTP POST, MovieType will be added in the message body. Aşağıdaki görüntüde, değeri 1 olan sorgu dizesi gösterilmektedir.The following image shows the query string with the value of 1.

Aşağıdaki kod, formun gönderildiği CategoryChosen yöntemini gösterir.The following code shows the CategoryChosen method the form was submitted to.

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.Navigate back to the test page and select the HTML SelectList link. HTML sayfası, basit ASP.NET MVC test sayfasına benzer bir select öğesi oluşturur.The HTML page renders a select element similar to the simple ASP.NET MVC test page. Tarayıcı penceresine sağ tıklayın ve kaynağı görüntüle' yi seçin.Right click the browser window and select view source. Seçim listesi için HTML biçimlendirmesi temelde aynıdır.The HTML markup for the select list is essentially identical. 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.Test the HTML page, it works like the ASP.NET MVC action method and view we previously tested.

Numaralandırmalar içeren film seçme listesini geliştirmeImproving the Movie Select List with Enums

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.If the categories in your application are fixed and will not change, you can take advantage of enums to make your code more robust and simpler to extend. Yeni bir kategori eklediğinizde, doğru kategori değeri oluşturulur.When you add a new category, the correct category value is generated. Yeni bir kategori eklediğinizde kopyalama ve yapıştırma hatalarını önler, ancak Kategori değerini güncelleştirmeyi unutabilirsiniz.The avoids copy and paste errors when you add a new category but forget to update the category value.

Controllers\homecontroller.cs dosyasını açın ve aşağıdaki kodu inceleyin:Open the Controllers\HomeController.cs file and examine the following code:

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.The enum eMovieCategories captures the four movie types. SetViewBagMovieType yöntemi eMovieCategoriesnumaralandırmasından IEnumerable<SelectListItem > oluşturur ve Selected özelliğini selectedMovie parametresinden ayarlar.The SetViewBagMovieType method creates the IEnumerable<SelectListItem > from the eMovieCategoriesenum, and sets the Selected property from the selectedMovie parameter. SelectCategoryEnum Action yöntemi, SelectCategory Action yöntemiyle aynı görünümü kullanır.The SelectCategoryEnum action method uses the same view as the SelectCategory action method.

Sınama sayfasına gidin ve Select Movie Category (Enum) bağlantısına tıklayın.Navigate to the Test page and click on the Select Movie Category (Enum) link. Bu kez, bir değer (sayı) yerine, sabit listesini temsil eden bir dize görüntülenir.This time, instead of a value (number) being displayed, a string representing the enum is displayed.

Enum değerlerini postalamaPosting Enum Values

HTML formları genellikle sunucuya veri göndermek için kullanılır.HTML Forms are typically used to post data to the server. Aşağıdaki kod SelectCategoryEnumPost yönteminin HTTP GET ve HTTP POST sürümlerini gösterir.The following code shows the HTTP GET and HTTP POST versions of the SelectCategoryEnumPost method.

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.By passing a eMovieCategories enum to the POST method, we can extract both the enum value and the enum string. Örneği çalıştırın ve test sayfasına gidin.Run the sample and navigate to the Test page. Select Movie Category(Enum Post) bağlantısına tıklayın.Click on the Select Movie Category(Enum Post) link. Bir film türü seçip Gönder düğmesine basın.Select a movie type and then hit the submit button. Görüntü hem değeri hem de film türünün adını gösterir.The display shows both the value and the name of the movie type.

Birden çok bölüm Seç öğe oluşturmaCreating a Multiple Section Select Element

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.The ListBox HTML helper renders the HTML <select> element with the multiple attribute, which allows the users to make multiple selections. Test bağlantısına gidin ve Çoklu ülke seç bağlantısını seçin.Navigate to the Test link, then select the Multi Select Country link. İşlenmiş Kullanıcı arabirimi birden çok ülke seçmenizi sağlar.The rendered UI allows you to select multiple countries. Aşağıdaki görüntüde Kanada ve Çin seçilidir.In the image below, Canada and China are selected.

MultiSelectCountry kodunu incelemeExamining the MultiSelectCountry Code

Controllers\homecontroller.cs dosyasından aşağıdaki kodu inceleyin.Examine the following code from the Controllers\HomeController.cs file.

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.The GetCountries method creates a list of countries, then passes it to the MultiSelectList constructor. Yukarıdaki GetCountries yönteminde kullanılan MultiSelectList Oluşturucu aşırı yüklemesi dört parametre alır:The MultiSelectList constructor overload used in the GetCountries method above takes four parameters:

public MultiSelectList(

    IEnumerable items,

    string dataValueField,

    string dataTextField,

    IEnumerable selectedValues

)
  1. Items: listedeki öğeleri Içeren bir IEnumerable .items: An IEnumerable containing the items in the list. Yukarıdaki örnekte, ülkelerin listesi.In the example above, the list of Countries.
  2. DataValueField: değeri içeren IEnumerable listesindeki özelliğin adı.dataValueField: The name of the property in the IEnumerable list that contains the value. Yukarıdaki örnekte ID özelliği.In the example above, the ID property.
  3. DataTextField: görüntülenecek bilgileri içeren IEnumerable listesindeki özelliğin adı.dataTextField: The name of the property in the IEnumerable list that contains the information to display. Yukarıdaki örnekte name özelliği.In the example above, the name property.
  4. SelectedValues: seçili değerlerin listesi.selectedValues: The list of selected values.

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.In the example above, the MultiSelectCountry method passes a null value for the selected countries, so no countries are selected when the UI is displayed. Aşağıdaki kod MultiSelectCountry görünümünü işlemek için kullanılan Razor işaretlemesini gösterir.The following code shows the Razor markup used to render the MultiSelectCountry view.

@{

    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 .The HTML helper ListBox method used above take two parameters, the name of the property to model bind and the MultiSelectList containing the select options and values. Yukarıdaki ViewBag.YouSelected kodu, formu gönderdiğinizde seçtiğiniz ülkelerin değerlerini göstermek için kullanılır.The ViewBag.YouSelected code above is used to display the values of the countries you selected when you submit the form. MultiSelectCountry yönteminin HTTP POST yüklemesini inceleyin.Examine the HTTP POST overload of the MultiSelectCountry method.

[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.The ViewBag.YouSelected dynamic property contains the selected countries, obtained for the Countries entry in the form collection. 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.In this version the GetCountries method is passed a list of the selected countries, so when the MultiSelectCountry view is displayed, the selected countries are selected in the UI.

Seçili jQuery eklentisi ile bir select öğesi kullanımı kolay yapılıyorMaking a Select Element Friendly with the Harvest Chosen jQuery Plugin

Seçili jQuery EKLENTISI bir HTML <eklenebilir ve Kullanıcı dostu BIR kullanıcı arabirimi oluşturmak için> öğesini seçin.The Harvest Chosen jQuery plugin can be added to an HTML <select> element to create a user friendly UI. Aşağıdaki görüntüler, MultiSelectCountry görünümü ile Seçili jQuery eklentisini gösterir.The images below demonstrate the Harvest Chosen jQuery plugin with MultiSelectCountry view.

Aşağıdaki iki görüntüde Kanada seçilidir.In the two images below, Canada is selected.

Yukarıdaki görüntüde Kanada seçilidir ve bir x içerir ve seçimi kaldırmak için tıklayabilirsiniz.In the image above, Canada is selected, and it contains an x you can click to remove the selection. Aşağıdaki görüntüde Kanada, Çin ve Japonya seçili gösterilmektedir.The image below shows Canada, China, and Japan selected.

Seçili jQuery eklentisinin takılarakHooking up the Harvest Chosen jQuery Plugin

JQuery ile ilgili bazı deneyiminiz varsa aşağıdaki bölüm daha kolay olur.The following section is easier to follow if you have some experience with jQuery. Daha önce jQuery kullanmadıysanız, aşağıdaki jQuery öğreticilerden birini denemek isteyebilirsiniz.If you have never used jQuery before, you might want to try one of the following jQuery tutorials.

Seçilen eklenti, Bu öğreticiye eşlik eden başlatıcı ve tamamlanmış örnek projelere dahildir.The Chosen plugin is included in the starter and completed sample projects that accompany this tutorial. Bu öğreticide, yalnızca Kullanıcı arabirimine bağlamak için jQuery kullanmanız gerekir.For this tutorial you will only need to use jQuery to hook it up to the UI. Seçili jQuery eklentisini bir ASP.NET MVC projesinde kullanmak için şunları yapmanız gerekir:To use the Harvest Chosen jQuery plugin in an ASP.NET MVC project, you must:

  1. Seçili eklentiyi GitHub'dan indirin.Download Chosen plugin from github. Bu adım sizin için gerçekleştirildi.This step has been done for you.
  2. Seçilen klasörü ASP.NET MVC projenize ekleyin.Add the Chosen folder to your ASP.NET MVC project. Önceki adımda indirdiğiniz seçili olan eklentiden varlıkları seçili klasöre ekleyin.Add the assets from the Chosen plugin you downloaded in the previous step to the Chosen folder. Bu adım sizin için gerçekleştirildi.This step has been done for you.
  3. Seçili eklentiyi DropDownList veya ListBox HTML Yardımcısı 'na bağlama.Hook up the chosen plugin to the DropDownList or ListBox HTML helper.

Seçili eklenti MultiSelectCountry görünümüne yerleştirdim.Hooking up the Chosen Plugin to the MultiSelectCountry View.

Views\home\multiselectcountry.exe dosyasını açın ve Html.ListBoxbir htmlAttributes parametresi ekleyin.Open the Views\Home\MultiSelectCountry.cshtml file and add an htmlAttributes parameter to the Html.ListBox. Ekleyeceğiniz parametre seçim listesi için bir sınıf adı içerir (@class = "chzn-select").The parameter you will add contains a class name for the select list(@class = "chzn-select"). Tamamlanan kod aşağıda gösterilmektedir:The completed code is shown below:

<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.In the code above, we are adding the HTML attribute and attribute value class = "chzn-select". Önceki @ karakteri Razor görünüm altyapısıyla hiçbir şey yapmaz.The @ character preceding class has nothing to do with the Razor view engine. class bir C# anahtar sözcüktür.class is a C# keyword. C#anahtar sözcükler, @ önek olarak içermedikleri sürece tanımlayıcı olarak kullanılamaz.C# keywords cannot be used as identifiers unless they include @ as a prefix. Yukarıdaki örnekte, @class geçerli bir tanımlayıcıdır , ancak sınıf bir anahtar sözcüktür.In the example above, @class is a valid identifier but class is not because class is a keyword.

Seçili/seçili. jQuery. js ve Seçili/seçili. css dosyalarına başvuruları ekleyin.Add references to the Chosen/chosen.jquery.js and Chosen/chosen.css files. Seçili/seçili. jQuery. js ve seçilen eklentinin işlev düzeyini uygular.The Chosen/chosen.jquery.js and implements the functionally of the Chosen plugin. Seçili/seçili. css dosyası stili sağlar.The Chosen/chosen.css file provides the styling. Bu başvuruları Views\home\multiselectcountry.exe. cshtml dosyasının altına ekleyin.Add these references to the bottom of the Views\Home\MultiSelectCountry.cshtml file. Aşağıdaki kod, seçilen eklentiye nasıl başvurulacağını gösterir.The following code shows how to reference the Chosen plugin.

<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.Activate the Chosen plugin using the class name used in the Html.ListBox code. Yukarıdaki örnekte, sınıf adı chzn-select.In the example above, the class name is chzn-select. Views\home\multiselectcountry.exe. cshtml görünüm dosyasının altına aşağıdaki satırı ekleyin.Add the following line to the bottom of the Views\Home\MultiSelectCountry.cshtml view file. Bu satır seçili eklentiyi etkinleştirir.This line activates the Chosen plugin.

<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.The following line is the syntax to call the jQuery ready function, which selects the DOM element with class name chzn-select.

$(".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.The wrapped set returned from the above call then applies the chosen method (.chosen();), which hooks up the Chosen plugin.

Aşağıdaki kod, tamamlanan Views\home\multiselectcountry.exe. cshtml görünüm dosyasını gösterir.The following code shows the completed Views\Home\MultiSelectCountry.cshtml view file.

@{

    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.Run the application and navigate to the MultiSelectCountry view. Ülke eklemeyi ve silmeyi deneyin.Try adding and deleting countries. Ö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.The sample download provided also contains a MultiCountryVM method and view that implements the MultiSelectCountry functionality using a view model instead of a ViewBag.

Sonraki bölümde, ASP.NET MVC scafkatlama mekanizmasının DropDownList Yardımcısı ile nasıl çalıştığını göreceksiniz.In the next section you'll see how the ASP.NET MVC scaffolding mechanism works with the DropDownList helper.