2017-02-10 2 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> 
        } 

Rendus HTML est:Comment puis-je remplir cases à cocher en utilisant aide 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> 

Je veux que la case à cocher au lieu de ce menu déroulant. Peux-tu m'aider? Ci-dessous la case nécessaire

<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> 

Répondre

0

Pawan, parce que vous demandez une case à cocher au lieu d'un menu déroulant, je vais vous montrer comment faire cela comme une entrée utilisateur mutuellement exclusifs. Comme je suis en train de faire mutuellement exclusif, vous devriez utiliser des boutons radio au lieu de cases à cocher. Vous pouvez utiliser des cases à cocher avec jquery ou écrire une méthode d'extension pour rendre le contrôle de l'utilisateur mutuellement exclusif, mais je vais vous montrer un moyen plus simple.

Controller:

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

Vue:

@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>