Introduction:
In this article I will explain how to display images whenever validation fails in form using JQuery and I will explain how to check password strength using JQuery in asp.net.
Description:
In previous articles I explained about form validations using JavaScript and Ajax Password Strength using asp.net . Now I will explain how to show the images when validation fails and I will explain how to show the password strength using JQuery in asp.net.
In one of the website I saw different type of form validations in registration form when we click on submit button without entering any data they are displaying error message with image just beside of particular control and they are displaying password strength based on text entered in textbox. After seen that form I decided to write post to explain how to implement this one using JQuery.
Download sample code attached
In this article I will explain how to display images whenever validation fails in form using JQuery and I will explain how to check password strength using JQuery in asp.net.
Description:
In previous articles I explained about form validations using JavaScript and Ajax Password Strength using asp.net . Now I will explain how to show the images when validation fails and I will explain how to show the password strength using JQuery in asp.net.
To implement this concept first open Visual Studio and create new website after that right click on your website and add two new folders and give name as Images and JS and insert images and script files in particular folders you should get it from attached folder. After that write the following code in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery Validate Form and Show Password Strength</title>
<link href="FormValidation.css" rel="stylesheet" type="text/css" />
<link href="jquery.validate.password.css" rel="stylesheet" type="text/css" />
<script src="JS/jquery.js" type="text/javascript"></script>
<script src="JS/jquery.validate.js" type="text/javascript"></script>
<script src="JS/jquery.validate.password.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
// validate signup form on keyup and submit
var validator = $("#signupform").validate({
rules: {
username: {
required: true,
minlength: 2
},
password: {
password: "#username"
},
password_confirm: {
required: true,
equalTo: "#password"
},
location: {
required: true
}
},
messages: {
username: {
required: "Enter a username",
minlength: jQuery.format("Enter at least {0} characters")
},
password_confirm: {
required: "Repeat your password",
minlength: jQuery.format("Enter at least {0} characters"),
equalTo: "Enter the same password as above"
},
location: {
required: "Enter a Location"
}
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) {
error.prependTo(element.parent().next());
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
}
});
});
</script>
</head>
<body>
<form id="signupform" runat="server">
<div id="signupwrap">
<table align="center">
<tr>
<td></td>
<td><b>User Registration</b></td>
<td></td>
</tr>
<tr>
<td align="right" class="label">UserName:</td>
<td class="field"><asp:TextBox ID="username" runat="server"/></td>
<td class="status"></td>
</tr>
<tr>
<td align="right" class="label">Password:</td>
<td class="field"><asp:TextBox ID="password" runat="server" TextMode="Password"/></td>
<td class="status" align="left">
<div class="password-meter">
<div class="password-meter-message"> </div>
<div class="password-meter-bg">
<div class="password-meter-bar"></div>
</div>
</div>
</td>
</tr>
<tr><td align="right" class="label">Confirm Password:</td>
<td class="field"><asp:TextBox ID="password_confirm" runat="server" TextMode="Password"/></td>
<td class="status"></td>
</tr>
<tr>
<td align="right" class="label">Location:</td>
<td class="field"><asp:TextBox ID="location" runat="server"/></td>
<td class="status"></td>
</tr>
<tr>
<td></td>
<td><asp:Button ID="btnSubmit" Text="Submit" runat="server"/></td>
<td></td>
</tr>
<tr>
<td colspan="3" height="20px">
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<table>
<tr>
<td>UserName:</td>
<td><asp:Label ID="lbluser" runat="server"/></td>
</tr>
<tr>
<td>Password:</td>
<td><asp:Label ID="lblPwd" runat="server"/></td>
</tr>
<tr>
<td>Location:</td>
<td><asp:Label ID="lblLocation" runat="server"/></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
If you observe above code in header section I added some of script files and css files by using those files we have a chance to show password strength based on text entered in textbox and display the images when validation fails using JQuery in asp.net.
Demo
|
|
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email | |||
JQuery Highlight border and background color of form controls when validation fails in asp.net
|
|
comments (0)
|
Introduction:
In this article I will explain how to highlight or change background and border color of form controls when validation fails in asp.net using JQuery.
In this article I will explain how to highlight or change background and border color of form controls when validation fails in asp.net using JQuery.
Description:
In previous articles I explained about Display validation error messages with images and Change textbox background when validation fails and Ajax Password Strength using asp.net . Now I will explain how to highlight form controls when validation fails using JQuery in asp.net.
In one of the website I saw different type of form validations in registration form when we click on submit button without entering any data they are highlighting controls and changing the background color of controls. We can implement this functionality easily by using available JQuery plugins.
In previous articles I explained about Display validation error messages with images and Change textbox background when validation fails and Ajax Password Strength using asp.net . Now I will explain how to highlight form controls when validation fails using JQuery in asp.net.
In one of the website I saw different type of form validations in registration form when we click on submit button without entering any data they are highlighting controls and changing the background color of controls. We can implement this functionality easily by using available JQuery plugins.
First open Visual Studio and create new website after that right click on your website and add new folder and give name as JS and insert script files in folder you should get it from attached folder. After that write the following code in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Highlight page controls when validation fails in asp.net</title> <script src="JS/jquery.js" type="text/javascript"></script> <script src="JS/jquery.validate.js" type="text/javascript"></script> <script type="text/javascript" src="JS/jquery.maskedinput.js"></script> <script type="text/javascript" src="JS/mktSignup.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" /> </head> <body> <div> <form runat="server" > <table cellpadding="0" cellspacing="0" border="0" align="center"> <h2>Billing Information</h2> <tr class="subTable"> <td colspan="2"> <div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" class="subTableDiv"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td class="label">First Name:</td> <td class="field"><asp:TextBox ID="firstname" CssClass="ValidationRequired" runat="server"/></td> </tr> <tr> <td class="label">Last Name:</td> <td class="field"><asp:TextBox ID="lastname" CssClass="ValidationRequired" runat="server"/></td> </tr> <tr> <td class="label">Email:</td> <td class="field"><asp:TextBox ID="email" runat="server" CssClass="ValidationRequired email"/> <div class="formError"></div> </td> </tr> <tr> <td class="label">Address:</td> <td class="field"><asp:TextBox ID="bill_address1" runat="server" CssClass="ValidationRequired"/></td> </tr> <tr> <td class="label"></td> <td class="field"><asp:TextBox ID="bill_address2" runat="server" CssClass="ValidationRequired"/></td> </tr> <tr> <td class="label">City:</td> <td class="field"><asp:TextBox ID="bill_city" runat="server" CssClass="ValidationRequired"/></td> </tr> <tr> <td class="label">State:</td> <td class="field"> <asp:DropDownList ID="ddlState" runat="server" CssClass="ValidationRequired"> <asp:ListItem value="">Choose State</asp:ListItem> <asp:ListItem Value="AL">Alabama</asp:ListItem> <asp:ListItem value="AK">Alaska</asp:ListItem> <asp:ListItem value="AL">Alabama </asp:ListItem> <asp:ListItem value="AK">Alaska</asp:ListItem> <asp:ListItem value="AZ">Arizona</asp:ListItem> <asp:ListItem value="AR">Arkansas</asp:ListItem> <asp:ListItem value="CA">California</asp:ListItem> <asp:ListItem value="CO">Colorado</asp:ListItem> <asp:ListItem value="CT">Connecticut</asp:ListItem> <asp:ListItem value="DE">Delaware</asp:ListItem> <asp:ListItem value="FL">Florida</asp:ListItem> <asp:ListItem value="GA">Georgia</asp:ListItem> <asp:ListItem value="HI">Hawaii</asp:ListItem> <asp:ListItem value="ID">Idaho</asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td class="label">Zip:</td> <td class="field"> <asp:TextBox ID="txtZip" runat="server" CssClass="ValidationRequired zipcode"/> </td> </tr> <tr> <td class="label">Phone:</td> <td class="field"> <asp:TextBox ID="txtPhone" runat="server" CssClass="ValidationRequired phone"/> </td> </tr> <tr> <td class="label">Credit Card Type:</td> <td class="field"> <asp:DropDownList ID="ddlCardType" runat="server" CssClass="ValidationRequired"> <asp:ListItem Value="">Choose Credit Card</asp:ListItem> <asp:ListItem value="amex">American Express</asp:ListItem> <asp:ListItem value="discover">Discover</asp:ListItem> <asp:ListItem value="mastercard">MasterCard</asp |
Visual Studio Create Setup project to deploy web application in IIS
|
|
comments (0)
|
Introduction:
In this article I will explain how to create setup file in visual studio 2008/2010 to deploy web application file directly in IIS or in client machine or how to place web application folder in c:\\inetpub\wwwroot folder by running setup file using asp.net.
Description:
In previous post I explained many articles relating to Asp.net, JQuery, and SQLServer etc. If we did any application and if it works perfectly then we will prepare published files and deploy our application in IIS.
In this article I will explain how to create setup file in visual studio 2008/2010 to deploy web application file directly in IIS or in client machine or how to place web application folder in c:\\inetpub\wwwroot folder by running setup file using asp.net.
Description:
In previous post I explained many articles relating to Asp.net, JQuery, and SQLServer etc. If we did any application and if it works perfectly then we will prepare published files and deploy our application in IIS.
If we want to deploy application in IIS we need prepare separate published files folder and create virtual path in IIS, point to our folder and need to change some properties to make it work through our IIS by doing all these things we will waste a lot of time.
Instead of doing all these things if we prepare one setup file and make it everything for us like prepare published folder, create virtual directory, set properties and create website in IIS just by simple install how is it? Nice right.
It is very useful for us many situations like suppose if we do one application for client we need to deploy that application in client machine instead of giving all the files and instructions to deploy it in his machine we just give one simple setup file and once he run that will deployed all files in IIS and site will create automatically with all properties in system.
To create Setup file for our application follow below steps.
Step1: First Open visual studio ---> Create new Project (File ---> New ---> Project)
After that open Default.aspx page and write some code like this
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Sample Page to Create Setup Files</title> </head> <body> <form id="form1" runat="server"> <div> <table width="50%"> <tr> <td> <p> <img alt="Aspdotnet-Suresh" src="https://lh5.googleusercontent.com/_B28NJpJ61hA/TdgnS7lh7mI/AAAAAAAAAi4/oLTicIRgEIw/FinalLogo.png"> </p> <p> Aspdotnet-Suresh offers Asp.net,C#.net,SQL Server,Web Services,WCF,WPF,MVC,Crystal Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of .net technologies </p> </td> </tr> </table> </div> </form> </body> </html> |
Now run application output would be like this
Step 2: Our Project is ready with sample page Now Add new Setup project for our project for that
Go to File ---> Add ---> New Project
Step3: Whenever we click on New Project another window will open in that
Select Other Project Types ---> Setup and Deployment ---> Web Setup Project ---> Once we select Web Setup project give a name and click OK
Setp4: Now setup project has added to our application that would be like this
Step5: After add setup project open Solution Explorer ---> Right click on Setup project ---> Add ---> Project Output
Step6: Once we click on Project Output it will open another window to select required output files in that window select Primary Output, Content Files and click OK
Here we selected two options one is Primary Output and another one is Content Files because if we add Primary Output it will add only files which are in bin folder and if we select Content Files option also then it will add .aspx files and web.config file to setup project.
After Add Primary Output and Content Files to our Setup project that would be like this
Now you should rebuild your solution file and setup file once you rebuild it go to your project folder and check setup project folder you will find setup file you can run your setup file directly from that folder or right click on your setup project in visual studio and select Install
Once you click on Install it will display welcome wizard in some cases may be you have a chance to get error like “The installer was interrupted before application could be installed. You need to restart installer to try again” to solve this problem check this post the install was interrupted before application could be installed.
Now click next in next screen we will see options Site, Virtual Directory and Application Pool fill these options and click Next button
In next screen it will display Confirm Installation you need to click Next
Whenever we click on Next button that will start installation process in next screen like this
Once installation process completed then that will display installation completed successfully window
Now open your IIS by type “inetmgr” in Run and check your IIS if that contain our installed application or not
Now your site is ready you can browse from IIS that will display output will like this
Here we can uninstall this application easily for that Go to Setup project in visual studio Right click on it and you will find option Uninstall
Second way Go to Control Panel ---> programs --->Uninstall Program ---> Add or Remove Programs ---> select your installed sample right click on it and select uninstall
Asp.net host website on local machine with custom url instead of http://localhost/ in IIS
|
|
comments (0)
|
Introduction:
In this article I will explain how to create or setup or host new site in IIS with custom URL(http://yoursitename.com) instead of http://localhost/ in asp.net.
In this article I will explain how to create or setup or host new site in IIS with custom URL(http://yoursitename.com) instead of http://localhost/ in asp.net.
Description:
In previous post I explained how to publish or deploy our application in IIS. In one situation I got requirement like setup separate new site in IIS with custom url (ex: http://aspdotnet-suresh.com ) in system not under Default website.
In previous post I explained how to publish or deploy our application in IIS. In one situation I got requirement like setup separate new site in IIS with custom url (ex: http://aspdotnet-suresh.com ) in system not under Default website.
Before setup new site in IIS first
create one sample application in asp.net using visual studio. Once new application
is ready Open Run command and type “inetmgr” and click enter button then
IIS will open if not IIS is not installed in your machine. To install IIS in
your system
START ---> Control Panel ---> Programs ---> Turn Windows
Features on or off ---> Internet Information Services ---> Web Management Tools ---> Check or select IIS
Management Console ---> Click OK
|
|
After that follow below steps to setup
or host new application in your system.
Open RUN Command window and type “inetmgr”
Once opened IIS now select sites ---> Right click on it
and select Add Website
Whenever we select Add Web Site option
new window will open in that we need to enter Site Name, Physical Path and Host
name that would be like this
|
|
If you observe in above image here I given
Host name as aspdotnet-suresh.com after
completion of my setup if I type http://aspdotnet-suresh.com
in my browser automatically it display my custom local setup application
instead of my website. After enter all the details click OK. Now our site add
in IIS that would be like this
|
|
Now our application is ready Right
click on your site ---> Select Manage Web Site ---> Click Browse
|
|
After click Browse our application will
open with our custom url (Here I given as http://aspdotnet-suresh.com
) that would be like this
Why
this error is coming?
We are getting this error because of we
didn’t set host file with this url
To set url in host file you need to
open this path
C:\Windows\System32\drivers\etc
|
In this folder select hosts file and open with notepad (if you’re
using Windows7 open that file like Run as Administrator) and set the url path
will be like this
127.0.0.1 aspdotnet-suresh.com
(Note:
Don’t include # symbol before IP and
url because if you add # it will ignore our site path)
|
|
After set the url path now run your
application that will show output of your application will be like this
|
|
I hope it helps you to set new site in
system with custom url.
Setting up your ASP.NET server (IIS)
|
|
comments (0)
|
A guide that shows you how to install IIS server and configure it to work with ASP.NET, not just with ASP.
Before starting, be sure you have .NET Framework installed. If not, you can install it using Windows Update or download the package and install manually.
ASP runs inside IIS (Internet Information Services). Therefore first you should install IIS (under Windows 2000, Windows XP or Windows 2003), of course if it isn't already installed.
Usually, you can install it from Control Panel / Add or Remove Programs / Add/Remove Windows Components.
Go to Start Menu / All Programs / Administrative Tools / Internet Information Services.
Choose your computer name (local computer) / Web Sites / Default Web Site.
Right click 'Default Web Site' and select 'Properties'. Choose the 'Home Directory' tab and type in the 'Local Path' the path to where you want your files to be stored. For example 'D:\Server\iis'. This is the root of your webserver, this folder will open when you type http://localhost in your web broswer.
Below, check the 'Script source access', 'Read', 'Write' and 'Directory browsing' values. Click OK and now let's start the server.
Click on the 'Start item' button to start the service. Be sure you don't have any other server running on localhost, Apache for example.
After the server is up and running you can open http://localhost in your web browser. It should show you an empty list if you don't have any files in the folder specified on the 'Local Path'.
You should now be able to open any .asp file and parse it correclty with your browser. Still, you don't have installed ASP.NET, that means you can't run any .ASPX files.
To install ASP.NET follow the steps:
Go to the place where you installed the .NET Framework:
'C:\WINDOWS\Microsoft.NET\Framework'
there should be a folder similar to 'v1.1.4322' (your version of .NET). Note it and let's continue:
Open the MSDOS Command Prompt (Start Menu / Start / Run and type 'cmd').
At the command prompt type (replace 'vxxxxxx' with your version):
%windir%\Microsoft.NET\Framework\vxxxxxx\aspnet_regiis.exe -i
After it finishes, you have one more step:
Open 'Run' from 'Start Menu' and type:
regsvr32 %windir%\Microsoft.NET\Framework\vxxxxxx\aspnet_isapi.dll
Again, by replacing 'vxxxxxx' with your version.
Press OK, wait, and you should receive a confirmation message.
To test it, make a test.aspx file in the folder that you typed in the 'Local Path' ('D:\Server\iis' for example) with the following code:
Open the page with your web broswer using 'http://localhost/test.aspx'.
i hope this helps you Happy Coding
Before starting, be sure you have .NET Framework installed. If not, you can install it using Windows Update or download the package and install manually.
ASP runs inside IIS (Internet Information Services). Therefore first you should install IIS (under Windows 2000, Windows XP or Windows 2003), of course if it isn't already installed.
Usually, you can install it from Control Panel / Add or Remove Programs / Add/Remove Windows Components.
Go to Start Menu / All Programs / Administrative Tools / Internet Information Services.
Choose your computer name (local computer) / Web Sites / Default Web Site.
Right click 'Default Web Site' and select 'Properties'. Choose the 'Home Directory' tab and type in the 'Local Path' the path to where you want your files to be stored. For example 'D:\Server\iis'. This is the root of your webserver, this folder will open when you type http://localhost in your web broswer.
Below, check the 'Script source access', 'Read', 'Write' and 'Directory browsing' values. Click OK and now let's start the server.
Click on the 'Start item' button to start the service. Be sure you don't have any other server running on localhost, Apache for example.
After the server is up and running you can open http://localhost in your web browser. It should show you an empty list if you don't have any files in the folder specified on the 'Local Path'.
You should now be able to open any .asp file and parse it correclty with your browser. Still, you don't have installed ASP.NET, that means you can't run any .ASPX files.
To install ASP.NET follow the steps:
Go to the place where you installed the .NET Framework:
'C:\WINDOWS\Microsoft.NET\Framework'
there should be a folder similar to 'v1.1.4322' (your version of .NET). Note it and let's continue:
Open the MSDOS Command Prompt (Start Menu / Start / Run and type 'cmd').
At the command prompt type (replace 'vxxxxxx' with your version):
%windir%\Microsoft.NET\Framework\vxxxxxx\aspnet_regiis.exe -i
After it finishes, you have one more step:
Open 'Run' from 'Start Menu' and type:
regsvr32 %windir%\Microsoft.NET\Framework\vxxxxxx\aspnet_isapi.dll
Again, by replacing 'vxxxxxx' with your version.
Press OK, wait, and you should receive a confirmation message.
To test it, make a test.aspx file in the folder that you typed in the 'Local Path' ('D:\Server\iis' for example) with the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hello world</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<%response.write("Hello World")%>
</body>
</html> Open the page with your web broswer using 'http://localhost/test.aspx'.
i hope this helps you Happy Coding
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|
how to Create RSS feed Using Asp.net | RSS Feed Sample using asp.net
|
|
comments (1)
|
Introduction:
Step 2: Insert the Data In to the tblRss some Dummy data Url must be related Rss Link just like this
Step 3: In Default.aspx page add these 2 lines of code.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ OutputCache Duration="120" VaryByParam="*" %>
Step4: In code behind
Demo
Here I will explain how to create RSS feed using asp.net.
Description:
RSS stands for "Really Simple Syndication". RSS solves a problem for people who regularly use the web. It allows you to easily stay informed by retrieving the latest content from the sites you are interested in. You save time by not needing to visit each site individually.
To implement RSS feed concept using asp.net just follow below steps
Step 1: Create Table In tblRss SQl Server as below. ColumnName | DataType |
ID | int |
Title | varchar(50) |
Description | varchar(50) |
Url | Varchar(50) |
ID | Title | Description | Url |
1 | Test | testing | http://aspdotnet-suresh.com |
2 | aspdotnet | aspdotnet-suresh | http://aspdotnet-suresh.com |
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ OutputCache Duration="120" VaryByParam="*" %>
Step4: In code behind
| using System; using System.Data; using System.Data.SqlClient; using System.Text; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Xml; public partial class GridviewEditUpdate : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string connectionString = "Data Source=MYCBJ017550027;Initial Catalog=MySamplesDB;Integrated Security=True"; DataTable dt = new DataTable(); SqlConnection conn = new SqlConnection(connectionString); using (conn) { SqlDataAdapter ad = new SqlDataAdapter("SELECT * from tblRSS", conn); ad.Fill(dt); } Response.Clear(); Response.ContentType = "text/xml"; XmlTextWriter TextWriter = new XmlTextWriter(Response.OutputStream, Encoding.UTF8); TextWriter.WriteStartDocument(); //Below tags are mandatory rss TextWriter.WriteStartElement("rss"); TextWriter.WriteAttributeString("version", "2.0"); // Channel tag will contain RSS feed details TextWriter.WriteStartElement("channel"); TextWriter.WriteElementString("title", "C#.NET,ASP.NET Samples and Tutorials"); TextWriter.WriteElementString("link", "http://aspdotnet-suresh.blogspot.com"); TextWriter.WriteElementString("description", "Free ASP.NET articles,C#.NET,ASP.NET tutorials and Examples,Ajax,SQL Server,Javascript,XML,GridView Articles and code examples -- by Suresh Dasari"); TextWriter.WriteElementString("copyright", "Copyright 2009 - 2010 aspdontnet-suresh.blogspot.com. All rights reserved."); foreach (DataRow oFeedItem in dt.Rows) { TextWriter.WriteStartElement("item"); TextWriter.WriteElementString("title", oFeedItem["Title"].ToString()); TextWriter.WriteElementString("description", oFeedItem["Description"].ToString()); TextWriter.WriteElementString("link", oFeedItem["URL"].ToString()); TextWriter.WriteEndElement(); } TextWriter.WriteEndElement(); TextWriter.WriteEndElement(); TextWriter.WriteEndDocument(); TextWriter.Flush(); TextWriter.Close(); Response.End(); } } |
RichTextbox example or sample in asp.net or how to insert or store richtextbox data into database and display richtextbox data from database in gridview using asp.net
|
|
comments (0)
|
Introduction
Here I will explain how to use richtextbox and how we can save our richtextbox data in database and how we can retrieve and display saved richtextbox data into our application using asp.net.
Description:
Today I am writing this post to explain about freely available richtextbox. I found one free available richtextbox. We can validate and we can use richtextbox very easily and by using this richtextbox we can insert data in different formats like bold, italic and different color format texts and we can insert images also. To use free Richtextbox download available dll here FreeTextbox . After download dll from that site create one new website in visual studio and add FreeTextbox dll reference to newly created website after that design aspx page like this
After that Design your aspx page like this
<%@ Register Assembly="FreeTextBox" Namespace="FreeTextBoxControls" TagPrefix="FTB" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Richtextbox Sample</title>
<script type="text/javascript">
function validate() {
var doc = document.getElementById('FreeTextBox1');
if (doc.value.length == 0) {
alert('Please Enter data in Richtextbox');
return false;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<FTB:FreeTextBox ID="FreeTextBox1" runat="server">
</FTB:FreeTextBox>
</td>
<td valign="top">
<asp:GridView runat="server" ID="gvdetails" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="RichtextBoxData">
<ItemTemplate>
<asp:Label ID="lbltxt" runat="server" Text='<%#Bind("RichtextData") %>'/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</div>
<asp:Button ID="btnSubmit" runat="server" OnClientClick="return validate()"
Text="Submit" onclick="btnSubmit_Click" /><br />
<asp:Label ID="lbltxt" runat="server"/>
</form>
</body>
</html>
|
After that run your application richtextbox appears like this
|
|
Now our richtextbox is ready do you know how we can save richtextbox data into database and which datatype is used to save richtextbox data and do you know how to display richtextbox on our web page no problem we can implement it now.
To save richtextbox data we need to use datatype nvarchar(MAX) now Design table like this in your SQL Server database and give name as RichTextBoxData
Column Name
|
Data Type
|
Allow Nulls
|
Id
|
Int(Set Identity=true)
|
No
|
RichTextData
|
nvarchar(MAX)
|
Yes
|
After that add following namespaces in code behind
using System.Data;
using System.Data.SqlClient;
|
Now write the following code in code behind
SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB");
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
BindGridview();
}
}
protected void BindGridview()
{
con.Open();
SqlCommand cmd = new SqlCommand("select RichTextData from RichTextBoxData", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
gvdetails.DataSource = ds;
gvdetails.DataBind();
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
con.Open();
SqlCommand cmd = new SqlCommand("insert into RichTextBoxData(RichTextData) values(@Richtextbox)", con);
cmd.Parameters.AddWithValue("@Richtextbox", FreeTextBox1.Text);
cmd.ExecuteNonQuery();
con.Close();
FreeTextBox1.Text = "";
BindGridview();
}
|
Demo
|
|
Download sample code attached
jQuery Enable or Disable Textbox Controls on WebPage in Asp.net
|
|
comments (0)
|
Introduction:
Description:
In previous articles I explained Enable/Disable all controls on webpage, enable/disable particular controls on page using JQuery in asp.net and another article Enable/disable button using JavaScript and many articles relating to JQuery and JavaScript. Now I will explain how to enable or disable textboxes on a page focus using JQuery in asp.net.
In previous articles I explained Enable/Disable all controls on webpage, enable/disable particular controls on page using JQuery in asp.net and another article Enable/disable button using JavaScript and many articles relating to JQuery and JavaScript. Now I will explain how to enable or disable textboxes on a page focus using JQuery in asp.net.
To
implement this one we need to write code as shown below in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Disable or Enable textbox Controls on a Page</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#btnEnableDisable").toggle(function() {
$("input:text").attr("disabled", "disabled");
$(this).attr("disabled", "");
}, function() {
$("input:text").attr("disabled", "");
});
});
</script>
</head>
<body>
<form id="form1"
runat="server">
<table>
<tr>
<td><b>Name:</b></td>
<td><asp:TextBox ID="txtName" runat="server"/></td>
</tr>
<tr>
<td><b>First name:</b></td>
<td><asp:TextBox ID="txtfname" runat="server"/></td>
</tr>
<tr>
<td><b>Last name: </b></td>
<td><asp:TextBox ID="txtlname" runat="server"/></td>
</tr>
<tr>
<td><b>Location: </b></td>
<td><asp:TextBox ID="txtlocation" runat="server"/></td>
</tr>
<tr>
<td></td>
<td><asp:Button ID="btnEnableDisable" runat="server" Text="Enable/Disable"
/></td>
</tr>
</table>
</form>
</body>
</html>
|
If
you observe above code in header section I added script file link by using that
file we have a chance to interact with JQuery and in the script we have btnEnableDisable button toggle function like
<script type="text/javascript">
$(document).ready(function()
{
$("#btnEnableDisable").toggle(function() {
$("input:text").attr("disabled", "disabled");
$(this).attr("disabled", "");
}, function()
{
$("input:text").attr("disabled", "");
});
});
</script>
|
Here
whenever we click on button it will disable or enable all textbox controls on
page
Demo
If you want to enable or disable particular controls
check this article Enable/Disable particular controls on page using jQuery
jQuery fadein fadeout fadeto Effects div Example in Asp.net
|
|
comments (0)
|
Introduction:
Here I will explain how to implement simple div with fadein fadeout, fadeto effects using JQuery in asp.net.
Description:
In previous posts I explained Draggable and Resizable example, split the string, add fade in effect to page, Password strength jquery plugin examples and many articles relating to JQuery. Now I will explain how implement simple div with fadein fadeout, fadeto effects in JQuery.
In previous posts I explained Draggable and Resizable example, split the string, add fade in effect to page, Password strength jquery plugin examples and many articles relating to JQuery. Now I will explain how implement simple div with fadein fadeout, fadeto effects in JQuery.
To
implement fadein fadeout, fadeto effects div in JavaScript we need to write
much code but in JQuery we can achieve this
functionality just by simple properties fadein, fadeout and fadeto that would
be like as shown below
<script type="text/javascript">
$(document).ready(function()
{
$('#fadeindiv').fadeIn('slow');
$('#fadeoutdiv').fadeOut('slow');
$('#fadetodiv').fadeTo('slow', 0.2);
});
</script>
|
OR
<script type="text/javascript">
$(document).ready(function()
{
$('#fadeindiv').fadeIn(2000); $('#fadeoutdiv').fadeOut(2000); $('#fadetodiv').fadeTo(2000, 0.2);
});
</script>
|
If
you observe above script I used one div with fadeIn, Second div with fadeout
and another div with fadeTo properties.
fadein(): This method display the matched
elements with fade in effect
fadeOut(): This method hide the matched elements with
fade out or transparent effect
fadeTo(): This method fades the matched
elements with opacity. In this we can set the opacity between 0 and 1 (If you
observe above fadeTo method I mentioned
0.2)
If
you want check this code in sample check below code
Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery fadein fadeout and fadeTo effects for div example</title>
<style type="text/css">
.fadediv{
width: 150px; height: 50px; padding: 0.5em;background:#EB5E00;color:#fff;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
</head>
<body>
<form id="form1"
runat="server">
<h2> jQuery fadeIn, fadeOut and fadeTo effects for div Example</h2>
<table>
<tr>
<td>
<div id="fadeindiv"
class="fadediv">
<b>Click me - fadeIn()</b>
</div>
</td>
<td>
<div id="fadetodiv" class="fadediv">
<b>Click me - fadeTo()</b>
</div>
</td>
<td>
<div id="fadeoutdiv" class="fadediv">
<b>Click me - fadeOut()</b>
</div>
</td>
</tr>
<tr>
<td colspan="3"><button
id="btnReset">Reset</button></td>
</tr>
</table>
<script type="text/javascript">
// Applying fadein effect
$("#fadeindiv").click(function() {
$(this).hide().fadeIn('slow');
});
// Applying fadeout effect
$("#fadeoutdiv").click(function() {
$(this).fadeOut('slow');
});
// Applying fadeto effect
$("#fadetodiv").click(function() {
$(this).fadeTo('slow', 0.2);
});
// Reset the div's
$('#btnReset').click(function() {
$('#fadeindiv').fadeIn('slow');
$("#fadeoutdiv").fadeIn('slow');
$("#fadetodiv").fadeIn('slow');
})
</script>
</form>
</body>
</html>
|
Live
Demo
To check Live demo
click on below div’s
|
||||||||
WPF (Windows Presentation Foundation) in .NET
|
|
comments (0)
|
Windows Presentation Foundation (WPF)
The Windows Presentation Foundation is Microsoft’s next generation UI framework to create applications with a rich user experience. It is part of the .NET framework 3.0 and higher.
WPF combines application UIs, 2D graphics, 3D graphics, documents and multimedia into one single framework. Its vector based rendering engine uses hardware acceleration of modern graphic cards. This makes the UI faster, scalable and resolution independent.
Separation of Appearance and Behavior
WPF separates the appearance of a user interface from its behavior. The appearance is generally specified in the Extensible Application Markup Language (XAML), the behavior is implemented in a managed programming language like C# or Visual Basic. The two parts are tied together by data binding, events and commands. The separation of appearance and behavior brings the following benefits:
Controls in WPF are extremely composable. You can define almost any type of controls as content of another. Although this flexibility sounds horrible to designers, it’s a very powerful feature if you use it appropriate. Put an image into a button to create an image button, or put a list of videos into a combo box to choose a video file.
Because of the strict separation of appearance and behavior you can easily change the look of a control. The concept of styles let you skin controls almost like CSS in HTML. Templates let you replace the entire appearance of a control.
The following example shows a default WPF button and a customized button.
Resolution independence
All measures in WPF are logical units - not pixels. A logical unit is a 1/96 of an inch. If you increase the resolution of your screen, the user interface stays the same size - if just gets crispier. Since WPF builds on a vector based rendering engine it's incredibly easy to build scalable user interfaces.
Today XAML is used to create user interfaces in WPF, Silver light, declare workflows in WF and for electronic paper in the XPS standard.
The Windows Presentation Foundation is Microsoft’s next generation UI framework to create applications with a rich user experience. It is part of the .NET framework 3.0 and higher.
WPF combines application UIs, 2D graphics, 3D graphics, documents and multimedia into one single framework. Its vector based rendering engine uses hardware acceleration of modern graphic cards. This makes the UI faster, scalable and resolution independent.
Separation of Appearance and Behavior
WPF separates the appearance of a user interface from its behavior. The appearance is generally specified in the Extensible Application Markup Language (XAML), the behavior is implemented in a managed programming language like C# or Visual Basic. The two parts are tied together by data binding, events and commands. The separation of appearance and behavior brings the following benefits:
- Appearance and behavior are loosely coupled
- Designers and developers can work on separate models.
- Graphical design tools can work on simple XML documents instead of parsing code.
Controls in WPF are extremely composable. You can define almost any type of controls as content of another. Although this flexibility sounds horrible to designers, it’s a very powerful feature if you use it appropriate. Put an image into a button to create an image button, or put a list of videos into a combo box to choose a video file.
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="speaker.png" Stretch="Uniform"/>
<TextBlock Text="Play Sound" />
</StackPanel>
</Button>
Highly customizableBecause of the strict separation of appearance and behavior you can easily change the look of a control. The concept of styles let you skin controls almost like CSS in HTML. Templates let you replace the entire appearance of a control.
The following example shows a default WPF button and a customized button.
Resolution independence
All measures in WPF are logical units - not pixels. A logical unit is a 1/96 of an inch. If you increase the resolution of your screen, the user interface stays the same size - if just gets crispier. Since WPF builds on a vector based rendering engine it's incredibly easy to build scalable user interfaces.
Introduction to XAML
XAML stands for Extensible Application Markup Language. It’s a simple language based on XML to create and initialize .NET objects with hierarchical relations. Although it was originally invented for WPF it can be used to create any kind of object trees.Today XAML is used to create user interfaces in WPF, Silver light, declare workflows in WF and for electronic paper in the XPS standard.
Advantages of XAML
All you can do in XAML can also be done in code. XAML is just another way to create and initialize objects. You can use WPF without using XAML. It's up to you if you want to declare it in XAML or write it in code. Declare your UI in XAML has some advantages:- XAML code is short and clear to read
- Separation of designer code and logic
- Graphical design tools like Expression Blend require XAML as source.
- The separation of XAML and UI logic allows it to clearly separate the roles of designer and developer.
XAML vs. Code
As an example we build a simple StackPanel with a textblock and a button in XAML and compare it to the same code in C#. <StackPanel><TextBlock Margin="20">Welcome to the World of XAML</TextBlock>
<Button Margin="10" HorizontalAlignment="Right">OK</Button>
</StackPanel> The same expressed in C# will look like this: // Create the StackPanelStackPanel stackPanel = new StackPanel();
this.Content = stackPanel;
// Create the TextBlockTextBlock textBlock = new TextBlock();
textBlock.Margin = new Thickness(10);
textBlock.Text = "Welcome to the World of XAML";
stackPanel.Children.Add (textBlock);
// Create the ButtonButton button = new Button ();
button.Margin= new Thickness (20);
button.Content = "OK";
stackPanel.Children.Add(button);
As you can see is the XAML version much shorter and clearer to read. And that's the power of XAMLs expressiveness.Properties as Elements
Properties are normally written inline as known from XML<Button Content="OK" />. But what if we want to put a more complex object as content like an image that has properties itself or maybe a whole grid panel? .To do that we can use the property element syntax. This allows us to extract the property as an own child element. <Button><Button.Content>
<Image Source="Images/OK.png" Width="50" Height="50" />
</Button.Content>
</Button> Implicit Type conversion
A very powerful construct of WPF are implicit type converters. They do their work silently in the background. When you declare a Border Brush, the word "Blue" is only a string. The implicitBrush Converter makes a System.Windows.Media.Brushes.Blue out of it. The same regards to the border thickness that is being converted implicit into a Thickness object. WPF includes a lot of type converters for built-in classes, but you can also write type converters for your own classes.


Subscribe by RSS
Subscribe by Email





























