Web user control development-star rating control, web --

Web user control development-star rating control, web --

This article shares a simple and easy-to-use star rating control.

I. paste several test images first:

II. Implementation of star rating controls:

RatingBar. ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="RatingBar.ascx.cs" Inherits="UserControls.Controls.RatingBar" %>

<style type="text/css">

        .rating {

            float:left;

        }

        .rating:not(:checked) > input {

            position:absolute;

            top:-9999px;

            clip:rect(0,0,0,0);

        }

        .rating:not(:checked) > label {

            float:right;

            width:1em;

            padding:0 .1em;

            overflow:hidden;

            white-space:nowrap;

            cursor:pointer;

            font-size:150%;

            line-height:1.2;

            color:#ddd;

            text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);

        }

        .rating:not(:checked) > label:before {

            content: '★ ';

        }

        .rating > input:checked ~ label {

            color: #f70;

            text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);

        }

        .rating:not(:checked) > label:hover,

        .rating:not(:checked) > label:hover ~ label {

            color: gold;

            text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);

        }

        .rating > input:checked + label:hover,

        .rating > input:checked + label:hover ~ label,

        .rating > input:checked ~ label:hover,

        .rating > input:checked ~ label:hover ~ label,

        .rating > label:hover ~ input:checked ~ label {

            color: #ea0;

            text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);

        }

        .rating > label:active {

            position:relative;

            top:2px;

            left:2px;

        }

    </style>

<span class="rating">

    <input type="radio" id="star5" name="rating" value="5" runat="server" /><label for="<%=this.ClientID + "_star5"%>"

Title = "5 points"> 5 stars </label>

    <input type="radio" id="star4" name="rating" value="4" runat="server" /><label for="<%=this.ClientID + "_star4"%>"

Title = "4 points"> 4 stars </label>

    <input type="radio" id="star3" name="rating" value="3" runat="server" /><label for="<%=this.ClientID + "_star3"%>"

Title = "3 points"> 3 stars </label>

    <input type="radio" id="star2" name="rating" value="2" runat="server" /><label for="<%=this.ClientID + "_star2"%>"

Title = "2 points"> 2 stars </label>

    <input type="radio" id="star1" name="rating" value="1" runat="server" /><label for="<%=this.ClientID + "_star1"%>"

Title = "1 point"> 1 star </label>

</span>

RatingBar. ascx. cs:

using System;

namespace UserControls.Controls

{

    public partial class RatingBar : System.Web.UI.UserControl

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            SyncInterfaceByReadOnlyProperties();

        }

        public Grade Value

        {

            get

            {

                if (star5.Checked)

                {

                    return Grade.Five;

                }

                else if (star4.Checked)

                {

                    return Grade.Four;

                }

                else if (star3.Checked)

                {

                    return Grade.Three;

                }

                else if (star2.Checked)

                {

                    return Grade.Two;

                }

                else if (star1.Checked)

                {

                    return Grade.One;

                }

                else

                {

                    return Grade.Zero;

                }

            }

            set

            {

                star5.Checked = false;

                star4.Checked = false;

                star3.Checked = false;

                star2.Checked = false;

                star1.Checked = false;

                switch (value)

                {

                    case Grade.Five:

                        star5.Checked = true;

                        break;

                    case Grade.Four:

                        star4.Checked = true;

                        break;

                    case Grade.Three:

                        star3.Checked = true;

                        break;

                    case Grade.Two:

                        star2.Checked = true;

                        break;

                    case Grade.One:

                        star1.Checked = true;

                        break;

                    default:

                        break;

                }

            }

        }

        public bool ReadOnly

        {

            set

            {

                this.ViewState["ReadOnly"] = value;

                SyncInterfaceByReadOnlyProperties();

            }

            get

            {

                object obj = this.ViewState["ReadOnly"];

                if (obj == null)

                {

                    return false;

                }

                else

                {

                    return (bool)obj;

                }

            }

        }

        private void SyncInterfaceByReadOnlyProperties()

        {

            if (this.ReadOnly)

            {

                star1.Attributes.Add("disabled", "disabled");

                star2.Attributes.Add("disabled", "disabled");

                star3.Attributes.Add("disabled", "disabled");

                star4.Attributes.Add("disabled", "disabled");

                star5.Attributes.Add("disabled", "disabled");

            }

            else

            {

                star1.Attributes.Remove("disabled");

                star2.Attributes.Remove("disabled");

                star3.Attributes.Remove("disabled");

                star4.Attributes.Remove("disabled");

                star5.Attributes.Remove("disabled");

            }

        }

    }

    public enum Grade

    {

        Zero = 0,

        One = 1,

        Two = 2,

        Three = 3,

        Four = 4,

        Five = 5

    }

}

3. demo of controls:

Assign a value to the RatingBar control:

RatingBar1.Value = Grade.Three;

Print the value of the RatingBar control:

ClientScript.RegisterStartupScript(this.GetType(), null, string.Format("<script>alert('{0}');</script>", RatingBar1.Value));

The ReadOnly attribute of the RatingBar control (inverse of the attribute value ):

RatingBar1.ReadOnly = !RatingBar1.ReadOnly;

What is the difference between a web custom control and a web user control?

I think a web user control is generated after a web custom control defines a mode. The latter is equivalent to an instance of the former, and the former is a class of the latter.

9. Differences Between Custom Controls and common WEB server controls

Light court!
The file extension of the user Control is. ascx. A user Control does not have the @ page command, but contains the @ Control
User Controls cannot run as independent files. They must be used only when they are added to the asp.net webpage, just like other controls.
The user control does not contain You can use the same XHTMl element and web server control on the user control as on the asp.net webpage.