Learn how to generate the unique string using GUID method in asp.net using c#

in this asp.net tutorial you will learn how to generate the unique string using GUID feature in asp.net. GUID stands for Global unique identifier. GUID is a 128 bit integer that can be used to uniquely identify any thing in database. It can help you like a primary key in your database table. There is no chance of duplication of GUID in your database table. So if you want to use GUID as a primary key then go ahead and use it as a primary key without any hesitation.
I have seen many programmers who use the combination of current date time, random number and some string to make the unique string and then store it in database table to uniquely identify the records. Using GUID you will not go with such hassle.

How to create a GUID in asp.net using c#

You can find the GUID method in the system namespace. The GUID method System.Guid.NewGuid() initializes a new instance of GUID class.


There are also some overloads available for those programmers who want to format the GUID in a particular fashion.


Let's have a look over code below to learn the use of GUID method.

Generating the unique string using GUID method in asp.net using c#

string unique_string =Guid.NewGuid().ToString();

Use these overloads method to format the GUID string.

Guid.NewGuid().ToString("N");
Guid.NewGuid().ToString("D");
Guid.NewGuid().ToString("B");
Guid.NewGuid().ToString("P");

There is also a data type uniqueidentifier in sql server to store the GUID value. If you don't want to use this GUID value through c# then you can use NEWID() fucntion of sql server.


GUID is Everywhere


In windows environment GUID is used everywhere. Open the registry by executing the regedit command in run on your windows system, you can easily see that GUIDs are used extensively to uniquely identify every application, they serve like application IDS under the HKEY_CLASSES_ROOT section (AppID key).


Typical format of GUID


936DA01F-9ABD-4d9d-80C7-02AF85C822A8


So this is the way to generate the unique string using GUID method in asp.net using c#.
Read more...

Limit the text length in textbox using javascript

Sometimes you may get requirement to limit the text length in textbox using javascript. It is better approach to limit the text length in textbox because during development you must think that people can harm your whole database by entering the malicious text of thousands of characters if you don’t have applied any text limit in your input textbox or asp:textbox. If malicious text of thousands of characters is provided through textbox then two things can happen


1) Page will show an error after getting respond from database because the column of the table that will store the data might be have width of 100 characters.

2) Incase user enters the script code of thousands of characters then your website may be down or can have other related problem


So bottom line is ALWAYS LIMIT THE TEXT LENGTH IN TEXTBOX. In this tutorial I am covering this topic using javascript the client side language but later on in this blog you will find how to achieve same thing using asp.net the server side because javascript might be disable in user’s/hacker’s system. I write user’s because I believe user can also harm your database unintentionally if you have not taken any precautions.

Now let's have a look over how to apply limit to the text length in textbox either it is Singleline or Multiline.

Limit the text length in textbox using javascript


<html>
<head>
<title>
Limit the text length in textbox using javascript
</title>
<script language="javascript" type="text/javascript">
function checkLength(textboxID)
{
var maxLen; // max number of characters allowed
if(textboxID=="txtFirstName")
{
maxLen=20;
}
else if(textboxID=="txtLastName")
{
maxLen=30;
}
else
{
maxLen = 100;
}


var getValue;
getValue = document.getElementById(textboxID).value;
if (getValue.length > maxLen)
{
document.getElementById(textboxID).value = document.getElementById(textboxID).value.substring(0, maxLen);
}
}
</script>
</head>
<body>
<form>
<input type="text" id="txtFirstName" name="txtFirstName" onkeydown="checkLength(this.id);" onblur="checkLength(this.id);" /><br/><br/>
<input type="text" id="txtLastName" name="txtLastName" onkeydown="checkLength(this.id);" onblur="checkLength(this.id);" /><br/><br/>
<textarea id="txtDescription" rows="10" cols="10" onkeydown="checkLength(this.id);" onblur="checkLength(this.id);">
</textarea>
</form>
</body>
</html>

I could apply the text limit in textbox without using any single line code of javascript by using maxlength property of textbox like given below


<input type="text" id="txtDescription" name="txtDescription" maxlength="2"/>


The maxlength attribute of textbox works fine when textbox is in singleline mode but what about if textbox is in multiline mode? If textbox is multiline (i;e; <textarea> in html) then you have to use the above mentioned javascript custom function and have to call that function using onkeydown and onblur event of multiline textbox.


For asp:Textbox

<script language="javascript" type="text/javascript">
function checkLength(textboxID)
{
var maxLen; // max number of characters allowed
if(textboxID=="txtFirstName")
{
maxLen=20;
}
else if(textboxID=="txtLastName")
{
maxLen=30;
}
else
{
maxLen = 100;
}


var getValue;
getValue = document.getElementById(textboxID).value;
if (getValue.length > maxLen)
{
document.getElementById(textboxID).value = document.getElementById(textboxID).value.substring(0, maxLen);
}
}
</script>


<asp:TextBox ID="txtFirstName" runat="server" EnableTheming="false" Width="200px" onkeydown="checkLength(this.id);" onblur="checkLength(this.id);"></asp:TextBox><br/><br/>


<asp:TextBox ID="txtLastName" runat="server" EnableTheming="false" Width="200px" onkeydown="checkLength(this.id);" onblur="checkLength(this.id);"></asp:TextBox><br/><br/>


<asp:TextBox ID="txtDescription" runat="server" TextMode="MultiLine" Width="400px" EnableTheming="false"
Rows="5" cols="8" onkeydown="checkLength(this.id);" onblur="checkLength(this.id);"></asp:TextBox>

I have used onblur event because I know many hackers can use copy/paste to enter malicious text of thousands of characters and onblur() event will be proved as a safeguard on that scenario.


So this is the way to limit the text length in textbox using javascript.
Read more...

Disabling cut, copy, paste, right click and context menu in a textbox on aspx page

In this tutorial you will learn how to disable cut, copy, paste, right click and context menu in asp:textbox. Sometimes due to security point of view you may want to do this. It's quite simple, I often see that developers write javascript code to disable the cut, copy, paste in textbox either textbox is input or server side asp:textbox.


I will not use any single line of javascript code to achieve what I want. Now let's have a look over how to do so.

Disabling cut, copy, paste, right click and context menu in a textbox


<asp:TextBox ID="txtName" runat="server" oncopy="return false" onpaste="return false" oncut="return false" oncontextmenu="return false">
</asp:TextBox>
You can use same concept with input textbox like

<input type="text" ID="txtName" oncopy="return false" onpaste="return false" oncut="return false" oncontextmenu="return false"/>

to disable the copy, paste, cut, right click and contextmenu in textbox.
I have used the events (oncopy, onpaste, oncut, oncontextmenu) of textbox to achieve the desired disability.

If you want to show the alerts then you have to modify the code like this

<input type="text" ID="txtName" oncopy="disableCopy();" onpaste="disablePaste();" oncut="disableCut();" oncontextmenu="disableContextMenu();"/>


<script language="javascript" type="text/javascript">
function disableCopy()
{
alert("You cannot perform Copy");
return false;
}


function disablePaste()
{
alert("You cannot perform Paste");
return false;
}


function disableCut()
{
alert("You cannot perform Cut");
return false;
}


function disableContextMenu()
{
alert("You cannot perform right click via mouse as well as keyboard");
return false;
}
</script>

I hope you will find this article very interesting.
Happy Coding Keep Coding
Read more...

How to highlight the selected row in table/gridview using jquery

In this jquery tutorial you will learn how to highlight the selected row in table/gridview using jquery. I am selecting the rows on the basis of checked checkboxes. Whenever checkbox is checked then its row will be highlighted.


I have already written a tutorial about how to check/uncheck all checkboxes using jquery.


So I will continue from there and merge the code to highlight the selected row with the code to check/uncheck all checkboxes using jquery.


Now let's have a look over welcome.html

How to highlight the selected row in table/gridview using jquery


<html>
<head>
<title> How to highlight the selected row in table/gridview using jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"
charset="utf-8"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#checkall").live('click',function(event){
$('input:checkbox:not(#checkall)').attr('checked',this.checked);
//To Highlight
if ($(this).attr("checked") == true)
{
//$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#FF3700");
$("#tblDisplay").find('tr:not(#chkrow)').css("background-color","#FC9A01");
}
else
{
//$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#fff");
$("#tblDisplay").find('tr:not(#chkrow)').css("background-color","#FFF");
}
});
$('input:checkbox:not(#checkall)').live('click',function(event)
{
if($("#checkall").attr('checked') == true && this.checked == false)
{
$("#checkall").attr('checked',false);
$(this).closest('tr').css("background-color","#ffffff");
}
if(this.checked == true)
{
$(this).closest('tr').css("background-color","#FC9A01");
CheckSelectAll();
}
if(this.checked == false)
{
$(this).closest('tr').css("background-color","#ffffff");
}
});

function CheckSelectAll()
{
var flag = true;
$('input:checkbox:not(#checkall)').each(function() {
if(this.checked == false)
flag = false;
});
$("#checkall").attr('checked',flag);
}
});

</script>
</head>
<body>
<table width="50%" cellspacing="0" border="0" align="left" id="tblDisplay" cellpading="0"
style="font-family: verdana; font-size: 10px;">
<thead>
<tr id="chkrow">
<th>
<input type="checkbox" id="checkall" />
</th>
<th>
Sr.
</th>
<th style="text-align: left;">
First Name
</th>
<th style="text-align: left;">
Last Name
</th>
<th>
Country
</th>
<th>
Marital Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="1" />
</td>
<td style="text-align: center;">
1
</td>
<td style="text-align: left;">
Adeel
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="2" />
</td>
<td style="text-align: center;">
2
</td>
<td style="text-align: left;">
Omer
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="3" />
</td>
<td style="text-align: center;">
3
</td>
<td style="text-align: left;">
Umer
</td>
<td style="text-align: left;">
Mukhtar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="4" />
</td>
<td style="text-align: center;">
4
</td>
<td style="text-align: left;">
Mark
</td>
<td style="text-align: left;">
Waugh
</td>
<td style="text-align: center;">
Australia
</td>
<td style="text-align: center;">
Married
</td>
</tr>
</tbody>
</table>
</body>
</html>

Note:- Using same technique you can highlight the row in gridview using jquery becuase when page is render then <asp:GridView> becomes the <table>.


Copy/paste all the code, save the page, run the page and enjoy what you want.


So I hope you will find this tutorial of jquery very handy. Happy Coding... Keep Coding.
Read more...

Check/Uncheck All Checkboxes using jquery


In this jquery tutorial you will learn how to check/uncheck all checkboxes using jquery. I have already written a post about how to check/uncheck all checkboxes using javascript and c#.


But being a software engineer, we should always follow the latest technology as well. So that's why I have written this tutorial in jquery. So let's have a look over the home.html


Check/Uncheck All Checkboxes using jquery


<html>
<head>
<title>Check/Uncheck All Checkboxes using jquery </title>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"
charset="utf-8"></script>


<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#checkall").live('click',function(event){
$('input:checkbox:not(#checkall)').attr('checked',this.checked);
});


$('input:checkbox:not(#checkall)').live('click',function(event)
{
if($("#checkall").attr('checked') == true && this.checked == false)
$("#checkall").attr('checked',false);
if(this.checked == true)
CheckSelectAll();
});


function CheckSelectAll()
{
var flag = true;
$('input:checkbox:not(#checkall)').each(function() {
if(this.checked == false)
flag = false;
});
$("#checkall").attr('checked',flag);
}


});




</script>


</head>
<body>
<table width="50%" cellspacing="0" border="0" align="left" id="tblDisplay" cellpading="0"
style="font-family: verdana; font-size: 10px;">
<thead>
<tr id="chkrow">
<th>
<input type="checkbox" id="checkall" />
</th>
<th>
Sr.
</th>
<th style="text-align: left;">
First Name
</th>
<th style="text-align: left;">
Last Name
</th>
<th>
Country
</th>
<th>
Marital Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="1" />
</td>
<td style="text-align: center;">
1
</td>
<td style="text-align: left;">
Adeel
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="2" />
</td>
<td style="text-align: center;">
2
</td>
<td style="text-align: left;">
Omer
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="3" />
</td>
<td style="text-align: center;">
3
</td>
<td style="text-align: left;">
Umer
</td>
<td style="text-align: left;">
Mukhtar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="4" />
</td>
<td style="text-align: center;">
4
</td>
<td style="text-align: left;">
Mark
</td>
<td style="text-align: left;">
Waugh
</td>
<td style="text-align: center;">
Australia
</td>
<td style="text-align: center;">
Married
</td>
</tr>
</tbody>
</table>
</body>
</html>

Explaination of Code:-


I have placed a checkbox of id "checkall" in the first row, the header row of the table. Now by clicking this checkbox, the process of check/uncheck all checkboxes will be performed.


Now let's understand the jquery code.



$("#checkall").live('click',function(event){
$('input:checkbox:not(#checkall)').attr('checked',this.checked);
});

The above code snippet will performed the thing that you want to do. It will bind the click event to the "checkall" checkbox and will check/uncheck all the checkboxes other than itself.



$('input:checkbox:not(#checkall)').live('click',function(event)

The above code will bind the click event to all of the checkboxes other then the checkbox of id "checkall".


Note: - Always use the click event with live function, live function can bind the click event to the dynamic elements (the elements that are generated at runtime) as well. It will not create any problem if data is coming from database i.e.; dynamic rows are being added to the table.


If you write the same code like this

$("#checkall").click(function(){
$('input:checkbox:not(#checkall)').attr('checked',this.checked);
});

Then if you are getting the table rows from database with checkboxes then the click event will not be bind with the checkboxes of dynamic rows. So always use the click event with live function.

if($("#checkall").attr('checked') == true && this.checked == false)
$("#checkall").attr('checked',false);

Now let's consider you have checked all the checkboxes. Now this above code snippet will uncheck the header checkbox “checkall” when any of the checkbox placed in the body of the table will be unchecked. The checkbox "checkall"
should be only checked when all the other checkboxes are checked and when any one of the checkbox will be unchecked the "checkall" checkbox should be unchecked.

if(this.checked == true)
CheckSelectAll();


function CheckSelectAll()
{
var flag = true;
$('input:checkbox:not(#checkall)').each(function() {
if(this.checked == false)
flag = false;
});
$("#checkall").attr('checked',flag);
}

Now when you checked any of the checkbox placed in the <tbody> of the table then the above code snippet will check whether all the checkboxes are checked or not through built-in each() of jquery that will loop through all the checkboxes placed in the <tbody> and will try to find any of the checkbox that is unchecked, if it finds any unchecked checkbox then it will set the variable flag to false and the "checkall" checkbox(the checkbox placed in the <thead> row of the table) will be unchecked
But when it will not find any of the checkbox unchecked then it will checked the "checkall" checkbox.


Note: - It is not compulsory for you to use the <thead> and <tbody> in the <table>. I just use them to make the table structure better and understandable.


So this is the way to check/uncheck all checkboxes using jquery.
Read more...