1. 程式人生 > >ASP.NET MVC 3 CheckBoxList 的使用

ASP.NET MVC 3 CheckBoxList 的使用

ted nat bag builder 字符 checked lec sce list

在以前的 ASP.NET MVC 中可以直接使用 CheckBoxList,但後來不知道什麽原因在 MVC 中移除了 CheckBoxList,所以默認情況下 ASP.NET MVC 3 中是沒有 CheckBoxList 的,所以我們不能直接使用 @Html.CheckBoxList。今天我們通過自己動手來實現 ASP.NET MVC 3 中的 CheckBoxList 功能。

首先,讓我們看看我例子中兩個表之間的關系,如下圖:

ZTag 表中保存的是文章分類,ZArticle 表中 Tag 字段為文章分類,為"1,3,4"這種類型,因為一篇文章可能屬於好幾種分類,如它同時屬於 jQuery、CSS等。

直接給出 CheckBoxList 擴展的實現,如下:

public static MvcHtmlString CheckBoxList(this HtmlHelper helper, 
    string name, IEnumerable<SelectListItem> items)
{
    var str = new StringBuilder();
    str.Append(@"<div class=""checkboxlist"">");

    foreach (var item in items)
    {
        str.Append(@"<div class=""list""><input type=""checkbox"" name=""");
        str.Append(name);
        str.Append("\" value=\"");
        str.Append(item.Value);
        str.Append("\"");

        if (item.Selected)
            str.Append(@" checked=""chekced""");

        str.Append(" />");
        str.Append(item.Text);
        str.Append("</div>");
    }

    str.Append("</div>");

    return MvcHtmlString.Create(str.ToString());
}

關於擴展 ASP.NET MVC HtmlHelper 類在 ASP.NET MVC 3 分頁這篇文章中就已經使用過了,並不難理解。其中我們使用到了 ASP.NET MVC 3 中自帶的類 SelectListItem ,接下來完成 IEnumerable<SelectListItem> 初始化:

public static IEnumerable<SelectListItem> GetTags
    (ZArticle article, IEnumerable<ZTag> tags)
{
    var result = new List<SelectListItem>();

    foreach (var tag in tags)
    {
        var item = new SelectListItem
        {
            Text = tag.Name,
            Value = tag.ID.ToString(),
            Selected = article.Tag.Split(‘,‘).Contains(tag.ID.ToString())
        };

        result.Add(item);
    }

    return result;
}

我將方法放在了 Common 類中,方法分別傳遞了 ZArticle 對象和 IEnumberable<ZTag> 對象,目的是遍歷 IEnumerable<ZTag> 來初始化 IEnumerable<SelectListItem> 對象,以便將 ZTag 表字段分別輸出為 checkbox。最後只需要調用 GetTags() 方法,如在文章編輯 Action 中調用如下:

public ActionResult Edit(string id)
{
    var article = db.Articles.Single(a => a.UrlName == id);

    var tags = db.Tags.OrderByDescending(m => m.ID);
    var tag = Common.GetTags(article, tags);
    ViewBag.Tags = tag;

    return View(article);
}

最後在 View 中調用如下:

@Html.CheckBoxList("tag", (IEnumerable<SelectListItem>)ViewBag.Tags)

結果如下圖所示:

ASP.NET MVC 中我們要記住 Don‘t Do IT Yourself 原則,獲取 CheckBoxList 選中值非常簡單,接收選中值方法如下:

public ActionResult Edit(string id, string s, 
            ZArticle article,string[] tag)
{
    article.UrlName = article.UrlName;
    var model = db.Articles.Single(m => m.UrlName == id);
    model.Tag = string.Join(",", tag);  //文章所屬類別
    return View(model);
}

tag 即為我們調用 @Html.CheckBoxList 時使用的 "tag",也就是 CheckBox 的"name" 值,tag 即為 CheckBoxList 的選中值,最後使用 Join 方法將它轉換為字符串。如下圖:

到這裏我們就實現了 ASP.NET MVC 3 中 CheckBoxList 的輸出,並成功獲取到 CheckBoxList 選中值,希望對在使用 ASP.NET MVC 3 但不知道如何使用 CheckBoxList 的朋友能帶來一點幫助。

ASP.NET MVC 3 CheckBoxList 的使用