http://www.imomin.webs.com

Thank You for Visit Me

Md. Mominul Islam

view:  full / summary

JQuery Check Password Strength Example in asp.net | Display Validation error message with images in asp.net

Posted by imomins on October 8, 2012 at 12:55 AM Comments comments (0)
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.

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 &nbsp; as text for IE
label.html("&nbsp;").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">&nbsp;</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


Download sample code attached

 
Protected by Copyscape Unique Content Checker

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 RSS subscribe by email Subscribe by Email

JQuery Highlight border and background color of form controls when validation fails in asp.net

Posted by imomins on October 8, 2012 at 12:50 AM Comments 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.


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.
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

Posted by imomins on October 8, 2012 at 12:50 AM Comments 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.

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

Posted by imomins on October 8, 2012 at 12:40 AM Comments 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.


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.

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)

Posted by imomins on October 8, 2012 at 12:35 AM Comments 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:


<!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
Protected by Copyscape Unique Content Checker

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 RSS subscribe by email Subscribe by Email

how to Create RSS feed Using Asp.net | RSS Feed Sample using asp.net

Posted by imomins on October 8, 2012 at 12:25 AM Comments comments (1)
Introduction:

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)
Step 2: Insert the Data In to the tblRss some Dummy data Url must be related Rss Link just like this

ID
Title
Description
Url
1
Test
testing
http://aspdotnet-suresh.com
2
aspdotnet
aspdotnet-suresh
http://aspdotnet-suresh.com
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


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();
}
}
     
Demo




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

Posted by imomins on October 8, 2012 at 12:20 AM Comments 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

Posted by imomins on October 7, 2012 at 2:55 PM Comments comments (0)
Introduction

Here I will explain how to enable or disable textboxes on a page focus using
JQuery in asp.net.

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.

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

Posted by imomins on October 7, 2012 at 2:50 PM Comments 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.

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

jQuery fadeIn, fadeOut and fadeTo effects for div Example

Click me - fadeIn()
Click me - fadeTo()
Click me - fadeOut()
Reset
.fadediv{ width: 150px; height: 50px; padding: 0.5em;background:#EB5E00;color:#fff; } // 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").fadeTo('slow', 1); })


WPF (Windows Presentation Foundation) in .NET

Posted by imomins on October 7, 2012 at 4:55 AM Comments 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:

  • 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.
Rich composition
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 customizable
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.

 


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 StackPanel

StackPanel stackPanel = new StackPanel();

this.Content = stackPanel;

 

// Create the TextBlock

TextBlock textBlock = new TextBlock();

textBlock.Margin = new Thickness(10);

textBlock.Text = "Welcome to the World of XAML";

stackPanel.Children.Add (textBlock);

 

// Create the Button

Button 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 implicit Brush 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.

 


Rss_feed