Read User's Comments Hiding the Paragraph Text using Jquery
We can easily hide and show the Html elements and its contents using Jquery Hide() function. The bellow code is used to hide the paragraph.
<html>Jquery Code for hiding the elements
<head runat="server">
<title></title>
<link href="css/ui-lightness/jquery-ui-1.8.16.custom.css" type="text/css" />
<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>">
<script type="text/javascript>
$(document).ready(function () {
$("p").click(function () {
$(this).hide();
});
$("#<%=txtDOB.ClientID%>").datepicker();
});</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>If u Click me i will Hide!</p>
<p>Click Me to Hide!</p>
<div>Select Your DOB<asp:TextBox ID="txtDOB" runat="server"></asp:TextBox></div>
</div>
</form>
</body>
</html>
<script type="text/javascript>
$(document).ready(function () {
$("p").click(function () {
$(this).hide();
});
});
</script>
How to avoid Maximum request length exceeded in asp.net
Uploading files via the FileUpload control gets tricky with big files. The default maximum filesize is 4MB - this is done to prevent denial of service attacks in which an attacker submitted one or more huge files which overwhelmed server resources. If a user uploads a file larger than 4MB, they'll get an error message: "Maximum request length exceeded."
Increasing the Maximum Upload Size
The 4MB default is set in machine.config, but you can override it in you web.config. For instance, to expand the upload limit to 20MB, you'd do this:
<system.web>Since the maximum request size limit is there to protect your site, it's best to expand the file-size limit for specific directories rather than your entire application. That's possible since the web.config allows for cascading overrides. You can add a web.config file to your folder which just contains the above, or you can use the
<httpRuntime executionTimeout="240" maxRequestLength="20480" />
</system.web>
<location path="TestWeb\Upload">
<system.web>
<httpRuntime executionTimeout="110" maxRequestLength="20000" />
</system.web>
</location>
Limit Viewstate length in Asp.Net
In some occasions browsers may block or truncate generated viewstate due to it’s length. This short tweak may solve the issue by dividing the viewstate to independent hidden fields based on the number you provide as value. In this example maxPageStateFieldLength set to 50 this means when viewstate get beyond 50 characters it will be broken to different hidden fields holding viewstate’s value.
<system.web>
<pages maxPageStateFieldLength="50">
<controls />
</pages>
To trim the Textbox Using Jquery
- The Jquery.trim() function is used to remove the extra spaces from the left & right side of the string.
//To Removing the space in string using Jquery's Trim function
$(document).ready(function () {
var strName = $("#txtUserName").val();
strName = jQuery.trim(strName);
});
To prevent the cut, copy and paste in the Password Textbox using JQuery.
- To bind the event for the cut, copy and paste. Declare a function and make the event to prevent using ‘e.preventDefault();’.
- Then we can alert the user, this password textbox won’t allow cut, copy and paste.
//To Prevent the Cut, Copy, Paste in the Password.
$(document).ready(function () {
$('#<%=txtPassword.ClientID %>').bind('cut copy paste', function (e) {
e.preventDefault();
alert('Password is not allowed Cut-Copy Paste!');
});
});
Focusing the cursor from one textbox to another when entering the ‘Enter’ Key using JQuery.
// To Bind the function to the textbox for moving the cursor from one textbox to another
$(document).ready(function () {
$("input:text:first").focus();
$("input:text").bind("keydown", function (e) {
if (e.which == 13) {
e.preventDefault();
var nextIndex = $('input:text').index(this) + 1;
if ($('input:text')[nextIndex] != null)
$('input:text')[nextIndex].focus();
}
});
});
- Here $("input:text:first").focus(); this code helped to focus the first textbox and
- $("input:text").bind("keydown", function (e) {}); is used to bind the ‘Keydown’ event to the each textbox available textbox.
- $('input:text').index(this) is used to get the index of the current text box.
if ($('input:text')[nextIndex] != null)
- This if block is used to check if the next index is having textbox control or not. If the control is available then this will focus into the next textbox.
Working with Dropdown List Using Jquery
When the Items of dropdown box is selected then we need to get the item and display it into lable and also based on the one drop down we need to load the other. Normaly we will write this in server side code, but this can be done with client side iteslef using Jquery.
For that First we need to add the two dropdown list controls first in our aspx page
<div align="center">The bellow Jquery is used to bind the 'Key Change' Events to the dropdown box using the 'Bind' Method. The bind method of control is used bind the event before the DOM is loading.
<div id="message" class="Highlight" style="width: 300px;" align="center">
</div>
</div>
<table> <tr>
<td>
<asp:Label ID="lblEduLevel" runat="server" Text="Select Education Level:"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlEduLevel" runat="server" Style="border-width:thin; border-color: #7F9DF9">
<asp:ListItem Text="SSLC" Value="0"></asp:ListItem>
<asp:ListItem Text="HSC" Value="1"></asp:ListItem>
<asp:ListItem Text="Graduate" Value="2"></asp:ListItem>
<asp:ListItem Text="Post Graduate" Value="3"></asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:DropDownList ID="ddlMajor" runat="server" Style="border-width:thin; border-color: #7F9DF9">
<asp:ListItem Value="0" Text="--Select--"></asp:ListItem>
</asp:DropDownList>
</td>
</tr></table>
// Working with DropdownlistHere $('#<%=ddlEduLevel.ClientID %>') is dropdown list client Id and $('#message') is the 'Div' elements to dispaly the message. The .Css() is used to apply the Css Style to the control and the .text() method of jquery is used to assign the text to the div elements. Here $(this) is used jquery dorpdown list 'ddlEduLevel' and the .find() method with (":selected").text() is used to get the text of the selected Item, $(this).val() is used to display the value of the selected Item.
$(document).ready(function () {
$('#<%=ddlEduLevel.ClientID %>').bind('keyup change', function () {
if ($(this).val() != "") {
// this used to display the user message to Div element
$('#message').css("color", "blue");
$('#message').text("Qulification: " + $(this).find(":selected").text() + " And the Edu Level: " + $(this).val());
}
});
});
The following Jquery is used to loading the another dropdown control based on the current dropdown's selected Item.
$(document).ready(function () {
$('#<%=ddlEduLevel.ClientID %>').bind('keyup change', function () {
$("Select[id$=ddlMajor] > option").remove();
if ($(this).val() == "3") {
$('#<%=ddlMajor.ClientID %>').append("<option value='1'>Computer Application</option>");
$('#<%=ddlMajor.ClientID %>').append("<option value='2'>Computer Science</option>");
$('#<%=ddlMajor.ClientID %>').append("<option value='3'>Maths</option>");
}
else if ($(this).val() == "0") {
$('#<%=ddlMajor.ClientID %>').append("<option value='1'>General English</option>");
$('#<%=ddlMajor.ClientID %>').append("<option value='2'>General Tamil</option>");
}
else if ($(this).val() == "1") {
$('#<%=ddlMajor.ClientID %>').append("<option value='1'>English</option>");
$('#<%=ddlMajor.ClientID %>').append("<option value='2'>Tamil</option>");
$('#<%=ddlMajor.ClientID %>').append("<option value='3'>Computer</option>");
}
else if ($(this).val() == "2") {
$('#<%=ddlMajor.ClientID %>').append("<option value='1'>English</option>");
$('#<%=ddlMajor.ClientID %>').append("<option value='2'>Tamil</option>");
$('#<%=ddlMajor.ClientID %>').append("<option value='3'>Computer</option>");
}
});
}); The above we have used two dropdowns called ddlEduLevel,ddlMajor and we can load the ddlMajor based on the item selected from ddlEduLevel. $("Select[id$=ddlMajor] > option").remove(); is used to remove the all items from the list and the append() method of the dropdown list is used to add the new element into the dropdown list.
To Validate and Highlighting a TextBox(s) using JQuery
In our Asp.Net Client Side validation is most important and needed one. We can achive this using Jquery and when the user is focusing into the textbox control we need to highlight the controls. 
First we can add the aspx controls in the page using the following code in design view.
<div>
<table style="border-color: Gray; border-width: thin;">
<tr>
<td colspan="2">
<div style="background-color: Silver" width="50%">
<span>Welcome My JQuery Test Application! </span>
</div>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblUser" runat="server" Text="Enter User Name:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
</td>
<td>
<span id="errUser" style="visibility: hidden">!</span>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblPassword" runat="server" Text="Enter Password:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
</td>
<td>
<span id="errPassword" style="visibility: hidden">!</span>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblloc" runat="server" Text="Enter Location:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtLocation" runat="server"></asp:TextBox>
</td>
<td>
<span id="Span1" style="visibility: hidden">!</span>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblEduLevel" runat="server" Text="Select Education Level:"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlEduLevel" runat="server" Style="border-width:thin; border-color: #7F9DF9">
<asp:ListItem Text="SSLC" Value="0"></asp:ListItem>
<asp:ListItem Text="HSC" Value="1"></asp:ListItem>
<asp:ListItem Text="Graduate" Value="2"></asp:ListItem>
<asp:ListItem Text="Post Graduate" Value="3"></asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:DropDownList ID="ddlMajor" runat="server" Style="border-width:thin; border-color: #7F9DF9">
<asp:ListItem Value="0" Text="--Select--"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="BtnSubmit" runat="server" Text="Go!" />
</td>
</tr>
</table>
<table>
<tr>
<td>
<asp:Label ID="lblTestCopy" runat="server" Text="About your self:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtCopyToClipboard" runat="server" TextMode="MultiLine" Rows="5"
Width="300" Height="75"></asp:TextBox>
</td>
<td>
<asp:HyperLink ID="lnkHighlight" Text="Click here to copy!" runat="server"></asp:HyperLink>
</td>
</tr>
</table>
</div>
First we will validate the textbox controls using Jquery. Before that first load the JQuery Library using the bellow script.
<script src="JScript/jquery-1.6.1.js" type="text/javascript"></script>
Here the '$' is denoted the Jquery and the $(document).ready() is used to load the jquery before the DOM is loading.$("#txtUserName").val() is give the Textboxs value..
// To validating the User Name and Password text.
$(document).ready(function () {
$("#BtnSubmit").click(function () {
var StrMsg = "";
if ($("#txtUserName").val() == "") {
StrMsg = "User Name";
}
if ($("#txtPassword").val() == "")
StrMsg += StrMsg == "" ? "Password" : ", Password";
if (StrMsg != "") {
alert(StrMsg + " Are Required!");
return false;
}
//return true;
});
});
The Next thing is need to highlight the controls when we make focus to the control.
//When focusing the Asp.Net control and highlight the Particular controlFor this we need the CSS class name 'Highlight'.
// And applay & Remove the CSS Class.
$(document).ready(function () {
$(":text").focusin(function () {
$(this).addClass("Highlight");
});
$(":text").focusout(function () {
$(this).removeClass("Highlight");
});
$(":password").focusin(function () {
$(this).addClass("Highlight");
});
$(":password").focusout(function () {
$(this).removeClass("Highlight");
});
$("select").focusin(function () {
$(this).addClass("Highlight");
});
$("select").focusout(function () {
$(this).removeClass("Highlight");
});
});
.Highlight{ background: #fed; border: 1px solid #7F9DF9;}
::selection{background: #0000FF;}
Subscribe to:
Comments (Atom)