DOTNET

Tuesday, February 24, 2015

JQUERY TIPS (jQuery selectors)

ID Selector

$(document).ready(function () {
$('#divClassusingID').css('background', '#000567');
});

Code:

<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#divClassusingID').css('background', '#000567');
});
</script>

<div>
<div id="divClassusingID" style="width:400px">
adf
</div>
</div>

Class Selector

$(document).ready(function () {
$('.divClassusingID').css('background', '#000567');
});

Code:

<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.divClassusingID').css('background', '#000567');
});
</script>

<div>
<div class="divClassusingID" style="width:400px">
hi uday
</div>
</div>

Element Selector

$(document).ready(function () {
$('.divClassusingID').css('background', '#000567');
});

Code:

<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('p').css('font-size', '40px');
});
</script>

<div>
<div class="divClassusingID" style="width:400px">
<p> hi uday</p>
</div>
</div>

output:

Apply css to Form Selector

<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('form *').css('color', '#FF99CC');
});
</script>
</head>

<body>
<form id="form1" runat="server">
<div>
<div class="divClassusingID" style="width:400px">
<p> hi uday</p>
adsfasf
</div>
</div>
</form>
</body>

Select Multiple Elements

$('p, div').css('color', '#FF99CC');

It applys css color to paragraph and div

<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('p, div').css('color', '#FF99CC');
});

</script>
</head>

<body>
<form id="form1" runat="server">
<div>
<div class="divClassusingID" style="width:400px">
<p> hi uday</p>
<div> hi uday</div>
</div>
</div>
</form>
</body>

</html>

Output:

The parent > child (immediate child element)

$(document).ready(function () {
$('div > p').css('color', '#FF99CC');

})

It is going to apply styles to paragraph in div.

<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('div > p').css('color', '#FF99CC');
});

</script>
</head>

<body>
<form id="form1" runat="server">
<div class="divClassusingID" style="width:400px">
<p> hi uday </p>
<p>hi uday </p>
<p>hi uday </p>
<p>hi uday </p>
</div>
<p>hi uday </p>
</form>
</body>

</html>

Output:

:first and :last

:first : It will find the first element.
:last : It will find the last element

<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('p:first').css('color', '#FF99CC');
$('p:last').css('color', '#FF99CC');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="divClassusingID" style="width:400px">
<p> hi uday </p>
<p>hi uday </p>
<p>hi uday </p>
<p>hi uday </p>
</div>
<p>hi uday </p>
</form>
</body>

output:

:even and :odd
Now, i want to find out the even and odd elements.
Here , the index starts with 0.

<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('tr:even').css('color', '#FF99CC');
$('tr:odd').css('color', '#0000FF');
});
</script>
</head>

<body>
<form id="form1" runat="server">
<div class="divClassusingID" style="width:400px">
<table>
<tr><td>hi uday</td></tr>
<tr> <td>hi uday</td> </tr>
<tr> <td>hi uday</td> </tr>
<tr><td>hi uday</td> </tr>
<tr><td>hi uday</td></tr>
<tr><td>hi uday</td></tr>
<tr> <td>hi uday</td></tr>
<tr><td>hi uday</td> </tr>
</table>
</div>
</form>

Output:

show and hide methods()

javascript code:

<script type="text/javascript">
$(document).ready(function () {
$('#visibleoncheck').hide();
$('#CheckBox1').live('click', function () {
if ($(this).is(':checked')) {
$('#visibleoncheck').show();

} else {
$('#visibleoncheck').hide();
}
});
});

</script>

<div>
<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td>Hi Uday </td>
<td>HI</td>
</tr>
<tr>
<td>Check Required</td>
<td> <asp:CheckBox ID="CheckBox1" runat="server" /></td>
</tr>
<tr id="visibleoncheck">
<td>Visible</td>
<td><asp:Label ID="Label2" runat="server" Text="Visible "></asp:Label></td>
</tr>
</table>

</div>

output:

Create Date Picker Custom Control

File->New->Website.

Delete the default UserControl1.cs

Add New Item

Add New Class.

write the following code in class as shown below.

DatePicker.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.SessionState;
using AjaxControlToolkit;

namespace DatePickerLibrary
{
[DefaultProperty("Text")]
[ToolboxData("<{0}:DatePicker runat=server></{0}:DatePicker>")]
public class DatePicker : WebControl
{
private string _day;
private string _month;
private string _year;
private TextBox _dateTxt;
private Image _calendarImage;
private ToolkitScriptManager _scriptManager;
private CalendarExtender _calendarExtender;
private RegularExpressionValidator _expressionValidator;

public DatePicker()
{
_dateTxt = new TextBox();
_calendarImage = new Image();
_calendarExtender = new CalendarExtender();
_scriptManager = new ToolkitScriptManager();
_expressionValidator = new RegularExpressionValidator();
}

public string ImageUrl { get; set; }
public string DateStyle { get; set; }
public string ImageStyle { get; set; }
public string ID { get; set; }

public string DateClientID
{
get
{
return _dateTxt.ClientID;
}
}

public string Text
{
get
{
return _dateTxt.Text;
}
set
{
_dateTxt.Text = value;
}
}

public bool Enabled
{
get
{
return _dateTxt.Enabled;
}
set
{
_dateTxt.Enabled = value;
}
}

public bool Visible
{
get
{
return _dateTxt.Visible;
}
set
{
_dateTxt.Visible = value;
}
}

public string Format
{
get
{
return _calendarExtender.Format;
}
set
{
_calendarExtender.Format = value;
if (Format == "dd/MM/yyyy")
{
_expressionValidator.ValidationExpression = @"(^^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2})$|^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2}\s([0-1]\d|[2][0-3])\:[0-5]\d\:[0-5]\d)$)";
}
else if (Format == "dd.MM.yyyy")
{
_expressionValidator.ValidationExpression = @"(^(((0[1-9]|[12][0-8])[\.](0[1-9]|1[012]))|((29|30|31)[\.](0[13578]|1[02]))|((29|30)[\.](0[4,6,9]|11)))[\.](19|[2-9][0-9])\d\d$)|(^29[\.]02[\.](19|[2-9][0-9])(00|04|0 12|16|20|24|2 32|36|40|44|4 52|56|60|64|6 72|76|80|84|8 92|96)$)";
}
else if (Format == "dd-MM-yyyy")
{
_expressionValidator.ValidationExpression = @"(^(((0[1-9]|[12][0-8])[\-](0[1-9]|1[012]))|((29|30|31)[\-](0[13578]|1[02]))|((29|30)[\-](0[4,6,9]|11)))[\-](19|[2-9][0-9])\d\d$)|(^29[\-]02[\-](19|[2-9][0-9])(00|04|0 12|16|20|24|2 32|36|40|44|4 52|56|60|64|6 72|76|80|84|8 92|96)$)";
}
else if (Format == "MM/dd/yyyy")
{
_expressionValidator.ValidationExpression = @"(^(((0[1-9]|[12][0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|0 12|16|20|24|2 32|36|40|44|4 52|56|60|64|6 72|76|80|84|8 92|96)$)";
}
}
}
public DateTime Value
{
set
{
_dateTxt.Text = value.ToString(Format);
}
get
{
if (Format == "dd/MM/yyyy")
{
_year = _dateTxt.Text.Split('/')[2];
_month = _dateTxt.Text.Split('/')[1];
_day = _dateTxt.Text.Split('/')[0];
}
else if (Format == "dd.MM.yyyy")
{
_year = _dateTxt.Text.Split('.')[2];
_month = _dateTxt.Text.Split('.')[1];
_day = _dateTxt.Text.Split('.')[0];
}
else if (Format == "dd-MM-yyyy")
{
_year = _dateTxt.Text.Split('-')[2];
_month = _dateTxt.Text.Split('-')[1];
_day = _dateTxt.Text.Split('-')[0];
}

else if (Format == "MM/dd/yyyy")
{
_year = _dateTxt.Text.Split('/')[2];
_month = _dateTxt.Text.Split('/')[0];
_day = _dateTxt.Text.Split('/')[1];
}
else if (Format == "MM.dd.yyyy")
{
_year = _dateTxt.Text.Split('.')[2];
_month = _dateTxt.Text.Split('.')[0];
_day = _dateTxt.Text.Split('.')[1];
}
else if (Format == "MM-dd-yyyy")
{
_year = _dateTxt.Text.Split('-')[2];
_month = _dateTxt.Text.Split('-')[0];
_day = _dateTxt.Text.Split('-')[1];
}
return new DateTime(Convert.ToInt32(_year), Convert.ToInt32(_month), Convert.ToInt32(_day));
}
}

protected override void OnInit(EventArgs e)
{
_dateTxt.ID = ID;
if (Page.IsPostBack)
{
_dateTxt.Text = HttpContext.Current.Request.Form[this._dateTxt.ID];
}
_dateTxt.CssClass = DateStyle;
_calendarImage.CssClass = "";
_scriptManager.ID = "ScriptManager";
_calendarImage.ID = ID + "CalendarImage";
_calendarImage.ImageUrl = ImageUrl;
_calendarImage.CssClass = ImageStyle;
_expressionValidator.ID = ID + "ExpressionValidator";
_expressionValidator.ErrorMessage = "Invalid";
_expressionValidator.SetFocusOnError = true;
_expressionValidator.ControlToValidate = ID;
_scriptManager.ID = "ScriptManager";
_calendarExtender.ID = ID + "CalendarExtender";
base.OnInit(e);
}

protected override void CreateChildControls()
{
_calendarExtender.PopupButtonID = ID + "CalendarImage";
_calendarExtender.Format = this.Format;
_calendarExtender.TargetControlID = ID;

this.Controls.Clear();
this.Controls.Add(_dateTxt);
this.Controls.Add(_expressionValidator);
this.Controls.Add(_calendarExtender);

this.Controls.Add(_calendarImage);
this.EnableViewState = true;
base.CreateChildControls();
}

protected override void RenderContents(HtmlTextWriter output)
{
_dateTxt.RenderControl(output);
_calendarImage.RenderControl(output);
_calendarExtender.RenderControl(output);
_expressionValidator.RenderControl(output);
}
}
}

Now, Build the solution the dll , will be generated. and then add new project- and add reference of this dll to it.

Go to Tool Box and Add the dll as shown below.

Click on Browse Button and add the dll

Click on Open Button, and then Click on Ok Button.

Now, create a new web form and drag this control.

.aspx code

<%@ Register Assembly="DatePickerLibrary" Namespace="DatePickerLibrary" TagPrefix="cc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="scripts/Jquery.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<cc1:DatePicker ID="DatePicker1" ImageUrl="Images/calendar.png" Format="dd/MM/yyyy" runat="server" />
</div>
</form>
</body>

</html>

Add a folder with Images and Add any calender Image to It.

Now, see the output

jQUERY ZOOM IN AND ZOOM OUT

Download the jquery file.

panzoom.js

And design the form as follows:

<head>
<title>Panzoom for jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
background: #F5FCFF;
color: #333666;
}

section {
text-align: center;
margin: 50px 0;
}

.panzoom-parent {
border: 2px solid #333;
}

.panzoom-parent .panzoom {
border: 2px dashed #666;
}

.buttons {
margin: 40px 0 0;
}

.panzoom {
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
</style>
<script src="../test/libs/jquery.js"></script>
<script src="../dist/jquery.panzoom.js"></script>
</head>

<body>
<section>
<div class="parent">
<div class="panzoom">
<iframe src="http://www.w3schools.com" width="100%" height="100%"></iframe>
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range">
<button class="reset">Reset</button>
</div>
<script>
(function () {
var $section = $('section').first();
$section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset")
});
})();
</script>
</section>
</body>

Output:

jQuery Accordion using ASP.NET

Download the following js files from the below url.

http://jqueryui.com/download/

Default.aspx:

$(function () {

$("#accordion").accordion();

});

</script>

<body>

<asp:Repeater ID="rptAccordianDetails" runat="server">

<h3>

<%# Eval("Countryname") %></h3>

<p>

<%# Eval("CountryDescription") %>

</p>

</ItemTemplate>

</asp:Repeater>

</div>

</form>

</body>

.cs page

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

BindData();

}

public void BindData()

{

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbtaskallocation"].ToString());

SqlCommand cmd = new SqlCommand("select * from country", con);

SqlDataAdapter da = new SqlDataAdapter(cmd);

DataSet ds = new DataSet();

da.Fill(ds);

rptAccordianDetails.DataSource = ds;

rptAccordianDetails.DataBind();

}

Output:

Monday, February 23, 2015

How to Create a Custom Control in C sharp

File->New->Website.

Delete the default UserControl1.cs

Add New Item

Add New Class.

write the following code in class as shown below.

public class TextBoxControl:TextBox
{

Color waterMarkColor = Color.Gray;
Color forecolor;
Font font;
string waterMarkText = "Any Text";

public TextBoxControl()
{
base.Text = this.waterMarkText;
this.forecolor = this.ForeColor;
this.ForeColor = this.waterMarkColor;
this.font = this.Font;

this.TextChanged += new EventHandler(txtTextBox_TextChanged);
this.KeyPress += new KeyPressEventHandler(txtTextBox_KeyPress);
this.LostFocus += new EventHandler(txtTextBox_TextChanged);
}

void txtTextBox_TextChanged(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(this.Text))
{
this.ForeColor = this.forecolor;
this.Font = this.font;
}
else
{
this.TextChanged -= new EventHandler(txtTextBox_TextChanged);
base.Text = this.waterMarkText;
this.TextChanged += new EventHandler(txtTextBox_TextChanged);
this.ForeColor = this.waterMarkColor;
}
}
void txtTextBox_KeyPress(object sender, KeyPressEventArgs e)
{
string str = base.Text.Replace(this.waterMarkText, "");
this.TextChanged -= new EventHandler(txtTextBox_TextChanged);
this.Text = str;
this.TextChanged += new EventHandler(txtTextBox_TextChanged);
}

[Browsable(true)]
[Category("Extended Properties")]
[Description("sets Watermark color")]
[DisplayName("WaterMark Color")]
public Color WaterMarkColor
{
get
{
return this.waterMarkColor;
}
set
{
this.waterMarkColor = value;
base.OnTextChanged(new EventArgs());
}
}
[Browsable(true)]
[Category("Extended Properties")]
[Description("sets TextBox text")]
[DisplayName("Text")]
/// <summary>
/// Property to get Text at runtime(hides base Text property)
/// </summary>
public new string Text
{
get
{
//required for validation for Text property
return base.Text.Replace(this.waterMarkText, string.Empty);
}
set
{
base.Text = value;
}
}

/// <summary>
/// Property to set/get Watermark text at design/runtime
/// </summary>
[Browsable(true)]
[Category("Extended Properties")]
[Description("sets Watermark Text")]
[DisplayName("WaterMark Text")]
public string WaterMarkText
{
get
{
return this.waterMarkText;
}
set
{
this.waterMarkText = value;
base.OnTextChanged(new EventArgs());
}
}
}