winform tablelayoutpanel_idea checkout

winform tablelayoutpanel_idea checkoutWebGridHelperwithCheckAllCheckboxesTuesday,September13,2011ASP.NETASP.NETMVCHtmlHelperjQueryWebMatrixIntroduction:WebGridhelperisoneofthehelperofASP.NETWebPages(We…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。


WebGrid Helper with Check All Checkboxes

Tuesday, September 13, 2011ASP.NET ASP.NET MVC Html Helper jQuery WebMatrix


          WebGrid helper is one of the helper of ASP.NET Web Pages(WebMatrix) technology included in ASP.NET MVC 3. This helper is very easy to use and makes it very simple to display tabular data in your web page. In addition to displaying tabular data, it also supports formatting, paging and sorting features. But WebGrid helper does not allow you to put raw html(like checkbox) in the header. In this article, I will show you how you can put html element(s) inside the WebGrid helper’s header using a simple trick. I will also show you how you can add the select or unselect all checkboxes feature in your web page using jQuery and WebGrid helper.  


          To make it easy to add this feature in any of your web page, I will create an extension method for the WebGrid class. Here is the extension method, 

        public static IHtmlString GetHtmlWithSelectAllCheckBox(this WebGrid webGrid, string tableStyle = null,
string headerStyle = null, string footerStyle = null, string rowStyle = null,
	string alternatingRowStyle = null, string selectedRowStyle = null,
	string caption = null, bool displayHeader = true, bool fillEmptyRows = false,
	string emptyRowCellValue = null, IEnumerable<WebGridColumn> columns = null,
	IEnumerable<string> exclusions = null, WebGridPagerModes mode = WebGridPagerModes.All,
	string firstText = null, string previousText = null, string nextText = null,
	string lastText = null, int numericLinksCount = 5, object htmlAttributes = null,
	string checkBoxValue = "ID")

                var newColumn = webGrid.Column(header: "{}",
                format: item => new HelperResult(writer =>
                    writer.Write("<input class=\"singleCheckBox\" name=\"selectedRows\" value=\""
                    + item.Value.GetType().GetProperty(checkBoxValue).GetValue(item.Value, null).ToString()
                    + "\" type=\"checkbox\" />"

                var newColumns = columns.ToList();
                newColumns.Insert(0, newColumn);

                var script = @"<script>
                if (typeof jQuery == 'undefined')
                        ""%3Cscript src=''%3E%3C/script%3E""


                    window.setTimeout(function() { initializeCheckBoxes();  }, 1000);
                    function initializeCheckBoxes(){    

                        $(function () {

                            $('#allCheckBox').live('click',function () {

                                var isChecked = $(this).attr('checked');                        
                                $('.singleCheckBox').attr('checked', isChecked  ? true: false);
                                $('.singleCheckBox').closest('tr').addClass(isChecked  ? 'selected-row': 'not-selected-row');
                                $('.singleCheckBox').closest('tr').removeClass(isChecked  ? 'not-selected-row': 'selected-row');


                            $('.singleCheckBox').live('click',function () {

                                var isChecked = $(this).attr('checked');
                                $(this).closest('tr').addClass(isChecked  ? 'selected-row': 'not-selected-row');
                                $(this).closest('tr').removeClass(isChecked  ? 'not-selected-row': 'selected-row');
                                if(isChecked && $('.singleCheckBox').length == $('.selected-row').length)




                var html = webGrid.GetHtml(tableStyle, headerStyle, footerStyle, rowStyle,
                                        alternatingRowStyle, selectedRowStyle, caption,
                                        displayHeader, fillEmptyRows, emptyRowCellValue,
                                        newColumns, exclusions, mode, firstText,
                                        previousText, nextText, lastText,
                                        numericLinksCount, htmlAttributes

                return MvcHtmlString.Create(html.ToString().Replace("{}",
                                            "<input type='checkbox' id='allCheckBox'/>") + script);


          This extension method accepts the same arguments as the WebGrid.GetHtml method except that it takes an additionalcheckBoxValue parameter. This additional parameter is used to set the values of checkboxes. First of all, this method simply insert an additional column(at position 0) into the existing WebGrid. The header of this column is set to {}, because WebGrid helper always encode the header text. At the end of this method, this text is replaced with a checkbox element.  

          In addition to emitting tabular data, this extension method also emit some javascript in order to make the select or unselect all checkboxes feature work. This method will add a css class selected-row for rows which are selected and not-selected-row css class for rows which are not selected. You can use these CSS classes to style the selected and unselected rows.

          You can use this extension method in ASP.NET MVC, ASP.NET Web Form and ASP.NET Web Pages(Web Matrix), but here I will only show you how you can leverage this in an ASP.NET MVC 3 application. Here is what you might need to set up a simple web page,


        public class Person
            public int ID { get; set; }
            public string Name { get; set; }
            public string Email { get; set; }
            public string Adress { get; set; }


        public interface IPersonService
            IList<Person> GetPersons();


        public class PersonServiceImp : IPersonService
            public IList<Person> GetPersons()
                return _persons;

            static IList<Person> _persons = new List<Person>();

            static PersonServiceImp()
                for (int i = 5000; i < 5020; i++)
                    _persons.Add(new Person { ID = i, Name = "Person" + i, Adress = "Street, " + i, Email = "a" + i + "" });


        public class HomeController : Controller
            private IPersonService _service;

            public HomeController()
                : this(new PersonServiceImp())

            public HomeController(IPersonService service)
                _service = service;

            public ActionResult Index()
                return View(_service.GetPersons());

            public ActionResult Index(int[] selectedRows)
                return View(_service.GetPersons());



        @model IEnumerable<WebGridHelperCheckAllCheckboxes.Models.Person>
            ViewBag.Title = "Index";
            Layout = "~/Views/Shared/_Layout.cshtml";
            var grid = new WebGrid(source: Model);

            background: none repeat scroll 0 0 #CACAFF;
            color: #222222;
            background: none repeat scroll 0 0 #FFFFFF;
            color: #000000;
            border-collapse: collapse;
        .grid th,td
            padding : 10px;
            border: 1px solid #000;

        @using (Html.BeginForm())
                    tableStyle: "grid", checkBoxValue: "ID",
                    columns: grid.Columns(
                        grid.Column(columnName: "Name"),
                        grid.Column(columnName: "Email"),
                        grid.Column(columnName: "Adress")
                    <input type="submit" value="Save" />

          Now just run this application. You will find the following screen,  


          Select all or some rows of your table and submit them. You can get all the selected rows of your table as , 



          In ASP.NET MVC 3, you can utilize some helpers of ASP.NET Web Pages(WebMatrix) technology, which can be used for common functionalities. WebGrid helper is one of them. In this article, I showed you how you can add the select or unselect all checkboxes feature in ASP.NET MVC 3 application using WebGrid helper and jQuery. I also showed you how you can add raw html in WebGrid helper’s header. Hopefully you will enjoy this article too. A sample application is attached. 


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。


【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...



  • 像素和毫米的换算_1500像素等于多少毫米


  • srgb的伽马值_srgb模式和标准模式


  • 基于jsp和基于web的区别_java发送短信


  • python算法(2)兔子产子(斐波那切数列)「建议收藏」


  • 探秘X86架构CPU流水线[通俗易懂]

    探秘X86架构CPU流水线[通俗易懂]导读:CPU是如何工作的呢?一条指令执行需要多长时间?当我们讨论某个新款处理器拥有12级流水线还是18级流水线,甚至是更深的31级流水线时,这到些都意味着什么呢?作为程序员,CPU在我们的工作中扮演了核心角色,因此了解处理器内部的工作方式对程序员来说不无裨益。  CPU…

  • 安卓系统文件夹及其文件解析[通俗易懂]