@ HTML.dropdownlist와 동일한 체크 박스가 있습니까?

Question

새 게시물을 제출하는 사용자가 사전 정의 된 태그 중 일부를 해당 게시물과 연관시킬 수있는 간단한 블로그 응용 프로그램을 개발 중입니다. 예술이 나는이 목적을 위해 사용하고 싶은 정말 아닌 사용자가 선택할 수 있도록하는 것을 선호합니다, 그러나

: 현재

, 사용자는 드롭 다운리스트를 사용하여 여러 태그 (Ctrl 키를 잡고)을 선택할 수 있습니다 일련의 체크 박스에서 원하는 태그 또는 더 나은 버튼을 선택할 수 있습니다. 이 유사하게 :

등 상응하는 HTML 도우미는 존재 하는가?

내 작업 코드 드롭 다운 목록은 참조 용으로 아래에 있습니다.

보기 :

<div class="form-group"> 
     @Html.DropDownList("TagId", (MultiSelectList)ViewBag.Tags, new { multiple = "multiple" }) 
    </div> 

CONTROLLER :

_context 두 테이블, 포스트와 태그를 포함하는 내 데이터베이스입니다.

public ActionResult Add() 
    { 

     var tags = _context.Tags.Select(c => new { 
      TagID = c.TagID, 
      Type = c.Type 
     }).ToList(); 

     ViewBag.Tags= new MultiSelectList(tags, "TagID", "Type"); 

     return View(); 
    } 

    [AcceptVerbs("POST")] 
    public ActionResult Add() 
    { 

     string TagId= Request["TagID"]; 

     var tagids = TagId.Split(','); 

     foreach (var tagid in tagids) 
     { 
       var id = int.Parse(tagid); 
       Tag tag = _context.Tags.Where(ct => ct.TagId== id).First(); 
       post.Tags.Add(tag); 
     } 

     //Save our post 
     _context.Post.Add(post); 
     _context.SaveChanges(); 


     return View(); 
    } 

다른 제안 사항도 특히 감사드립니다. 특히 감사드립니다.

Answer 1

Stephen이 말했듯이, 솔루션에는 구운 것이 없습니다. 내가 과거에 한 일 (질문에 답한 다른 버전)입니다. 선택 항목이있는 클래스를 사용하여 사용자가 사용할 수있는 값의 목록과 사용자 상호 작용을 위해 선택한 값의 목록을 입력 상자로 사용하는 체크 박스를 사용합니다. 선택된 목록. 체크 박스를 버튼으로 스타일을 지정하고 jquery 비트를 추가하여 btn- 체크 박스 상호 작용을 수행 할 수 있습니다. 예 첨부 :

모델 :

public class TagModel 
{ 
    //well store our selection here 
    public IList<string> SelectedTags { get; set; } 
    //well load tags in here for selection 
    public IList<SelectListItem> AvailableTags { get; set; } 
    public TagModel() 
    { 
     SelectedTags = new List<string>(); 
     AvailableTags = new List<SelectListItem>(); 
    } 
} 

컨트롤러 :

public ActionResult Index() 
    { 
     //load up available tags and pass them to view 
     ViewBag.Tags = new TagModel { AvailableTags = GetTags() }; 
     return View(); 
    } 

    [HttpPost] 
    public ActionResult Index(TagModel mod) 
    { 
     if (ModelState.IsValid) 
     { 
      //mod.SelectedTags contains your data.... do something 
      return RedirectToAction("Weeeeeeeee"); 
     } 
     ViewBag.Tags = new TagModel { AvailableTags = GetTags() }; 
     return View(); 
    } 

Craptastic로드 기능 데모 목적 :

private IList<SelectListItem> GetTags() 
    { 
     return new List<SelectListItem> 
    { 
     new SelectListItem {Text = "cascading-style-sheet", Value = "1"}, 
     new SelectListItem {Text = "css-layout", Value = "2"}, 
     new SelectListItem {Text = "css-background-image", Value = "3"}, 
     new SelectListItem {Text = "css-attributes", Value = "4"}, 
    }; 
    } 

보기 :

@using (Html.BeginForm("Index", "Home")) 
{ 
    //get your tags from viewbag 
    foreach (var item in ViewBag.Tags.AvailableTags) 
    { 
     //make them look like buttons by placing our bootstrap or whatever framework btn class on div above 
     <div class="btn btn-danger chkBtn" > 
       <input type="checkbox" class="checkNope" autocomplete="off" name="SelectedTags" value="@item.Value" /> @item.Text 
     </div> 
    } 
    <div class="form-group text-center"> 
     <input type="submit" class="btn btn-primary" value="Submit" /> 
    </div> 
} 


@section scripts { 
    <script> 
     //when someone clicks a button then trigger the checkbox toggle and add/remove class toggle 
     $('.chkBtn').on('click', function() { 
      $(this).toggleClass('Weee'); 
      var checkbox = $(this).children('input[type="checkbox"]'); 
      checkbox.prop('checked', !checkbox.prop('checked')); 
     }) 
    </script> 
} 

,

CSS 재미 : (적어도 MVC 프레임 워크)

.checkNope { 
    -webkit-appearance: button !important; 
} 


.Weee { 
    background-color: #b5191f; 
}