Develop Reference

How to make ImageButton not clickable

I have a number of ImageButtons within a repeater, depending on each record some of these images will be clickable and others, I have disabled the button to stop postback.
I have now changed the opacity of each image so that unless you are hovering on that imagebutton it will be 0.6. The trouble is, for those that I have disabled, obviously I cannot alter the opacity on/off hover.
Currently I am doing this:
if (vessel.IsRegistered)
{
imagebuttonRegistration.ImageUrl = ("../Images/Icons/registrationApproved.gif");
imagebuttonRegistration.CommandArgument = null;
DisableImageButton(imagebuttonRegistration);
imagebuttonRegistration.ToolTip = GetLocalResourceObject("imageButRegistrationRegisteredText").ToString();
}
public static void DisableImageButton(ImageButton imagebutton)
{
imagebutton.Attributes.Remove("href");
imagebutton.Attributes.Add("disabled","disabled");
}
But as disabling the button is now causing me problems, how might I just stop the button being clickable/no postback but allow the other attributes to be used.

Different way using Css:
In your css file add:
.notclickable{
cursor:text;
}
And in DisableImageButton method add:
imagebutton.Attributes["class"] ="notclickable";

try this:
imagebutton.Attributes.Add("onclick","return false");
imagebutton.Style.Add("cursor","context-menu");

you can use CSS
.imagebutton:disabled {
opacity:0.7;
}
check this out:
http://www.w3schools.com/cssref/sel_disabled.asp

How to bind ASP TextBox's Text to its ToolTip?

I would like to the ToolTip always be the same as the ASP TextBox's Text. Of course I can write
AnyTextBox.Text = "any text";
AnyTextBox.ToolTip = "any text";
but I do not want to duplicate hundreds of assignment statements.
I also could write change event handlers for the Text property, but I do not want to write dozens of event handlers just for this (if there is a more elegant solution)
Is there? Something like this:
<asp:TextBox ID="AnyTextBox" runat="server" ToolTip="binding magic goes here, but how?">
Thx in advance

You could write your own custom control which inherits from TextBox? I used the Text property to set the tooltip, but you can do it the other way around if you want.
Control:
public class TooltipTextBox : TextBox {
public new string Text {
get { return base.Text; }
set
{
base.Text = value;
this.ToolTip = value;
}
}
}
Markup:
<my:TooltipTextBox ID="AnyTextBox" runat="server" Text="binding magic goes here">

As far as i know there is no such automatism. For what it's worth, maybe you can use PreRender:
protected void Page_PreRender(Object sender, EventArgs e)
{
var allTextControlsWithTooltips = new List<WebControl>();
var stack = new Stack<Control>(this.Controls.Cast<Control>());
while (stack.Count > 0)
{
Control currentControl = stack.Pop();
if (currentControl is WebControl && currentControl is ITextControl)
allTextControlsWithTooltips.Add((WebControl)currentControl);
foreach (Control control in currentControl.Controls)
stack.Push(control);
}
foreach (var txt in allTextControlsWithTooltips)
txt.ToolTip = ((ITextControl)txt).Text;
}
You could also use a UserControl which handles this event, then you just need to put it on all of the pages that should behave in this way. Or you could let all pages inherit from one base page.

I think using a JavaScript event handler will be your easiest solution. You don't need to write hundreds of event handlers though. Just write one and then use that same event handler for all your text boxes!
<asp:TextBox ID="AnyTextBox" runat="server" onchange="setTooltip(this)" />
And then the script would be
function setTooltip(textbox) {
textbox.title = textbox.value;
}
That's it! Set that onchange event for all your Textboxes who you want to have this tooltip behavior.

You can do this in the TextChanged event of the textbox :
<asp:TextBox ID="AnyTextBox" runat="server" TextChanged="AnyTextBoxTextChanged">
protected void AnyTextBoxTextChanged(object sender, EventArgs e)
{
this.AnyTextBox.Tooltip = this.AnyTextBox.Text;
}

That depends if you are looking for "live update" of tooltip = i.e. do you want to change the tooltip when the user changes the text on website? Then use "onchange" event of the input and JS function that would change its "title" attribute on each event call.
Or you want to ease of your server-side work and do not want to specify tooltip and text for each item, then go with custom control way (and I recommend RGraham code).
Or match both methods and use custom control that would also provide JS "refresh" code :-)

Try using jquery
$(function () {
var maybe = true;
var text = $('.myTextBox').val();
if (maybe) {
$('.myTextBox').attr('title', text);
}
});

C# Custom Validation - Change div border colour

I have a set of custom validators that change the border colour of each textbox or drop down list. All works great. I'm also using a HtmlEditorExtender. I've surrounded it with a div element to style it the same as the other textboxes (a 2px solid grey).
My difficulty is to fire the custom validator to change the border of the div if the HtmlEditorExtender is empty.
Here is how I'm calling the Custom Validator for a textbox
protected void CustomValidatorNewsText_ServerValidate(object sender, ServerValidateEventArgs args)
{
args.IsValid = isValid(tbNewsStandFirst);
}
protected bool isValid(System.Web.UI.WebControls.TextBox MyBox)
{
bool is_valid = MyBox.Text != "";
MyBox.BorderColor = is_valid ? System.Drawing.Color.LightSlateGray : System.Drawing.Color.Crimson;
return is_valid;
}
What I want to do is replace Mybox.BorderColor with the ID of the div, but I can't seem to find the right syntax (I've added runat to the div).
Any suggestions?
Cheers,
Numb

If you already set the div as a runat (and also gave it an id), something like the following should work:
this.divId.Style.Add(HtmlTextWriterStyle.BorderColor, System.Drawing.ColorTranslator.ToHtml(is_valid ? System.Drawing.Color.LightSlateGray : System.Drawing.Color.Crimson));

Change border of textbox red to when Validation Fails

I am making a web page in asp.net c# and I want to change the border color of textbox when it fails the validation.
For example :
Please tell me how can I do this.
Thanks.

This sulation is easy, but a little bit dirty:
Specify an onClientClick attribute on your button and this JavaScript-Function
<script type="text/javascript">
function YourButtonClickEvent() {
var validation = Page_ClientValidate();
if (!validation) {
for (var i = 0; i < Page_Validators.length; i++) {
if (!Page_Validators[i].isvalid) {
$("#" + Page_Validators[i].controltovalidate).css("border-color", "red");
}
}
}
return val;
}
</script>

using jQuery -- use on blur Event
if(!validation)
{
$('textboxid').css('border','1px solid red');
}
else
{
$('textboxid').css('border','1px solid black'); //set to normal color
}
using Javascript -- use on Blur event
document.getElementById('textboxId').Style.Border = "1px solid red";
For more information go through this link

UpdatePanel and Javascript

I have inline script such as this, which toggles between an edit and a display divs. If it is inside the the UpdatePanel it requires two click before it works. If I remove the UpdatePanel it works fine with a single click.
Edit
Can anyone help please?
Thanks
EDIT:
Edit function:
function edit(e, id) {
var editdiv = $('#' + id).find('.edit');
var cntdiv = $('#' + id).find('.content');
if (editdiv.css('visibility') == 'hidden') {
editdiv.css('visibility') == 'visible'
cntdiv.css('visibility') == 'hidden'
cntdiv.hide();
editbox.show()
}
else {
editdiv.css('visibility') == 'hidden'
cntdiv.css('visibility') == 'visible'
cntbox.show();
editbox.hide()
}
stopEventBubble(e); // Code to cancel event bubbling;
}

Are you using the ScriptManager to register the edit function?
protected void Page_Load(object sender, EventArgs e)
{
string jsEdit = #"function edit(event, id) {}";
ScriptManager.RegisterClientScriptBlock(this, GetType(), "editFunction", jsEdit);
}
If your code is in an external file, you can register it with the ScriptManager or the ScriptManagerProxy in the aspx for your page:
<ScriptManager runat="server" id="ScriptManager1">
<Scripts>
<asp:ScriptReference path="~/js/edit.js" />
</Scripts>
</asp:ScriptManager>
EDIT:
alright, I know what the issue is now. You aren't setting the css visibility to begin with. So either you need to set the css visibility or you can modify your edit function to follow the following logic:
function edit(e, id) {
var editdiv = $('#' + id).find('.edit');
var cntdiv = $('#' + id).find('.content');
//I reversed it to look for visible instead of hidden. The main problem with this approach and your other approach is that the original value is inherited.
if (editdiv.css('visibility') == 'visible') {
editdiv.css('visibility') == 'hidden'
cntdiv.css('visibility') == 'visible'
cntbox.show();
editbox.hide()
}
else {
editdiv.css('visibility') == 'visible'
cntdiv.css('visibility') == 'hidden'
cntdiv.hide();
editbox.show()
}
stopEventBubble(e); // Code to cancel event bubbling;
}
The other option will require you to set the following in you "edit" and "content" divs.
<div id="edit" style="visibility:hidden"> ... </div>
<div id="content" style="visibility:visible"> ... </div>
If you need further help, I'll need to see your aspx code concerning the UpdatePanel, edit, and content.

Try this:
Edit
Edit
As Chris said:
If you are injecting the function when you click the Edit link the function won't exist the first time you click an Edit link.
What you could do is add the function inside a <script> tag in the <head> section of the markup:
<head>
<script>
function edit(event, id) {
// Your code here
}
</script>
</head>
Or in a separate .js file.