Code Snippets: Jan 11, 2012

Wednesday, January 11, 2012

Chart Control in asp.net 4.0

Chart Control in asp.net 4.0

Introduction : In this article i will show you how to add Chart control in asp.net 4.0 and how to bind chart control in asp.net with Dataset .You just need to drag the chart control in aspx page so following assembly will be register in your web page and corresponding httpHandlers will be added in web config too .

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

Code For Bind Chart Control In asp.net : I have following complete html and code behind code for binding Chart control in c# asp.net. I have here created Bar chart control in asp.net.

HTML Code For Chart Control In asp.net :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChartControl.aspx.cs" Inherits="HamidSite.ChartControl" %>

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Chart ID="ChartControlTest" runat="server" Width="706px" Height="367px">
            <Series>
                <asp:Series Name="SeriesTest" IsValueShownAsLabel="true" Legend="LegendTest" ChartArea="ChartAreaTest"
                    XValueMember="MonthName" YValueMembers="Amount">
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartAreaTest" Area3DStyle-LightStyle="Simplistic" AlignmentStyle="AxesView"
                    BorderDashStyle="Solid" Area3DStyle-Enable3D="true">
                </asp:ChartArea>
            </ChartAreas>            
        </asp:Chart>
    </div>
    </form>
</body>
</html>

C# Code For Chart Control in asp.net :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

namespace HamidSite
{
    public partial class ChartControl : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindChartControl();
            }
        }
        private void BindChartControl()
        {
            DataSet Ds = GetDataSet("Select MonthName , Amount from OrderTable");
            ChartControlTest.DataSource = Ds; 
            ChartControlTest.DataBind(); 
        }
        private DataSet GetDataSet(string Query)
        {
            DataSet Ds = new DataSet();
            try
            {
                string strCon = @"Data Source=ServerName;Initial Catalog=Test;Integrated Security=True;";  //Conntection String
                SqlConnection Con = new SqlConnection(strCon);
                SqlDataAdapter Da = new SqlDataAdapter(Query, Con);
                Da.Fill(Ds);
            }
            catch (Exception) { }
            return Ds;
        }
    }
}

Set hidden field's value on button's click in Jquery

Set hidden field's value on button's click in Jquery

Introduction : In this i will show you how to set value of hidden field's value on button click usinng Jquery . It is very easy to set value of hidden field's value using Jquery .I have written two way to set value of hidden field using Jquery . In first way you can write code in $(document).ready() function and second you can directly assign to on click of button .

HTML Code for Set hidden field's value on button's click in Jquery :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryValidation.aspx.cs" Inherits="HamidSite.JqueryValidation" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript"  >
        $(document).ready(function () {
            $("#submit1").click(function () {
                $('#hiddenTest').val('Test-2');
                alert($('#hiddenTest').val());
            });
        });
  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
            <input type="hidden" id="hiddenTest" value="" />
            <input id="submit" type="submit" value="test-1" onclick="$('#hiddenTest').val('Test-1');alert($('#hiddenTest').val());" runat="server" />            
            <input id="submit1" type="submit" value="test-2"  runat="server" />
    </div>
    </form>
</body>
</html>

Pages

Wednesday, January 11, 2012

Chart Control in asp.net 4.0

Set hidden field's value on button's click in Jquery