I have an Asp.net checkbox and i would like to exchange the checkbox box with an image for checkbox checked equals true and another image for checkbox checked equals false.
Here is the link for checkbox checked.
Checked
Here is the link for checkbox unchecked.
Unchecked
Here is the code for the checkbox.
<asp:CheckBox ID="chkSemanal" CssClass="input-lg" runat="server" AutoPostBack="True" oncheckedchanged="chkSemanal_CheckedChanged1" />
What i managed to do so far is this add a text property to the checkbox and there put img tag with image link but that does not hide the checkbox box.
Here is my answer:
The reference to the pictures is at the root of my project
Html :
<html runat="server" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBox ID="chkSemanal" CssClass="input-lg" runat="server" style="display:none" AutoPostBack="True" oncheckedchanged="chkSemanal_CheckedChanged1" />
<label for="chkSemanal">
<img id="img" runat="server" src="Checkbox_False.jpg"></img>
</label>
</div>
</form>
</body>
</html>
Code behind:
protected void chkSemanal_CheckedChanged1(object sender, EventArgs e)
{
if (chkSemanal.Checked)
img.Attributes.Add("src", "Checkbox_True.jpg");
else img.Attributes.Add("src", "Checkbox_False.jpg");
}
Hopes this helps!
Related
when i use a downloaded theme i.e from w3layouts.com and modify the html controls to asp controls the asp button doesn't work i.e it doesn't go to its "on_click" event .
when i use
the control goes to its backend onclick event but it doesn't get the text box values
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" UseSubmitBehavior="false" />
</div>
</form>
</body>
</html>
Please Check the js files.I think they might have disabled the submit button.
Try to comment it.This is what i came across in my downloaded theme.This code prevents form from postback.
jQuery('form').submit(function(event) {
event.preventDefault();
return false;
});
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button1" />
<asp:TextBox ID="TextBox1"
runat="server">
</asp:TextBox><asp:Button ID="Button2" runat="server" Text="Button2" />
</div>
</form>
</body>
how do i make button2 the default action when the Enter key is pressed?
See image:
http://imgur.com/C9rR0
The defaultbutton property can be specified at the Form level in the form tag as well as at panel level in the <asp:panel> definition tag. The form level setting is overridden when specified at the panel level, for those controls that are inside the panel.
Source: http://forums.asp.net/t/985791.aspx/1
I add an onfocus event to a web user control (.ascx) expection it to raise event when it gets focus but it doesn't. Is it not intended to work this way and how can I get it to raise the event? Here is sample below, but it doesn't work.
<%# Control Language="vb" AutoEventWireup="false" CodeBehind="WebUserControl1.ascx.vb"
Inherits="RaiseEventUserControl.WebUserControl1" %>
<div style="padding: 5px; background-color: #C0C0C0">
TB1:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
TB2:
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
<%# Register Src="WebUserControl1.ascx" TagName="WebUserControl1" TagPrefix="uc1" %>
<!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>
<script type="text/javascript">
function RaiseEvent(obj) {
alert("Event was raised for: " + obj.id)
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:WebUserControl1 ID="WebUserControl11" runat="server" onfocus="RaiseEvent(this)" />
<br />
<uc1:WebUserControl1 ID="WebUserControl12" runat="server" onfocus="RaiseEvent(this)" />
</div>
</form>
</body>
</html>
This can be achieved using jquery. In your head element, add the following:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[name^="WebUserControl"]').focusin(function () {
$(this).val("i have focus");
});
});
</script>
What this does is, grabs the input elements whose name starts with "WebUserControl" and adds a "got focus" event. The handler for that event places "i have focus" as the value for that input element.
The way that this would be rendered to the page is that a "onFocus" attribute would be added to the div that represents the control. This is not something that supports focus. You might add the "onFocus" item to say your first text field in the control or something similar to be able to raise the event if needed.
I am trying to open this modal DIV from code behind but I am getting error message. Please let me know what's wrong with this.
Here is .aspx code.
<div id="modal" runat="server" style="display:none;">
<asp:Button ID="btnClose" runat="server" Text="Close" onClick="Popup.hide('modal')" CausesValidation="False"/>
</div>
Code behind
if (!Page.ClientScript.IsStartupScriptRegistered("MyScript"))
{
string confirmbox = "Popup.showModal('modal');return false;";
Page.ClientScript.RegisterClientScriptBlock(GetType(), "MyScript", confirmbox, true);
}
For the error mentioned by you as
"Too many characters in character literal when loading the page"
You have to use OnClientClick instead of using onClick as it is a ASP.NET Server Control and not a normal HTML5 control.
For the code you have asked for:
Code for opening modal on page load
ASPX Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function hidePopup()
{
document.getElementById('modal').close();
}
</script>
</head>
<body onload="showPopup();">
<form id="form1" runat="server" >
<dialog id="modal">
<asp:Button ID="btnClose" runat="server" Text="Close" OnClientClick="hidePopup();return false;"/>
</dialog>
</form>
</body>
</html>
Code Behind .CS Code
if (!Page.ClientScript.IsStartupScriptRegistered("MyScript"))
{
string confirmbox = "function showPopup(){document.getElementById('modal').showModal();}";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript", confirmbox, true);
}
Tested on Chrome Version:39.0.2171.99 m , it works perfectly.
With this modal you can also exit the popup using "Esc" key,instead of Close button also.
My javascript code modifies some properties, visibility included. After postback, some properties stuck, others are "forgotten". Here I try to change the Text property of a textbox and the visibility property of a label to 'hidden'. After postback, the text is preserved, but the label is shown. I would very much like to keep the label hidden after the postback. The same occurs with the 'display' CSS property. Or, if I try to hide a <div>. Any help would be very much appreciated:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="ShowHide.aspx.cs" Inherits="WebApplication1.ShowHide" %>
<!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>Untitled Page</title>
<script type="text/javascript" language="javascript">
function ShowHide()
{
debugger;
var txt = document.getElementById('txtNumber');
txt.value='4';
var lbl = document.getElementById('lblShowHide');
if(lbl.style.visibility == 'hidden')
{
lbl.style.visibility = '';
}
else
{
lbl.style.visibility = 'hidden';
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblNumber" runat="server" Text="Enter Number" />
<asp:TextBox ID="txtNumber" runat="server" Text="5" />
<asp:Label ID="lblShowHide" runat="server" Text="Show" />
<input id="btnChangeByJS" type="button" value="HTML Change by JavaScript" onclick="ShowHide();" />
<asp:Button ID="cmdSubmit" runat="server" Text="ASP Submit" />
<asp:HiddenField ID="hfShowHide" runat="server" />
</div>
</form>
</body>
</html>
Thank you!
A postback is just another way of saying the html form was submitted. When you submit a form, the only things sent to the server are the value and name properties of the input and select elements in the form. That's why your "text" is preserved: it's the value attribute of that element. If you want to also preserve your visibility changes, or any other changes, you need to add an element to your form that can hold these changes somehow in it's value attribute.
That's essentially what ViewState is; an extra hidden element whose value property holds the current state of controls. But ViewState works for maintaining state between server instances of your page. It's not for moving new changes from the client to the server.
Hook on the client side pageLoad event and hide the text box there. Example:
function pageLoad() {
var txt = document.getElementById('txtNumber');
txt.value='4';
var lbl = document.getElementById('lblShowHide');
if(lbl.style.visibility == 'hidden')
{
lbl.style.visibility = '';
}
else
{
lbl.style.visibility = 'hidden';
}
}