Microsoft Technology: Create online poll system with percentage graphs using asp.net

Here I will explain how to create online poll system with percentage graphs using asp.net.

Here in my application I used only simple table concepts to display graphs I didn’t used any graph tools let see how I implemented

Design your aspx page like this

.ButtonStyle {

background-color: #9EBEDE;

color: Black;

font-family: verdana;

font-size: 8pt;

}

.BarStyle

{

background-color: #996633;

}

.TablePollResultFoot

{

background-color: #B0C4DE;

font-weight: bold;

height:30px;

font-size: 13px;

}

.gridview

{

border: solid 1px #CCCCCC;

width: 100%;

}

</style>

</head>

<body>

<div>

<tr>

<b><span style="color:#FF6600"> Online Poll Example with XML </span> </b>

</td>

</tr>

<tr>

</tr>

<tr>

<td >

<b>which one is best browser?</b>

</td>

</tr>

<tr>

</tr>

<tr>

<asp:RadioButtonList ID="radVote" runat="server">

<asp:ListItem>Mozilla</asp:ListItem>

<asp:ListItem>Internet Explorer</asp:ListItem>

<asp:ListItem>Google Chrome</asp:ListItem>

</asp:RadioButtonList>

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<asp:Button ID="btnVote" runat="server" Text="Vote"

onclick="btnVote_Click" CssClass="ButtonStyle" />

<asp:Button ID="btnResult" runat="server" Text="Reult" CssClass="ButtonStyle"

onclick="btnResult_Click" />

<br />

<asp:Label ID="lblStatus" runat="server" />

</td>

</tr>

<tr>

<asp:GridView runat="server" ID="gvResult" BackColor="White" CellPadding="4"

EnableModelValidation="True" AutoGenerateColumns="false"

onrowdatabound="gvResult_RowDataBound" EmptyDataText="No one submit votes">

<asp:TemplateField HeaderText="Options" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="20%">

<asp:Label ID="lblOptions" runat="server" Text='<%#Bind("OPTION_NAME") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Votes" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="10%">

<asp:Label ID="lblVotes" runat="server" Text='<%#Bind("VOTES") %>' ></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="%" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="15%">

<asp:Label ID="lblpercentage" runat="server" Text='<%#Bind("PERCENTAGE","{0:f2}") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Bar" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="55%" >

</table>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

After that add XML file to your application and give name as "Votes.xml" intially xml file like this root element is compulsory for XML files that’s why I added CommentInformation in XML file that root element in XML file.

<?xml version="1.0" encoding="utf-8"?>

</VotesInformation>

After that add this namespace in codebehind

using System.Xml;

using System.Drawing;

After that write the following code in code behind

int Count = 0;

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnVote_Click(object sender, EventArgs e)

{

if (radVote.SelectedItem != null)

{

InsertVotes(radVote.SelectedItem.ToString());

}

else

{

lblStatus.ForeColor = Color.Red;

lblStatus.Text = "Please select at least one option to vote for poll";

}

protected void InsertVotes(string theVote)

{

try

{

XmlDocument xmldoc = new XmlDocument();

xmldoc.Load(Server.MapPath("Votes.xml"));

XmlElement parentelement = xmldoc.CreateElement("Vote");

XmlElement votechoice = xmldoc.CreateElement("Choice");

votechoice.InnerText = theVote;

parentelement.AppendChild(votechoice);

xmldoc.DocumentElement.AppendChild(parentelement);

xmldoc.Save(Server.MapPath("Votes.xml"));

lblStatus.ForeColor = Color.Green;

lblStatus.Text = "Thank you for your vote.";

}

catch

{

lblStatus.Text = "Sorry, unable to process request. Please try again.";

}

protected void readXML()

{

int mCount=0;

int iCount=0;

int gCount=0;

XmlTextReader xmlreader = new XmlTextReader(Server.MapPath("Votes.xml"));

DataSet ds = new DataSet();

ds.ReadXml(xmlreader);

xmlreader.Close();

if (ds.Tables.Count>0)

{

int dscount = ds.Tables[0].Rows.Count;

for (int i = 0; i < dscount; i++)

{

if (ds.Tables[0].Rows[i][0].ToString() == "Mozilla")

mCount++;

else if (ds.Tables[0].Rows[i][0].ToString() == "Internet Explorer")

iCount++;

else if (ds.Tables[0].Rows[i][0].ToString() == "Google Chrome")

gCount++;

}

double theTotal;

theTotal = mCount + iCount + gCount;

double mPercent;

double oPercent;

double gPercent;

mPercent = (mCount / theTotal) * 100;

oPercent = (iCount / theTotal) * 100;

gPercent = (gCount / theTotal) * 100;

double totalpercentage = mPercent + oPercent + gPercent;

string[] votescount = { mCount.ToString(), iCount.ToString(), gCount.ToString() };

string[] array = { mPercent.ToString(), oPercent.ToString(), gPercent.ToString() };

DataTable dt = new DataTable();

dt.Columns.Add("OPTION_NAME");

dt.Columns.Add("VOTES");

dt.Columns.Add("PERCENTAGE");

int count = radVote.Items.Count;

Count = count + 1;

for (int i = 0; i < count; i++)

{

dt.Rows.Add();

dt.Rows[i]["OPTION_NAME"] = radVote.Items[i].ToString();

dt.Rows[i]["VOTES"] = votescount[i];

dt.Rows[i]["PERCENTAGE"] = array[i];

}

dt.Rows.Add("Total", theTotal, totalpercentage);

gvResult.DataSource = dt;

gvResult.DataBind();

}

else

{

gvResult.DataSource = null;

gvResult.DataBind();

}

protected void butResults_Click(object sender, EventArgs e)

{

readXML();

}

int cnt = 0;

protected void gvResult_RowDataBound(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

cnt++;

Label lblpercent = (Label)e.Row.FindControl("lblpercentage");

HtmlTable tblpercent = (HtmlTable)e.Row.FindControl("tblBar");

tblpercent.Width = lblpercent.Text+"%";

if (lblpercent.Text == "0")

{

tblpercent.Visible = false;

}

if (cnt == Count)

{

e.Row.CssClass = "TablePollResultFoot";

}

foreach (TableCell tc in e.Row.Cells)

{

tc.Attributes["style"] = "border-color:#CCCCCC";

}

Demo

Microsoft Technology

Menus

Sunday, February 3, 2013

Create online poll system with percentage graphs using asp.net

No comments:

Post a Comment