protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string InsertData(string FirstName, string LastName, string Email, string Address)
{
string Retval = string.Empty;
// Do your task
return Retval;
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngTEst.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="scripts/jquery-1.10.2.min.js"></script>
<link href="Assets/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<strong>First Name</strong>
<input type="text" id="txtFirstName" class="form-control validateCtrl" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<strong>Last Name</strong>
<input type="text" id="txtLastName" class="form-control validateCtrl" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<strong>First Name</strong>
<input type="text" id="txtEmail" class="form-control validateCtrl" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<strong>Last Name</strong>
<input type="text" id="txtAddress" class="form-control validateCtrl" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label id="lblmsg" style="font-weight: bold; color: Red" />
</div>
<div class="col-md-6">
<input type="button" id="btnSubmit" value="Submit" />
</div>
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#btnSubmit').click(function () {
var flag = false;
$(".validateCtrl").each(function (index) {
if ($(this).val() == "") {
$(this).css("border", "1px solid red")
flag = true;
}
else {
$(this).css("border", "");
}
});
if (flag) {
$('#lblmsg').html("Please fill all required field");
return false;
}
else {
alert("validated")
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/InsertData",
data: "{'FirstName':'" + $('#txtFirstName').val() + "','LastName':'" + $('#txtLastName').val() + "','Email':'" + $('#txtEmail').val() + "','Address':'" + $('#txtAddress').val() + "'}",
dataType: "json",
success: function (data) {
var obj = data.d;
if (obj == 'true') {
$('#lblmsg').html("Details Submitted Successfully");
}
},
error: function (result) {
$('#lblmsg').html("Oops! somthing went wrong.");
}
});
}
})
});
</script>
</body>
</html>
{
}
[WebMethod]
public static string InsertData(string FirstName, string LastName, string Email, string Address)
{
string Retval = string.Empty;
// Do your task
return Retval;
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngTEst.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="scripts/jquery-1.10.2.min.js"></script>
<link href="Assets/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<strong>First Name</strong>
<input type="text" id="txtFirstName" class="form-control validateCtrl" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<strong>Last Name</strong>
<input type="text" id="txtLastName" class="form-control validateCtrl" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<strong>First Name</strong>
<input type="text" id="txtEmail" class="form-control validateCtrl" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<strong>Last Name</strong>
<input type="text" id="txtAddress" class="form-control validateCtrl" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label id="lblmsg" style="font-weight: bold; color: Red" />
</div>
<div class="col-md-6">
<input type="button" id="btnSubmit" value="Submit" />
</div>
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#btnSubmit').click(function () {
var flag = false;
$(".validateCtrl").each(function (index) {
if ($(this).val() == "") {
$(this).css("border", "1px solid red")
flag = true;
}
else {
$(this).css("border", "");
}
});
if (flag) {
$('#lblmsg').html("Please fill all required field");
return false;
}
else {
alert("validated")
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/InsertData",
data: "{'FirstName':'" + $('#txtFirstName').val() + "','LastName':'" + $('#txtLastName').val() + "','Email':'" + $('#txtEmail').val() + "','Address':'" + $('#txtAddress').val() + "'}",
dataType: "json",
success: function (data) {
var obj = data.d;
if (obj == 'true') {
$('#lblmsg').html("Details Submitted Successfully");
}
},
error: function (result) {
$('#lblmsg').html("Oops! somthing went wrong.");
}
});
}
})
});
</script>
</body>
</html>
No comments:
Post a Comment