Introduction: In
this post I try to explain how we can use the Jquery Validation in Asp.net and insert values into Database.
Description:
I have created a table TABLE_REGISTARTION.
Here USER_ID is primary key.
USER_ID
|
int
|
USERNAME
|
varchar(50)
|
FIRST_NAME
|
varchar(50)
|
LAST_NAME
|
varchar(50)
|
USER_EMAIL
|
varchar(50)
|
USER_PHONE
|
varchar(50)
|
ADDRESS
|
varchar(50)
|
CITY
|
varchar(50)
|
STATE
|
varchar(50)
|
ZIP
|
varchar(50)
|
Put the below mention Jquery code between Head tag (before the close of Head
Tag).
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#form1").validate({
onsubmit: false
});
$("#btnregister").click(function (evt) {
var
isValid = $("#form1").valid();
if
(!isValid)
evt.preventDefault();
});
});
</script>
Also add the style between Head Tag as mention below:
<style type="text/css">
form {
margin: 0 auto;
width: 500px;
}
fieldset {
margin-bottom:
20px;
}
table {
width: 470px;
margin-top: 10px;
}
table th {
font-weight: bold;
text-align: left;
}
label {
clear: both;
float: left;
line-height: 24px;
margin-top: 10px;
padding-right:
10px;
text-align: right;
vertical-align:
middle;
width: 125px;
}
label.error {
clear: none;
color: Red;
float: left;
padding-left: 10px;
white-space: nowrap;
}
input {
float: left;
margin-top: 10px;
}
input[type=submit] {
clear: both;
margin: 10px 0 10px 120px;
}
</style>
Add a new webform to project. Drag and drop the control from
Toolbox as added below:
<table border="1px"><tr><td><b>Validate Employee Registration Form Using Jquery</b></td></tr>
<tr><td>
<table border="1px">
<tr><td><label for="Username">User Name:</label></td>
<td><asp:TextBox runat="server" ID="txtusername" CssClass="required" /></td></tr>
<tr><td><label for="Firstname">First Name:</label></td>
<td><asp:TextBox runat="server" ID="txtfirstname" CssClass="required" /></td></tr>
<tr><td> <label for="LastName">Last
Name:</label></td>
<td><asp:TextBox runat="server" ID="txtlastname" CssClass="required" /></td></tr>
<tr><td> <label for="Email">Email:</label></td>
<td><asp:TextBox runat="server" ID="txtemail" CssClass="required email" /></td></tr>
<tr><td> <label for="Phone">Phone:</label></td>
<td><asp:TextBox runat="server" ID="txtphone" CssClass="required digits" /></td></tr>
<tr><td> <label for="Address">Address:</label></td>
<td><asp:TextBox runat="server" ID="txtaddress" CssClass="required" /></td></tr>
<tr><td> <label for="City">City:</label></td>
<td><asp:TextBox runat="server" ID="txtcity" CssClass="required" /></td></tr>
<tr><td> <label for="State">State:</label></td>
<td><asp:TextBox runat="server" ID="txtstate" CssClass="required" /></td></tr>
<tr><td> <label for="Zip">Zip:</label></td>
<td align="center"><asp:TextBox runat="server"
ID="txtzip"
CssClass="required
digits" /></td></tr>
<tr><td> </td><td><asp:Button runat="server" ID="btnregister" Text="Register"
onclick="btnregister_Click"/></td></tr></table>
</td></tr></table>
Note: Don’t
forget to add Connectionstring in web.config file.
Now go to .aspx.cs page and write the below mention code:
using
System.Data;
using
System.Data.SqlClient;
using
System.Configuration;
SqlConnection con
= new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ToString());
protected void btnregister_Click(object
sender, EventArgs e)
{
try
{
SqlCommand
cmd = new SqlCommand("Insert into
TABLE_REGISTARTION(USERNAME,FIRST_NAME,LAST_NAME,USER_EMAIL,USER_PHONE,ADDRESS,CITY,STATE,ZIP)
VALUES
(@USERNAME,@FIRST_NAME,@LAST_NAME,@USER_EMAIL,@USER_PHONE,@ADDRESS,@CITY,@STATE,@ZIP)
", con);
con.Open();
cmd.Parameters.AddWithValue("@USERNAME", txtusername.Text);
cmd.Parameters.AddWithValue("@FIRST_NAME", txtfirstname.Text);
cmd.Parameters.AddWithValue("@LAST_NAME", txtlastname.Text);
cmd.Parameters.AddWithValue("@USER_EMAIL", txtemail.Text);
cmd.Parameters.AddWithValue("@USER_PHONE", txtphone.Text);
cmd.Parameters.AddWithValue("@ADDRESS", txtaddress.Text);
cmd.Parameters.AddWithValue("@CITY", txtcity.Text);
cmd.Parameters.AddWithValue("@STATE", txtstate.Text);
cmd.Parameters.AddWithValue("@ZIP", txtzip.Text);
cmd.ExecuteNonQuery();
con.Close();
cmd.Dispose();
Clear();
}
catch (Exception ex)
{
}
}
public void Clear()
{
txtusername.Text = "";
txtfirstname.Text = "";
txtlastname.Text = "";
txtemail.Text = "";
txtphone.Text = "";
txtaddress.Text = "";
txtcity.Text = "";
txtstate.Text = "";
txtzip.Text = "";
}
In VB (.aspx.vb)
Imports System.Data
Imports
System.Data.SqlClient
Imports
System.Configuration
Dim con
As New SqlConnection(ConfigurationManager.ConnectionStrings("con").ToString())
Protected Sub Order_Click(ByVal
sender As Object,
ByVal e As
System.EventArgs) Handles
Order.Click
Try
Dim
cmd As New SqlCommand("Insert
into
TABLE_REGISTARTION(USERNAME,FIRST_NAME,LAST_NAME,USER_EMAIL,USER_PHONE,ADDRESS,CITY,STATE,ZIP)
VALUES
(@USERNAME,@FIRST_NAME,@LAST_NAME,@USER_EMAIL,@USER_PHONE,@ADDRESS,@CITY,@STATE,@ZIP)
", con)
con.Open()
cmd.Parameters.AddWithValue("@USERNAME", txtusername.Text)
cmd.Parameters.AddWithValue("@FIRST_NAME", txtfirstname.Text)
cmd.Parameters.AddWithValue("@LAST_NAME", txtlastname.Text)
cmd.Parameters.AddWithValue("@USER_EMAIL", txtemail.Text)
cmd.Parameters.AddWithValue("@USER_PHONE", txtphone.Text)
cmd.Parameters.AddWithValue("@ADDRESS", txtaddress.Text)
cmd.Parameters.AddWithValue("@CITY", txtcity.Text)
cmd.Parameters.AddWithValue("@STATE", txtstate.Text)
cmd.Parameters.AddWithValue("@ZIP", txtzip.Text)
cmd.ExecuteNonQuery()
con.Close()
cmd.Dispose()
Clear()
Catch
ex As Exception
End Try
End Sub
Public Sub Clear()
txtusername.Text = ""
txtfirstname.Text = ""
txtlastname.Text = ""
txtemail.Text = ""
txtphone.Text = ""
txtaddress.Text = ""
txtcity.Text = ""
txtstate.Text = ""
txtzip.Text = ""
End Sub
Now run the project
and check the result.
If yes post your comment to admire my work. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.
No comments:
Post a Comment