Here I will show you how to get data from a textbox and radio button in ASP.NET(C#) using jquery through webmethod.
For this tutorial you need to know about the webmethod, jquery and ajax.
For webmethod you can follow this link.
Lets come to the example.
Here we have taken one textbox for user input and two radio button to check. And three label to show output. and a normal html button to submit.
Now on this button click through jquery and ajax we will get the value and will send it to the CS page.
Add a jquery lib in your page. You can also add google lib in your page.
Add this code in your page to add google jquery lib.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
To get data write the code in script tag under button click function
Now to send the data into CS page write the code
Type is POST and url is url: '/Default.aspx/ShowData',
that means send this data to Default.aspx page and there is a function names ShowData() to receive the data and argument as named inputText as string.
Now in the CS page write this code
public static string ShowData(string inputText)
{
// place your data & logic here and return the data to show as output
string[] ip = inputText.Split('~');
// place your logic by using ip[0], ip[1], ip[2]...
return string.Format("{0}", inputText);
}
Note : Before run the code need to add a namespace using System.Web.Services; for the webmethod.
Now check the whole code below.
ASPX Page
CS Code :
You can download the code from here and don't forget to comment.
For this tutorial you need to know about the webmethod, jquery and ajax.
For webmethod you can follow this link.
Lets come to the example.
Here we have taken one textbox for user input and two radio button to check. And three label to show output. and a normal html button to submit.
<asp:TextBox ID="txtData" runat="server"></asp:TextBox>
<input id="btnSubmit" type="button" value="Submit" />
Type :
<asp:RadioButton ID="rbtnCS" runat="server" GroupName="type" />
<asp:RadioButton ID="rbtnVB" runat="server" GroupName="type"/>
Name : <asp:Label ID="lblName" runat="server" Text="CS"></asp:Label>
Type :<asp:Label ID="lblType" runat="server" Text="VB"></asp:Label>
<asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
Now on this button click through jquery and ajax we will get the value and will send it to the CS page.
Add a jquery lib in your page. You can also add google lib in your page.
Add this code in your page to add google jquery lib.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
To get data write the code in script tag under button click function
var data = $('#<%= txtData.ClientID %>').val();
var rCS = document.getElementById('<%= rbtnCS.ClientID %>').checked;
var rVB = document.getElementById('<%= rbtnVB.ClientID %>').checked;
var input;
if (rCS == true)
input = data +"~CS";
else if (rVB == true)
input = data + "~VB";
else
input = data + "~CS";
Now to send the data into CS page write the code
$.ajax(
{
type: 'POST',
url: '/Default.aspx/ShowData',
data: '{\'inputText\':\'' + input + '\'}',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function (response) {
if (response != null && response.d != null) {
var up_desc = response.d;
var sp_desc = up_desc.split("~");
alert(sp_desc);
document.getElementById('<%=lblName.ClientID %>').innerHTML = sp_desc[0];
document.getElementById('<%=lblType.ClientID %>').innerHTML = sp_desc[1];
$lblMessage.html(response.d);
}
},
failure: function (response) {
alert(response.d);
}
});
Type is POST and url is url: '/Default.aspx/ShowData',
that means send this data to Default.aspx page and there is a function names ShowData() to receive the data and argument as named inputText as string.
Now in the CS page write this code
using System.Web.Services; // namespace[WebMethod]
public static string ShowData(string inputText)
{
// place your data & logic here and return the data to show as output
string[] ip = inputText.Split('~');
// place your logic by using ip[0], ip[1], ip[2]...
return string.Format("{0}", inputText);
}
Note : Before run the code need to add a namespace using System.Web.Services; for the webmethod.
Now check the whole code below.
ASPX Page
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ASP.NET WebMethod | </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
ASP.NET WebMethod Example...
<br />
Your Data:<asp:TextBox ID="txtData" runat="server"></asp:TextBox>
<input id="btnSubmit" type="button" value="Submit" />
<br />
Type :
<asp:RadioButton ID="rbtnCS" runat="server" GroupName="type" />
<asp:RadioButton ID="rbtnVB" runat="server" GroupName="type"/>
Your data : <br />
Name : <asp:Label ID="lblName" runat="server" Text=""></asp:Label>
<br />
Type :<asp:Label ID="lblType" runat="server" Text=""></asp:Label>
<br />
<asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
<br />
<br />
For more visit my blog here <a href="http://arka-asp.blogspot.in/">http://arka-asp.blogspot.in/</a>.
</div>
</form>
<script type="text/javascript">
$('#btnSubmit').click(function (e) {
var data = $('#<%= txtData.ClientID %>').val();
var rCS = document.getElementById('<%= rbtnCS.ClientID %>').checked;
var rVB = document.getElementById('<%= rbtnVB.ClientID %>').checked;
var input;
if (rCS == true)
input = data +"~CS";
else if (rVB == true)
input = data + "~VB";
else
input = data + "~CS";
var $lblMessage = $('#<%= lblMessage.ClientID %>');
$.ajax(
{
type: 'POST',
url: '/Default.aspx/ShowData',
data: '{\'inputText\':\'' + input + '\'}',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function (response) {
if (response != null && response.d != null) {
var up_desc = response.d;
var sp_desc = up_desc.split("~");
alert(sp_desc);
document.getElementById('<%=lblName.ClientID %>').innerHTML = sp_desc[0];
document.getElementById('<%=lblType.ClientID %>').innerHTML = sp_desc[1];
$lblMessage.html(response.d);
}
},
failure: function (response) {
alert(response.d);
}
});
});
</script>
</body>
</html>
CS Code :
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string ShowData(string inputText)
{
// place your data & logic here and return the data to show as output
string[] ip = inputText.Split('~');
// place your logic by using ip[0], ip[1], ip[2]...
return string.Format("{0}", inputText);
}
}
You can download the code from here and don't forget to comment.
great job...........
ReplyDelete