如何在MVC4 Razor中使用CheckBoxList和DropdownList

时间:2013-10-19 17:06:33

标签: asp.net-mvc asp.net-mvc-4 razor html-helper checkboxlist

我必须使用@ Html.CheckBoxListFor<>或@ Html.DropdownListFor<>。我对如何在View whild中使用这些帮助器类感到困惑,我使用List进行模型绑定。

将List绑定到CheckBoxList和DropdownList的正确和最简单的方法是什么。

在模型中:

public class SampleViewModel
    {
        public IEnumerable<Responsible> AvailableResponsibles { get; set; }
        public IEnumerable<Responsible> SelectedResponsibles { get; set; }
        public PostedResponsibles PostedResponsibles { get; set; }
        Responsible objResponsible = new Responsible();
        public SampleViewModel GetResponsiblesInitialModel()
        {
            //setup properties
            var model = new SampleViewModel();
            var selectedResponsibles = new List<Responsible>();

            //setup a view model
            model.AvailableResponsibles = objResponsible.GetAll().ToList();
            model.SelectedResponsibles = selectedResponsibles;
            return model;
        }
    }
public class Responsible
    {
        //Integer value of a checkbox
        public int Id { get; set; }

        //String name of a checkbox
        public string Name { get; set; }

        //Boolean value to select a checkbox
        //on the list
        public bool IsSelected { get; set; }

        //Object of html tags to be applied
        //to checkbox, e.g.:'new{tagName = "tagValue"}'
        public object Tags { get; set; }

        public IEnumerable<Responsible> GetAll()
        {
            return new List<Responsible> {
                              new Responsible {Name = "Apple", Id = 1 },
                              new Responsible {Name = "Banana", Id = 2},
                              new Responsible {Name = "Cherry", Id = 3},
                              new Responsible {Name = "Pineapple", Id = 4},
                              new Responsible {Name = "Grape", Id = 5},
                              new Responsible {Name = "Guava", Id = 6},
                              new Responsible {Name = "Mango", Id = 7}
                            };
        }

    }

    public class PostedResponsibles
    {
        //this array will be used to POST values from the form to the controller
        public string[] ResponsibleIds { get; set; }
    }

并且查看是:

<tr>
                <td>
                    @Html.LabelFor(model=>model.Responsible)
                </td>
                <td>
                  @Html.CheckBoxListFor(model => model.PostedResponsibles.ResponsibleIds,
                                  model => model.AvailableResponsibles,
                                  Responsible => Responsible.Id,
                                  Responsible => Responsible.Name,
                                  model => model.SelectedResponsibles)

                </td>
            </tr>

目前我正在使用Nuget Packege但它有点令人困惑且难以使用。请将其他任何其他内容用于实现此目的。

2 个答案:

答案 0 :(得分:2)

  1. 使用包管理器步骤安装包

    Install-Package MvcCheckBoxList
    
  2. 添加 Fruit.cs

    namespace CheckBoxListForApp.Models
    {
      public class Fruit
      {
          public int Id { get;set;}
          public string Name { get;set; }  
          public bool IsSelected{get;set;}
          public object Tags { get;set;}
      }
    }
    
  3. 添加 FruitViewModel.cs

    using System.Collections.Generic;
    namespace CheckBoxListForApp.Models
    {
      public class FruitViewModel
      {
        public IEnumerable<Fruit> AvailableFruits { get; set; }
        public IEnumerable<Fruit> SelectedFruits { get; set; }
        public PostedFruits PostedFruits { get; set; }
      }
    }
    
  4. 添加已发布的.Fruits.cs

    namespace CheckBoxListForApp.Models
    {
        /// <summary>
        /// for Helper class to make posting back selected values easier
        /// </summary>
        public class PostedFruits
        {
            //this array will be used to POST values from the form to the controller
            public string[] FruitIds { get; set; }
        }
    }
    
  5. 添加 HomeController.cs

    using System.Collections.Generic;
    using System.Globalization;
    using System.Linq;
    using System.Web.Mvc;
    using CheckBoxListForApp.Models;
    
    namespace CheckBoxListForApp.Controllers
    {
        public class HomeController : Controller
        {
    
            [HttpGet]
            public ActionResult Index()
            {
                return View(GetFruitsInitialModel());
            }
    
    
            [HttpPost]
            public ActionResult Index(PostedFruits postedFruits)
            {
                return View(GetFruitsModel(postedFruits));
            }
    
            private FruitViewModel GetFruitsModel(PostedFruits postedFruits)
            {
    
                var model = new FruitViewModel();
                var selectedFruits = new List<Fruit>();
                var postedFruitIds = new string[0];
                if (postedFruits == null) postedFruits = new PostedFruits();
    
                // if a view model array of posted fruits ids exists
                // and is not empty,save selected ids
                if (postedFruits.FruitIds != null && postedFruits.FruitIds.Any())
                {
                    postedFruitIds = postedFruits.FruitIds;
                }
    
                // if there are any selected ids saved, create a list of fruits
                if (postedFruitIds.Any())
                {
                  selectedFruits = FruitRepository.GetAll()
                   .Where(x => postedFruitIds.Any(s => x.Id.ToString().Equals(s)))
                   .ToList();
                }
    
    
                model.AvailableFruits = FruitRepository.GetAll().ToList();
                model.SelectedFruits = selectedFruits;
                model.PostedFruits = postedFruits;
                return model;
            }
    
            private FruitViewModel GetFruitsInitialModel()
            {
    
                var model = new FruitViewModel();
                var selectedFruits = new List<Fruit>();
    
    
                model.AvailableFruits = FruitRepository.GetAll().ToList();
                model.SelectedFruits = selectedFruits;
                return model;
            }
        }
    }
    
  6. 添加 FruitRepository.cs

    using System.Collections.Generic;
    using System.Linq;
    
    namespace CheckBoxListForApp.Models
    {
        /// <summary>
        /// work as fruit repository
        /// </summary>
        public static class FruitRepository
        {
            /// <summary>
            /// for get fruit for specific id
            /// </summary>
            public static Fruit Get(int id)
            {
                return GetAll().FirstOrDefault(x => x.Id.Equals(id));
            }
    
            /// <summary>
            /// for get all fruits
            /// </summary>
            public static IEnumerable<Fruit> GetAll()
            {
                return new List<Fruit> {
                                  new Fruit {Name = "Apple", Id = 1 },
                                  new Fruit {Name = "Banana", Id = 2},
                                  new Fruit {Name = "Cherry", Id = 3},
                                  new Fruit {Name = "Pineapple", Id = 4},
                                  new Fruit {Name = "Grape", Id = 5},
                                  new Fruit {Name = "Guava", Id = 6},
                                  new Fruit {Name = "Mango", Id = 7}
                                };
            }
        }
    }
    
  7. 添加 Index.cshtml

    @using MvcCheckBoxList.Model
    @model CheckBoxListForApp.Models.FruitViewModel
    
    @{
        ViewBag.Title = "Home Page";
    }
    
    <section class="checkBoxListFor">
        <p>
            <label>Please Select Fruits:</label>
            @using (Html.BeginForm("Index", "Home", FormMethod.Post))
            {
                @Html.CheckBoxListFor(model => model.PostedFruits.FruitIds,
                                      model => model.AvailableFruits,
                                      fruit => fruit.Id,
                                      fruit => fruit.Name,
                                      model => model.SelectedFruits,
                                      Position.Horizontal)
                <input class="green" type="submit" 
                          value="POST to Controller" />
            }
        </p>
    </section>
    

答案 1 :(得分:0)

这取决于您的UI要求。如果你需要一个下拉列表,那就使用它。

CheckBoxList不是开箱即用的助手,它是一个自定义助手。

您可以在此处Code Project

找到帮助程序(CheckBoxList)的更多详细信息

关于下拉请参阅MSDN。它可以通过多种方式重载。

以下是可用的ASP.NET MVC helpers