Develop Reference

How to implement input checkbox's checked action?

In a WebForm I have an input checkbox to which I wanna apply server side action.
For example, when the checkbox is checked, I want to change some label's text.
I have tried to use on client side:
<input id="auto" name="auto" type="checkbox" data-toggle="toggle" data-on="AUTOMAT" data-off="MANUAL" <%= string.IsNullOrEmpty(Request["auto"]) ? string.Empty : "checked" %> />
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
<asp:HiddenField ID="customSwitch1Change" runat="server" Value="0" />
<script>
$('#auto').click(function () {
$('#<%=customSwitch1Change.ClientID%>').val("1");
$('#form1').submit();
});
</script>
I have used this and this for the input checkbox.
On the server-side I have tried:
protected void CustomSwitch1Change(string auto)
{
if (string.IsNullOrEmpty(auto))
{
Label3.Text = $"customSwitch1 was not checked.";
}
else
{
Label3.Text = $"customSwitch1 was checked and the check value is {auto}.";
}
}
But what I've tried is not working.
What I'm doing wrong? Or is there another way to do this?

You don't need the HiddenField. If you change the jQuery to the code below it will do a form post on CheckBox change.
<script>
$('#auto').change(function () {
$('#form1').submit();
});
</script>
Then you can simply get the value in code behind with
string auto = Request.Form["auto"];

Adding style to asp.net label

I want to adding style to asp.net label, but it wont work.
ASP.NET Mark up
<asp:Label runat="server" ID="lblCommentText"/>
Generated from the backend: Html mark up
<span id="ctl02_ctl36_CommentText">Only the leave the comment please</span>
............................................
I want to add the following style to the label
{
float:right;
width:70%;
}
I've tried using
cssClass property
Add this lblCommentText.Attributes.CssStyle.Add("float", "right"); to backend
using javascript
document.getElementById('<%= lblCommentText.ClientID%>').Style.display = ("float","right");
and also in-line style to the element
none of them works, can someone help me out ?

Labels are rendered as spans and spans are basically inline elements. You need to make it block or inline-block in order to get the float and width have effect.
.yourclass {
display: inline-block;
float: right;
width: 70%;
}
And then simply use cssclass:
<asp:Label runat="server" ID="lblCommentText" CssClass="yourclass" />

Inline:
<asp:Label runat="server" ID="lblCommentText" style="float:right" />
Using class:
<style>
.styleclass{
float: left;
}
</style>
<asp:Label runat="server" ID="lblCommentText" CssClass="styleclass" />
Using ID;
<style>
#ctl02_ctl36_CommentText {
float: left;
}
</style>
<asp:Label runat="server" ID="lblCommentText" />

If you want to add from code behind then use like below:
lblCommentText .Attributes.CssStyle.Add("float", "right");
lblCommentText.Attributes.CssStyle.Add("width", "70%");
If you want to add from aspx page then create a css class like:
.testClass{float: right;width: 70%;}
and assign like this:
asp:Label runat="server" ID="lblCommentText" runat="server" Text="test data" CssClass="testClass"

asp:label is being converted to span. So, you can set
span { float:left }

Read label value in code behind

Am using the below code to assign the label text using javascript. It's working well. But i can't able to read the label text in code behind. Please help me to fix this issue.
Javascript:
==========
var lbl_total = document.getElementById('<%= lbl_total.ClientID %>');
lbl_total.innerHTML = '500';
c# code behid :
===============
string total = lbl_total.Text; //It always return "";

client side changes for label will not get reflected in server side as its data is not posted to server. So the solution is to take an input hidden control and set its value with label's updated value. Below is the sample code:
<script type="text/javascript">
$(document).ready(function() {
var total = 0;
$('#Button1').click(function() {
total += 150;
$("span[id$=lbl_TotalCount]").html(total);
$("input:hidden[id$=MyHidden]").val(total);
});
});
</script>
html
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="button" />
<asp:Button ID="btn_saveForm" runat="server" Text="save" CssClass="btnForm" OnClick="btn_saveForm_Click" />
<asp:Label ID="lbl_TotalCount" Style="color: #00e4ff; font-family: Arial; font-weight: bold;
text-decoration: underline" runat="server" Text="0">
</asp:Label>
<asp:HiddenField ID="MyHidden" runat="server" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
full Article : Get label value in code behind whose text is changed via JavaScript/jQuery

how can i pass parameters from javascript to hidden field in controls vb.net

i have a control that has two asp:HiddenField
<asp:HiddenField runat="server" ID="tabTitle" />
<asp:HiddenField runat="server" ID="tabMenu" />
this control load in a page called Alarms
the control on the alarms page look like this
<alarm:SubscriptionPanel ID="pnlSubscription" runat="server" />
what iam trying to do is passing value from pagealarms to the control hidden fields and there is a function at the control code behind that reads the hidden fields values
Question is how can i pass javascript values to hidden field in controls on page load
thanks in advance

You can use JQuery for it like this
Example :
$("input[type=hidden][id='<%=tabTitle.ClientID%>']").val("Hello World");
$("input[type=hidden][id='<%=tabMenu.ClientID%>']").val("Hello World");

If you are using ASP.NET 4.0 your best bet is to set the ClientIDMode property on those controls to static and then simply use javascript to populate the hidden elements using plain ol' document.getElementById(). Something like this:
<asp:HiddenField runat="server" ID="tabTitle" ClientIDMode="Static" />
//since the id mode in the hidden element is static;
//you should be able to do this safely:
document.getElementById('tabTitle').value = myvalue;
If you are not on ASP.NET 4.0; jQuery will help here since you can find an element using partial matching as HatSoft showed you in his answer but with a slight difference:
$("input[type=hidden][id*='tabTitle']").val("Hello World");
Note the id*= part. This gets all input elements whose ids contain the word tabTitle

Besides the approach commented by #Icarus, you could expose a JavaScript function from your control.
The problem you would face if you use ClientIDMode=Static in that, you would be restricted to add only one alarm:SubscriptionPanel control to your page
If you are planning to use only one control on each page, then the easiest approach is the one commented by #Icarus, however I would consider it as a temporal approach
This alternative encapsulates the logic where it really belongs, inside the custom control:
Output
ASCX
<div id="<%: this.ClientID %>">
<asp:HiddenField runat="server" ID="hidden1" Value="one" />
<asp:HiddenField runat="server" ID="hidden2" />
<asp:Button Text="Post me" runat="server" OnClick="postme_Click" />
<asp:Label runat="server" ID="lbl"></asp:Label>
<script type="text/javascript">
$(function () {
var myObj = {
setHidden1: function (myValue) {
$("#<%: this.hidden1.ClientID %>").val(myValue);
},
getHidden1: function () {
return $("#<%: this.hidden1.ClientID %>").val();
},
helloWorld: function () {
alert("hellow world");
}
};
$("#<%: this.ClientID %>").data("data", myObj);
});
</script>
</div>
ASCX code behind
protected void postme_Click(object sender, EventArgs e)
{
this.lbl.Text = "Posted: " + this.hidden1.Value;
}
ASPX
<script type="text/javascript">
$(function () {
$("#myPageButton").click(function () {
$("#<%: this.myControl.ClientID %>").data("data").setHidden1("plop");
$("#<%: this.myControl2.ClientID %>").data("data").setHidden1("plop2");
});
});
</script>
<input type="button" id="myPageButton" value="Set Hidden value" />
<uc1:EncapsulateJavaScriptLogicInUserControl ID="myControl"
runat="server" />
<uc1:EncapsulateJavaScriptLogicInUserControl ID="myControl2"
runat="server" />
<uc1:EncapsulateJavaScriptLogicInUserControl ID="myControl3"
runat="server" />
I just found another way, that looks even more object oriented, however, it requires you to use the Microsoft AJAX library.
ASCX
Change: $("#<%: this.ClientID %>").data("data", myObj);
Into: $.extend($get("<%: this.ClientID %>"), myObj);
ASPX
Change:
$("#<%: this.myControl.ClientID %>").data("data").setHidden1("plop");
$("#<%: this.myControl2.ClientID %>").data("data").setHidden1("plop2");
Into:
$get("<%: this.myControl.ClientID %>").setHidden1("plop");
$get("<%: this.myControl2.ClientID %>").setHidden1("plop2");
With this approach you remove the use of the .data jQuery function

Accessing <div> from both javascript and code-behind

I have a div with style="display:none". The div should become visible on pressing an html button:
function JSAdd() {
document.getElementById('divDetail').style.display = "block";
}
<div style="float:left">
<div id="ctl00_MainContent_upnlLbRD">
<select size="4" name="ctl00$MainContent$lbRD" id="ctl00_MainContent_lbRD" style="width:188px;">
<option value="5">one</option>
<option value="1">two</option>
</select>
<input id="btnAdd" type="button" value="Добавить" onclick="JSAdd();" />
<input id="btnEdit" type="button" value="Редактировать" onclick="JSEdit();" />
</div>
<div id="ctl00_MainContent_divDetail" style="display:none" clientidmode="static">
<div id="ctl00_MainContent_upnlDescription">
<div>
<span id="ctl00_MainContent_lblDescription">Описание:</span>
<input name="ctl00$MainContent$txtDescription" type="text" id="ctl00_MainContent_txtDescription" />
<span id="ctl00_MainContent_txtDescriptionRequiredFieldValidator" style="color:Red;visibility:hidden;">Описание является обязательным для заполнения</span>
</div>
<input type="submit" name="ctl00$MainContent$btnSave" value="Сохранить" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$btnSave", "", true, "", "", false, false))" id="ctl00_MainContent_btnSave" />
I need to be able to make the div invisible again from code-behind. I cannot access the div unless it is runat="server". But when I add runat="server", the div doesn't become visible on pressing the button from the javascript function above. Could you please help me with this?
Thanks,
David

You can access a div in code-behind by adding the runat="server" attribute. Adding this attribute does change the way you access the element in JavaScript though:
var el = document.getElementById("<%=div1.ClientID%>");
if (el){
el.style.display = "none"; //hidden
}
There are two ways to adjust the visibility from code-behind, but since you're setting display:none in JavaScript, you'd probably want to use the same approach in code-behind:
div1.Style["display"] = "block"; //visible
In code-behind, you can also set the Visible property to false, but this is different because it will prevent the element from being rendered at all.
EDIT
If the div is still showing with display:none present, you probably have an unclosed tag or quote somewhere affecting the markup. Double check and make sure that the markup is valid.

Use a Panel, it renders as a classic div
<asp:Panel runat="server" ID="divDetail" ClientIDMode="Static" />

You have a few options, use ClientIDMode="Static" or use the dynamic ClientID at run-time. Both of these options give you server-side access to the object.
Dynamic:
<div id="divDetail" runat="server" />
//or
<asp:panel id="divDetail" runat="server" />
function JSAdd() {
document.getElementById('<%= divDetail.ClientID %>').style.display = "block";
}
//to hide from code-beind
divDetail.Attributes.Add("style","display:none;");
Static(.NET 4.0 +):
<div id="divDetail" runat="server" ClientIdMode="Static">
//or
<asp:panel id="divDetail" runat="server" ClientIdMode="Static" />
function JSAdd() {
document.getElementById('divDetail').style.display = "block";
}

When runat="server" is applied to an element, asp.net ensures that it has a unique ID by mangling it. Simply ask asp.net for the real client id:
function JSAdd() {
document.getElementById("<%=div1.ClientID%>").style.display = "block";
}
Alternatively, you could tell asp.net to leave your ID alone by adding this to your div:
<div id="div1" runat="server" clientidmode="Static">
Resources:
ClientIdMode="Static" docs

In ASP.NET, to make IDs unique (if multiple control loaded where same ID are specified), ID on elements are often follow a convention like ctl00_container1_container2_controlID and this is what returned when you call control.ClientID.
If you consider such a case where there's same ID on the serverside and you loaded those two controls in your page, you may consider using jQuery and life would be easier with runat="server" with just matching the ID with the end part:
function JSAdd() {
$("div[id$=divDetails]").show();
}

Simplest technique will be to use Javascript/Jquery to Changes Display property of the Div. if not that you can use following code
<form method="post" runat="server">
<div style = "display:none" id= "div1" runat ="server" >Hello I am visible</div>
<asp:Button Text="display Div" runat ="server" ID ="btnDisplay" OnClick = "displayDiv" />
<asp:Button Text="display Div" runat ="server" ID ="btnHideDiv" OnClick = "hideDiv" />
</form>
code behind code is as follows
protected void displayDiv(object sender, EventArgs e)
{
div1.Style.Clear();
div1.Style.Add("display", "block");
}
protected void hideDiv(object sender, EventArgs e)
{
div1.Style.Clear();
div1.Style.Add("display", "none");
}
guess you Got your solution