如何使用HTML帮助程序填充Checkbox

时间:2017-02-10 09:17:13

标签: asp.net-mvc html-helper

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

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

我想要复选框而不是此Dropdown。你能帮我吗?以下是必需的Checkbox

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

1 个答案:

答案 0 :(得分:0)

Pawan,因为您要求复选框而不是下拉列表,我将向您展示如何将此作为互斥用户输入。因为,我做互斥,你应该使用单选按钮而不是复选框。您可以使用带有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>