2017-02-10 59 views
0
@if (Model.CurrentPage.TagPage != null) 
        { 

         @Html.DropDownListFor(x => x.CurrentPage.TagPage, Model.CurrentPage.TagPage, new { @class = "FormTextbox__Input search-filter-field", @name = "search-blog-name-value" }) 
        } 
        else 
        { 
         <select id="CurrentPage_TagList" name="search-blog-name-value" class="FormTextbox__Input search-filter-field"> 
          <option value="*">No Tag Page found</option> 
         </select> 
        } 

渲染HTML是:我如何填充使用複選框HTML幫助

<select class="FormTextbox__Input search-filter-field" id="CurrentPage_TagList" name="CurrentPage.TagPage"> 
    <option value="5G">5G</option> 
<option value="Connectivity">Connectivity</option> 
<option value="Digital transformation">Digital transformation</option> 
<option value="Radio system">Radio system</option> 
</select> 

我想要的複選框而不是此下拉。你能幫我嗎?下面是所需的複選框

<div data-action="checkbox-tray" class="hidden"> 
           <input type="checkbox" value="5G" />5G</br> 
           <input type="checkbox" value="Connectivity" />Connectivity</br> 
           <input type="checkbox" value="Digital transformation" />Digital transformation</br> 
           <input type="checkbox" value="Radio system" />Radio system</br> 
           <input type="checkbox" value="Mobile" />Mobile</br> 

          </div> 

回答

0

爬完,因爲您請求複選框,而不是一個下拉列表中,我會告訴你如何做到這一點作爲一個互斥的用戶輸入。因爲,我做的是互斥,你應該使用單選按鈕而不是複選框。你可以使用jQuery的複選框或寫一個擴展方法來使用戶控件互斥,但我會告訴你一個更簡單的方法。

控制器:

public class CurrentPage 
{ 
    public IList<SelectListItem> TagPage { get; set; } 
} 

public class MyStackOverflowModel 
{ 
    public CurrentPage CurrentPage = new CurrentPage(); 
} 

public class HomeController : Controller 
{ 
    [HttpPost] 
    public ActionResult Index3(MyStackOverflowModel myStackOverflowModel, string GetValue) 
    { 
     //GetValue contains selection 
     return View(myStackOverflowModel); 
    } 

    public ActionResult Index3() 
    { 
     List<SelectListItem> items = new List<SelectListItem>(); 
     items.Add(new SelectListItem { Text = "5G", Value = "5G" }); 
     items.Add(new SelectListItem { Text = "Connectivity", Value = "Connectivity" }); 
     items.Add(new SelectListItem { Text = "Digital transformation", Value = "Digital transformation", Selected = true }); 
     items.Add(new SelectListItem { Text = "Radio system", Value = "Radio system" }); 
     items.Add(new SelectListItem { Text = "Mobile", Value = "Mobile" }); 

     MyStackOverflowModel myStackOverflowModel = new MyStackOverflowModel(); 
     myStackOverflowModel.CurrentPage.TagPage = items; 
     //myStackOverflowModel.CurrentPage.TagPage = null; 

     return View(myStackOverflowModel); 
    } 

查看:

@model WebApplication9.Controllers.MyStackOverflowModel 
@{ 
    Layout = null; 
} 

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index3</title> 
</head> 
<body> 
    @using (Html.BeginForm()) 
    { 
     if (Model.CurrentPage.TagPage != null) 
     { 
      foreach (SelectListItem item in Model.CurrentPage.TagPage) 
      { 
       <div> 
        @Html.RadioButton("GetValue", item.Text) 
        @Html.Label(item.Text) 
       </div> 
      } 
     } 
     else 
     { 
      <select id="CurrentPage_TagList" name="search-blog-name-value" class="FormTextbox__Input search-filter-field"> 
       <option value="*"> No Tag Page found</option> 
      </select> 
     } 
     <input type="submit" value="Submit" /> 
    } 
</body> 
</html>