Computer Programming

Sunday, September 6, 2015

September 06, 2015

JQuery TextBox validation when it empty

Introduction

In this article i will show you, how to check whether textbox is empty or not. If textbox is empty then get alert message on browser screen. I display this message in different style like if TextBox is display this message in different style like if TextBox is empty then get border color of TextBox is red or get alert message on screen. Both things we will do in the example on button click or focusout.

Description
In previous article i explained get radio button and CheckBox value, Show popup on page load, Text zoomIn or ZoomOut using JQuery.

Source code: If TextBox is empty then get alert message and cursor focus to TextBox

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function () {

$("#Button1").click(function () {
var textval = $("input[name='t1']").val();
if (textval == '')
alert("TextBox empty");
$("#Text1").focus();

});

})
</script>
</head>
<body>

Enter Name : <input id="Text1" type="text" value="" name="t1" /><br/>
<input id="Button1" type="button" value="validate" />

</body>
</html>

Source Code : If Textbox is empty and user want to focus out the box

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function () {
$("#Text1").focusout(function () {
var textval = $("input[name='t1']").val();
if (textval == '')
alert("TextBox empty");
$("#Text1").focus();
});

})
</script>
</head>
<body>
Enter Name : <input id="Text1" type="text" value="" name="t1" /><br/>
<input id="Button1" type="button" value="validate" />

</body>
</html>

Source Code : If TextBox is empty then change the border color of TextBox

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function () {

//$("#Button1").click(function () {
$("#Text1").focusout(function () {
var textval = $("input[name='t1']").val();
if (textval == '')
alert("TextBox empty");
//$("#Text1").focus();
$("#Text1").css("border-color", "red");
});
//});

})
</script>
</head>
<body>
Enter Name : <input id="Text1" type="text" value="" name="t1" /><br/>
<input id="Button1" type="button" value="validate" />
</body>
</html>

ASP.NET JQUERY

September 06, 2015

Retrieve selected Radio button and checkbox value using JQuery

Introduction
In this article i will show you, how to get the value of radio button and checkbox using JQuery. First of all in this article i will get the control after then check the selected control. If selected then retrieve the value of it. Let take a simple example
Description
In previous article i explained TextBox example in JQuery, Accept only numbers JQuery Validation. So lots of example cover in JQuery.

Source code for Radio Button

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="radioandcheck.aspx.cs" Inherits="radioandcheck" %>

<!DOCTYPE html>
<html>
<head>

<title>jQuery Get Selected Radio Button Value</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#getv").click(function () {
var radioValue = $("input[name='gender']:checked").val();
if (radioValue) {
alert("Your are a - " + radioValue);
}
});

});
</script>
</head>
<body> <form id="form1" runat="server">
<h4>Please select your gender.</h4>
<p>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</p>
<p><input type="button" value="Get Value" id="getv"></p>
</form>
</body>
</html>

Code Generate the following output

Retrieve selected Radio button value using JQuery

Source code for checkbox

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="radioandcheck.aspx.cs" Inherits="radioandcheck" %>

<!DOCTYPE html>
<html>
<head>

<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#getv").click(function () {
var radioValue = $("input[name='gender']:checked").val();
if (radioValue) {
alert("Your are a - " + radioValue);
}
});

});
</script>
</head>
<body> <form id="form1" runat="server">
<h4>Please select your gender.</h4>
<p>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</p>
<p><input type="button" value="Get Value" id="getv"></p>
</form>
</body>
</html>
Code Generate the following output

Retrieve selected checkbox value using JQuery

Saturday, September 5, 2015

ASP.NET

September 05, 2015

Add items to dropdownlist using TextBox in ASP.NET

In this article i will show you how to add items in DropdownList with value. In general way if we add items in the list then you can add only add Text in the list. Like
Dropdownlist1.Items.add(string Text);
But you want to add text with value from Textbox in Dropdownlist then check the below example:

Source

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
ENTER ITEMS :
<asp:TextBox ID="TextBox1" runat="server" Width="209px"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="ADD ITEMS" />
<br />
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
</form>

</body>
</html>

Code Behind
protected void Button1_Click(object sender, EventArgs e)
{
if (TextBox1.Text.Trim()!="")
{
DropDownList1.Items.Add(new ListItem(TextBox1.Text, TextBox1.Text));
}
}

Friday, September 4, 2015

WPF

September 04, 2015

How to use WPF Ribbon with example

Ribbon Introduction

You know about ribbon, its a container of controls or text items like you ms-word menu bar. In MS-Word home tab contains lots of sub items like Text formatting, headings etc. These all things are possible through Ribbon in WPF.

In this video tutorial i will show you how to add reference to create ribbon in wpf. Using System.windows.controls.Ribbon namespace we can create a ribbon in WPF. Also show you how to add namespace for ribbon in xaml file. So lot of things i included in this video.

ASP.NET ASP.NET Programming

September 04, 2015

Example of bind hyperlink in Datalist ASP.NET C#

Introduction

In this article i will show you how to take hyperlink control in datalist control also you can say how to bind hyperlink control into datalist. I will show you example of bind hyperlink control into datalist.

Datalist introduction

The Datalist control is a data bound control that displays data by using templates. These templates define controls and HTML elements that should be displayed for an item. The Datalist control exists within the System.Web.UI.WebControl namespace.

Some steps for binding Hyperlink control in Datalist

Step-1: Create a DataBase Table with following fields.

Step-2: Fill this field with following values

DepartmentID Name Description

1 IT This is first department Name

2 CS This is Second Department Name

Step-3 : Create Procedure for retrieving values.

Database.mdf-->Stored Procedures -->Right click -->Add new Stored Procedure

CREATE PROCEDURE GetDepartments

SELECT DepartmentID ,Name ,Description From [Table] ;

RETURN 0

Step-4: Take a webform in your project name as "Departmentlist.aspx"

Step-5: Paste this code into your Department.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Departmentlist.aspx.cs" Inherits="Departmentlist" %>

<!DOCTYPE html>

</head>

<body>

<asp:DataList ID="DataList1" runat="server">

Choose a Department

</HeaderTemplate>

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl ='<%#Link .ToDepartment (Eval ("DepartmentID").ToString ()) %>'

Text ='<%# HttpUtility .HtmlEncode (Eval ("Name").ToString ()) %>' ToolTip ='<%# HttpUtility .HtmlEncode (Eval ("Description").ToString ()) %>' >

</asp:HyperLink>

</ItemTemplate>

</asp:DataList>

<div>

</div>

</form>

</body>

</html>

Step-6: Paste this code into your codebehind file

using System;
using System.Data.SqlClient;
using System.Data;

public partial class Departmentlist : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection();
con.ConnectionString = @"Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True";
con.Open ();
SqlCommand cmd=new SqlCommand ();
cmd.CommandText ="GetDepartments";
cmd.CommandType =CommandType .StoredProcedure ;
cmd.Connection =con;
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds, "Department");
DataList1.DataSource = ds;
DataList1.DataBind();

}
}

Step-7 Make a Link class for absolute url

using System;
using System.Web;

/// <summary>
/// Summary description for Link
/// </summary>
public class Link
{
public static string BuildAbsolute(string relativeuri)
{
// get current uri
Uri uri = HttpContext.Current.Request.Url;
// build absolute path
string app = HttpContext.Current.Request.ApplicationPath;
if (!app.EndsWith("/"))

app += "/";
relativeuri = relativeuri.TrimStart('/');
// return the absolute path
return HttpUtility .UrlPathEncode (String .Format ("http://{0}:{1}{2}",uri .Host ,uri.Port ,app ));

}
public static string ToDepartment(string departmentId, string page)
{
if (page == "1")

return BuildAbsolute(string.Format("catalog.aspx?DepartmentID={0}", departmentId));
else
return BuildAbsolute (string .Format ("catalog.aspx?DepartmentID={0}&Page={1}",departmentId,page ));

}
//generate a department url for the first page
public static string ToDepartment(string departmentId)
{
return ToDepartment(departmentId, "1");
}

}

Out Put

Thursday, September 3, 2015

JQUERY

September 03, 2015

How to show popup on page load using JQuery

Introduction
In this article i will show you how a popup window appears with some controls or text message when first or each time window load . I will give you an example of modal pop window on page load. .

Description
In previous article i explained how to show modal pop using JQuery. Here we use same article for modal popup but something change in JQuery function. In this article i will use ready( ) function of document object. In JQuery, if you want to execute some functions and operations on page load then use $(document).ready (function here).

Source Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="pageloadmodal.aspx.cs" Inherits="pageloadmodal" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js" ></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" ></script>

<script>

$(function () {
$(document).ready(function () {

$('#popup').dialog({
title: "JQuery popup model",
width: 450,
height: 250,
modal: true,
button: {
close: function () {
$(this).dialog('close');

}
}

});
});

})
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<div id="popup" title="page load modal popup" style="display:none">
<b>Today News:</b>
Currently launched windows 10 professional version

</div>

</div>
</form>
</body>
</html>

Code Generate the following output

ASP.NET JQUERY

September 03, 2015

How to show login form in modal popup window in ASP.NET

Introduction
In this article i will show you how a login form appear in modal popup. I will give you an example of modal pop with login or register control. When we click on login button then modal popup appears with login form , now user can login from this window.

Description
In previous article i explained how to show modal pop using JQuery. Here we use same article for modal popup but something change in division.

Source Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default11.aspx.cs" Inherits="Default11" %>

<%@ Register Src="~/logincontrol.ascx" TagPrefix="uc1" TagName="logincontrol" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>

$(function () {
$('#Button1').click(function () {

$('#popup').dialog({

title: "Login Control",
width: 500,
height: 500,
modal: true,
buttons: {
close: function () {
$(this).dialog('close');
}
}

});

});

})

</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<div id="popup" title="Login Form" style="display:none">

UserName: <input id="Text1" type="text" /> <br />
Password: <input id="Text2" type="text" /> <br />
<input id="loginbtn" type="button" value="Login" />

</div>
<input id="Button1" type="button" value="click to login" />
</div>
</form>
</body>
</html>

Code Generate the following output