Wednesday 4 January 2012

Draw circle in asp.net


Introduction: Hello friends, in this article i will explain that how we can print the circle in asp.net.This article is very useful for the all the .net developer.In this article i am describbing that how we can use css at the server in the application. In this article i’ll explain how we can print  the circle using css in asp.net.
Implementation: create a new website add a page named print_circle.aspx. Drag and drop a label from the toolbox inside the  <body body tag at the .aspx page .  Below  i am giving the complete code for the html page and .cs page and the ascx page and ascx.cs page. 

Code for print_circle.aspx page

<head runat="server">
    <title>Circle</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
  <%--  here  i am placing a labelto print the circles --%>
        <asp:Label ID="lbl_circle" runat="server" Text=""></asp:Label>
    </div>
    </form>
</body>



Code for print_circle.aspx.cs page

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
// this namespace is necessary for the stringbuilder
using System.Text;

public partial class print_circle : System.Web.UI.Page
{
    //https://addons.mozilla.org/en-US/firefox/addon/firebug/
    // here am declaring a StringBuilder class
    StringBuilder str_solution = new StringBuilder();
    protected void Page_Load(object sender, EventArgs e)
    {
        // here m creating some classes in  style sheet which will print the circle.
        // you cam modify the color, size , height, width of the circles accoring to your need.
        // i am creating to classes inside this css
      
        str_solution.Append(@"<style type='text/css'>
                 .brown-circle {
                 display: block;
                 height: 20px;
                 width: 20px;
                 background-color: #B0641C;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                -khtml-border-radius: 10px;
                 border-radius: 10px;
               position:relative;
                 float:left;
                margin:0 5px 10px 0;
                 }
                .yellow-circle {
                 display: block;
                 height: 20px;
                 width: 20px;
                 background-color: #f7c639;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                -khtml-border-radius: 10px;
                 border-radius: 10px;
               position:relative;
                 float:left;
                margin:-8px 5px 10px 0;
                 }
           
                 </style>");

        // this loop will create 10 span tags using class=blue-circle
        for (int i = 0; i < 10; i++)
        {

            str_solution.Append("<span class=brown-circle></span>");
        }
        // here m using two <br/> tags for starting new line
        str_solution.Append("<br/><br/>");

        // this loop will create 10 span tags using class=yellow-circle
        for (int i = 0; i < 10; i++)
        {

            str_solution.Append("<span class=yellow-circle></span>");
        }
        // at last inside the lbl_circle label i am displaying all the code that will come inside the stringbuilder.
        // and this code will print the 10 blue circles and in the next line 10 yellow circles
        lbl_circle.Text = str_solution.ToString();

    }
}


See output in this image:



Conclision: In above code, I have been explained that how  we can print the circle using css in asp.net. This code is very helpful for every .net developer. Gud bye and take care friends.






2 comments:

  1. It is not working in my aspx page.

    ReplyDelete
    Replies
    1. Hello Nixon. I checked this in .apsx page. Its working perfectly. Please use try catch and see the which error in the exception, you are facing.

      Thanks
      Using Asp.Net

      Delete