如何使用 HTML 帮助程序填充复选框

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

我想要复选框而不是此下拉列表。你能帮我吗？下面是必需的复选框

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

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>

相关内容

最新更新

热门标签：