Mvc2 Jquery CheckBoxList 实例

HtmlHelper Extensions codes:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Mvc;

namespace MvcAppValidate.Extensions
{
    public static class HtmlHelperExtensions
    {
        #region extensions for checkboxlist
        public static MvcHtmlString CheckBoxList(this HtmlHelper helper, string name, IDictionary<string, string> items)
        {

            return CheckBoxList(helper, name, items, null, null);

        }
        public static MvcHtmlString CheckBoxList(this HtmlHelper helper, string name, IDictionary<string, string> items, IDictionary<string, object> checkboxHtmlAttributes)
        {

            return CheckBoxList(helper, name, items, null, checkboxHtmlAttributes);

        }
        public static MvcHtmlString CheckBoxList(this HtmlHelper helper, string name, IDictionary<string, string> items, IEnumerable<string> selectedValues)
        {

            return CheckBoxList(helper, name, items, selectedValues, null);

        }
        public static MvcHtmlString CheckBoxList(this HtmlHelper helper, string name, IDictionary<string, string> items, IEnumerable<string> selectedValues, IDictionary<string, object> checkboxHtmlAttributes)
        {

            var selectListItems = from i in items

                                  select new SelectListItem

                                             {

                                                 Text = i.Key,

                                                 Value = i.Value,

                                                 Selected = (selectedValues != null && selectedValues.Contains(i.Value))

                                             };

 

            return CheckBoxList(helper, name, selectListItems, checkboxHtmlAttributes);

        }
        public static MvcHtmlString CheckBoxList(this HtmlHelper helper, string name, IEnumerable<SelectListItem> items)
        {

            return CheckBoxList(helper, name, items, null);

        }
        public static MvcHtmlString CheckBoxList(this HtmlHelper helper, string name, IEnumerable<SelectListItem> items, IDictionary<string, object> checkboxHtmlAttributes)
        {

            var output = new StringBuilder();

 

            foreach (var item in items)
            {

                output.Append("<div class=/"fields/"><label>");

                var checkboxList = new TagBuilder("input");

                checkboxList.MergeAttribute("type", "checkbox");

                checkboxList.MergeAttribute("name", name);

                checkboxList.MergeAttribute("value", item.Value);

 

                // Check to see if it’s checked

                if (item.Selected)

                    checkboxList.MergeAttribute("checked", "checked");

 

                // Add any attributes

                if (checkboxHtmlAttributes != null)

                    checkboxList.MergeAttributes(checkboxHtmlAttributes);

 

                checkboxList.SetInnerText(item.Text);

                output.Append(checkboxList.ToString(TagRenderMode.SelfClosing));

                output.Append("&nbsp; " + item.Text + "</label></div>");

            }

 

            return MvcHtmlString.Create(output.ToString());

        }
        #endregion
        #region extensions for CreateHyperLink
        public static MvcHtmlString A(this HtmlHelper helper, string target, string text)
        {
            return MvcHtmlString.Create(String.Format("<a href='{0}'>{1}</a>", target, text));
        }

        #endregion
    }
}

Jquery demo controller codes:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcAppEntities;
using System.Text;

namespace MvcAppDemoCly.Controllers
{
    public class JqueryDemoController : Controller
    {
        //
        // GET: /JqueryDemo/

        public ActionResult JqueryCheckboxList()
        {
            AjaxWcfService.AjaxEnabledWcfService wcfService = new AjaxWcfService.AjaxEnabledWcfService();
            var userItems = wcfService.GetUsers();
            ViewData["userItems"] = new SelectList(userItems, "ID", "Email");

            return View();
        }

        [HttpPost]
        public string GetCheckedUserIds()
        {
            var checkedUserIds = Request.Form["SelectedUserIds"];
            //ViewData["CheckedUserIds"] = checkedUserIds;
            //return View(@"JqueryCheckboxList");
            return checkedUserIds;
        }

}

 

 

View page code:

 

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcAppDemoCly.Models.User>>" %>

<%@ Import Namespace="MvcAppValidate.Extensions" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    JqueryCheckboxList
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% var users = ViewData["userItems"] as SelectList; %>
    <h2>
        JqueryCheckboxList</h2>
    <% if (ViewData["CheckedUserIds"] != null)
       {%>
    <%: "You had selected UserIds:" + ViewData["CheckedUserIds"]%>
    <%} %>
    <%: Html.CheckBox("chkAll")%><%: Html.Label("secect all/unselect all") %>
    <%using (Html.BeginForm("GetCheckedUserIds", "JqueryDemo", FormMethod.Post))
      { %>
    <% if (users != null)
       { %>
    <%: Html.CheckBoxList("chkUsers", users)%>
    <%} %>
    <%--<input type="submit" value="Submit" />--%>
    <input type="button" value="Submit" οnclick="javascript:GetSelectedUserIds();" />
    <%} %>
    <%: Html.A("http://www.163.com","163 com") %>
    <script language="javascript" type="text/javascript">

        $(document).ready(function () {
            $("#chkAll").click(function () {
                //alert($(this).attr("checked"));
                var checked = $(this).attr("checked");
                $("input:checkbox[name='chkUsers']").each(function () {
                    //alert(checked);
                    $(this).attr("checked", checked);
                });
            });

            //$("a").click(ClickATag);
        });
        function GetSelectedUserIds() {
            $.ajax({
                type: "post",
                datatype: "text",
                data: { "SelectedUserIds": GetCheckedValues() },
                url: "/JqueryDemo/GetCheckedUserIds",
                success: function (res) {
                    alert(res);
                }
            });
        }

        function GetCheckedValues() {
            var userIdStr = "";
            //alert($("input:checkbox[name='chkUsers']").length);

            $("input:checkbox[name='chkUsers']").each(function () {
                if ($(this).attr("checked"))
                    userIdStr += $(this).val() + ",";
            });
            userIdStr = userIdStr.substring(0, userIdStr.length - 1);
            return userIdStr;
        }
        //    function ClickATag() {
        //        alert("You are clicking a A tag");
        //    }
    </script>
</asp:Content>