winform tablelayoutpanel_idea checkout

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

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

Jetbrains全系列IDE稳定放心使用

WebGrid Helper with Check All Checkboxes

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

Introduction:


          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.  

Description:

          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')
                {
                    document.write(
                        unescape(
                        ""%3Cscript src='http://ajax.proxy.ustclug.org/ajax/libs/jquery/1.6.2/jquery.min.js'%3E%3C/script%3E""
                        )
                     );
                }

                (function(){

                    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)
                                     $('#allCheckBox').attr('checked',true);
                                else
                                    $('#allCheckBox').attr('checked',false);

                            });

                        });
                    }

                })();
            </script>";

                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,

Person.cs

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

IPersonService.cs

        public interface IPersonService
        {
            IList<Person> GetPersons();
        }

PersonServiceImp.cs

        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 + "@a.com" });
            }
        }

HomeController.cs

        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());
            }

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

        }

Index.cshtml

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

        <style>
        .selected-row{
            background: none repeat scroll 0 0 #CACAFF;
            color: #222222;
        }
        .not-selected-row{
            background: none repeat scroll 0 0 #FFFFFF;
            color: #000000;
        }
        .grid
        {
            border-collapse: collapse;
        }
        .grid th,td
        {
            padding : 10px;
            border: 1px solid #000;
        }
        </style>

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

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

WebGridCheWebGridCheckAllCheckBox.png

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

WebGridCheWebGridCheckAllSelectedRows.png

Summary:

          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. 

转载于:https://www.cnblogs.com/dufu/p/3960942.html

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/185585.html原文链接:https://javaforall.cn

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

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

(0)
blank

相关推荐

  • java初学者教程

    前言:随着互联网的飞速发展,越来越多的人选择互联网行业,那么java也就成了其中之一的选择,而且选择java的人还挺多,为什么呢?容易入门,好找工作,工资相对还可以.那么相对应的市场上培训java的就很多了,各种培训机构,自学网站,学习平台,我们应该怎么选择呢,下面我就给大家介绍一个:HOW2J,目录一:介绍二:模块化教学三:工具材料代码可直接下载…

  • DHCP简单配置-CISCO

    DHCP简单配置-CISCO

  • solidworks怎样绘制螺纹_螺纹孔怎么画

    solidworks怎样绘制螺纹_螺纹孔怎么画1随便画一个圆柱2在原来的地方画一个一摸一样的圆(草图2)3在特征选项卡中点击曲线-螺旋线/涡状线4设置螺距和圈数,画螺旋线5建立一个基准面,第一参考是点,第二参考是曲线6在刚才

  • 有线如何通过笔记本无线共享上网_笔记本插网线怎么共享WiFi

    有线如何通过笔记本无线共享上网_笔记本插网线怎么共享WiFi半年前搬到新住的地方,由于条件限制,房间就一根网线,我跟我老婆两人晚上都需要用到电脑,于是萌生了通过路由器来达到多机器同时上网,不过最后失败。当时没想起大学时代经常干的事情(学校寝室上网要账号,账号都要钱的):通过一台电脑上网,所有其他电脑都通过这台机器上网。半年之后的今天,由于工作实在需要网络,这种条件下,让我想起了曾经的这么一回事,因此我在想,既然能通过有线达到共享网络,无线原理应该一样吧…

  • 如何线上推广引流?百度知道实现精准引流

    如何线上推广引流?百度知道实现精准引流百度如何做推广精准吸粉的,百度知道的4个精准吸粉技巧!众所周知,百度是全球最大的中文搜索引擎,百度一下你就知道,这是我们非常熟悉的广告词之一。因为它的流量非常大,所以很多人都在那里努力分流。但是一部分人吸粉的效果不太好。为什么呢?因为流量的准确性不够!百度的百度知道是一个精准的流量池,这样我们就可以正确地把流量流到自己的平台上。你知道百度是如何引流的吗?今天,兴棋就给大家分享一下它的玩法,希望对大家有所帮助!一、做百度知道引流的两大优点!1、是能够带来直接的流量,如果你回答的问题能够带上链接,那

  • SQLserver字符串转日期_sqlserver合并字符串

    SQLserver字符串转日期_sqlserver合并字符串框架用的是mybatis。sqlserver:CONVERT(datetime,#{transaction_date_time},20), mysql: DATE_FORMAT(#{transaction_date_time},’%Y-%m-%d%H:%i:%S’)

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号