how to get value from label control inside a user control

Saravanakumar Sekaran

11y10.3k

Hi Guys,

I Want to get value from label control inside a user control from asp.net page using jquery and pass this object inside and insert the record using jquery Ajax ( web Methods). The Method is inside the asps.cs page. pls do the needful

9 Replies

Know the answer? Post it — somebody with the same question will find it here.

Govinda Rajulu Yemineni11y ago
Hi Saravana Kumar,

The UserControl
Following is the HTML Markup of a simple UserControl which consists of a TextBox for capturing name of the User.
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UC_Name.ascx.cs" Inherits="UC_Name" %>
Name: <asp:TextBox ID = "txtName" runat="server" />

The Page
The following HTML Markup of the ASPX Page contains the UserControl (discussed earlier) and a Button.
The button has an OnClientClick event handler which executes a JavaScript function which validates the TextBox txtName present inside the UserControl ucName.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Src="~/UC_Name.ascx" TagName="Name" TagPrefix="uc" %>
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>title>
head>
<body>
<form id="form1" runat="server">
<uc:Name ID="ucName" runat="server" />
<br />
<br />
<asp:Button Text="Validate" runat="server" OnClientClick="return Validate()" />
form>
body>
html>

In the following JavaScript function, the TextBox is referenced using ASP.Net FindControl method and then its ClientID is used inside the document.getElementById method to get the reference of the TextBox.

<script type="text/javascript">
function Validate() {

var txtName = document.getElementById('<%=ucName.FindControl("txtName").ClientID %>');

if (txtName.value == "") {
alert("Please enter name!");
return false;
}
return true;
}
script>

after getting label value you can use it in Jquery AJAX method

for more clarification please refer the following URL

http://www.aspsnippets.com/Articles/Find-and-access-control-inside-UserControl-ASCX-from-Parent-Page-ASPX-using-JavaScript-in-ASPNet.aspx
Manas Mohapatra11y ago
Hi,

Suppose your textbox/label ID is txtField in usercontrol:

Then you can value from txtField using jQuery:
var fieldVal = $("<%= txtField.ClientID %>").val();

If you are using label then you need to write:
var fieldVal = $("<%= txtField.ClientID %>").text();
Saravanakumar Sekaran11y ago
Thank U but i need to call that control inside the user control using Jquery.
Manas Mohapatra11y ago
Hi,

Suppose you register user control in your aspx like:
<%@ Register TagPrefix="UC" TagName="UserInfo" Src="~/UserInfoBoxControl.ascx" %>

Then you need to use user control in aspx page

You need to add following code in .aspx.cs file to get textbox value:
UcUserInfo objTestControl = (UcUserInfo)Page.FindControl("UcUserInfo");
TextBox objTextBox = objTestControl.FindControl("txtField");
string strFirstName = objTextBox.Text;

Here txtField is ID of textfield in Usercontrol.
Saravanakumar Sekaran11y ago
I call a user control from a aspx page and that user control had a lable and text i want to get that value pls help
Rajeesh Menoth11y ago
Hi saravana kumar,

Try the bellow links..

1) http://www.aspdotnet-suresh.com/2015/05/insert-data-into-database-using-jquery-ajax-method-in-aspnet-csharp-vbnet.html

2) http://www.aspsnippets.com/Articles/Insert-Update-Data-to-Database-with-jQuery-AJAX-and-WebMethod-in-ASPNet.aspx
Manas Mohapatra11y ago
I am not sure when you say to pass an object. But as per my understanding you want to pass a custom object from client side. If so please follow below code:

Webservice
public static void getContact(Employee NewPerson)
{
// Check NewPerson Object
string name = NewPerson.name;
}

JavaScript/jQuery
$(document).ready(function () {
var employee = {'name':'" + $("#name").val() + "', 'phone':'" + $("#phone").val() + "'};
$.ajax({
type: "POST",
data: {'NewPerson': employee},
url: "/Default.aspx/getContact",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
}
});
});

Add a Class
public class Employee
{
public string name { get; set; }
public string phone { get; set; }
}
Saravanakumar Sekaran11y ago
actually I want a pass few values as Object
Manas Mohapatra11y ago
Hi Saravana,

Suppose you added below label in your user control page.


You can get the value from label using jQuery:
var value = $("#lblTest").text();

Then send AJAX request to your web methods which is present in cs file.
In your aspx or ascx file

$.ajax({
type: "POST",
url: "CS.aspx/Insert",
data: '{name: "' + value + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
   alert(response.d);
},
failure: function(response) {
   alert(response.d);
}
});

In CS page
Make that method public static in cs page.

[System.Web.Services.WebMethod]
public static string Insert(string name)
{
return "Success";
}

Note: If you find anything useful please accept my answer.