Archive

Archive for May, 2014

Set the Default Button for a Login control

Hi all,

try this example to Set the Default Button for a Login control

When the user’s logging in, we want to make sure the default button is set to submit the login form, but since the login button is generated by a template, we don’t have an ID to work with. The solution is to reference the parent control’s id (the <asp:Login> control), then add the $, then add the ID of the actual control. You can find the ID of the control by viewing source if you’re not sure

<asp:Panel ID="panelLogin" runat="server" DefaultButton="Login1$LoginButton">
<asp:Login ID="Login1" runat="server" />
</asp:Panel> 

Hope this helps

Good Luck.

Categories: ASP.Net

Create Dynamic Google chart in ASP.NET

May 17, 2014 1 comment

Hi all,

try this example to Create Dynamic Google chart in ASP.NET

In this example i will Use Northwind database with “Suppliers” table.

1) Open VS 2008 and create a new website

2) Add new ASPX Page


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart'] });
</script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'Default.aspx/GetData',
data: '{}',
success:
function (response) {
drawVisualization(response.d);
}
});
})
function drawVisualization(dataValues) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Column Name');
data.addColumn('number', 'Column Value');

for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
}
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, { title: "Google Chart demo" });
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="visualization" style="width: 600px; height: 350px;">
</div>
</form>
</body>
</html>

3) In Code behind add the following code :


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;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}

[WebMethod]
public static List<Data> GetData()
{
SqlConnection conn = new SqlConnection("Data Source=.;Initial Catalog=Northwind;Integrated
Security=True");
DataSet ds = new DataSet();
DataTable dt = new DataTable();
conn.Open();
string cmdstr = "select top 5 Country, COUNT(CompanyName) [Total Suppliers] from [Suppliers] group by
Country";
SqlCommand cmd = new SqlCommand(cmdstr, conn);
SqlDataAdapter adp = new SqlDataAdapter(cmd);
adp.Fill(ds);
dt = ds.Tables[0];
List<Data> dataList = new List<Data>();
string cat="";
int val=0;
foreach (DataRow dr in dt.Rows)
{
cat=dr[0].ToString();
val=Convert.ToInt32( dr[1]);
dataList.Add(new Data(cat, val));
}
return dataList;
}
}
public class Data
{
public string ColumnName = "";
public int Value = 0;

public Data(string columnName, int value)
{
ColumnName = columnName;
Value = value;
}
} 

Hope this helps

Good Luck.

Categories: ASP.Net, Javascript

Get Day Name from JQuery DatePicker

May 17, 2014 1 comment

Hi all,

try this example to Get Day Name from JQuery DatePicker


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( ".datepicker" ).datepicker({
altField: ".alternate",
altFormat: "DD"
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>Date:
<asp:TextBox ID="TextBox1" runat="server" CssClass="datepicker"></asp:TextBox>&nbsp;
<asp:TextBox ID="TextBox2" runat="server" CssClass="alternate"></asp:TextBox></p>
</div>
</form>
</body>
</html>

Hope this helps

Good Luck.

Categories: ASP.Net, Jquery

Calculate Age from Selected Date in AJAX Calender Extender Using Javascript

May 9, 2014 1 comment

Dear all,

try this example to Calculate age from Selected Date in AJAX Calender Extender Using Javascript


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TextBox ID="txtDate" runat="server" />
<asp:ImageButton runat="server" ID="imgPopup" ImageUrl="~/Images/Calendar.png" />
<cc1:CalendarExtender ID="CalendarExtender1" OnClientDateSelectionChanged="DateSelectionChanged"
runat="server" TargetControlID="txtDate" PopupButtonID="imgPopup" />
<script type="text/javascript">
function DateSelectionChanged(e) {
var today = new Date();
var dob = e.get_selectedDate();
var months = (today.getMonth() - dob.getMonth() + (12 * (today.getFullYear() - dob.getFullYear())));
alert("Your age: " + Math.round(months / 12));
}
</script>
</form>
</body>
</html>

Hope this helps

Good Luck.

Categories: AJAX, ASP.Net, Javascript