This is question is in relation to my last question in case you want some more background information.
My question is: Is it possible to make a cell in an asp.net Table clickable?
Or Is it at least possible to make a clickable WebControl (which should be possible to place in a ControlCollection), that is not a Button or a LinkButton, in ASP.NET?
And if not, is it possible to multiple lines of information into the button text?
I've tried adding other components to the button's ControlCollection (which I've seen working in the Windows Forms version of the Button), to see if I could render child components to a button, but without success:
private void ModifyTableCell(TableCell cell)
{
//Create new button
Button btnCell = new Button();
btnCell.Click += (sender, args) =>
{
//Event for the button
};
//Create new Label
Label lblCell = new Label();
lblCell.Font.Bold = true;
lblCell.Text = "This text won't appear";
btnCell.Controls.Add(lblCell); //Attempt to add label to Button
cell.Controls.Add(btnCell);
}
EDIT: I ended up just creating a multi-lined LinkButton for the entire cell.
You should be able to make pretty much any control clickable by assigning an onclick attribute and leveraging the __doPostBack function.
ctrl.Attributes["onclick"] = string.Format("__doPostBack('{0}', '{1}');", ctrl.ClientID, "SomeArgument");
You could also use the GetPostBackEventReference method too. This option is actually safer, because it will register the __doPostBack function it doesn't already exist:
ctrl.Attributes["onclick"] = Page.ClientScript.GetPostBackEventReference(ctrl, string.Empty);
Then, in the code-behind you can simply override the RaisePostBackEvent method:
protected override void RaisePostBackEvent(IPostBackEventHandler source, string eventArgument)
{
base.RaisePostBackEvent(source, eventArgument);
if (eventArgument == "SomeArgument") //using the argument
{
//do whatever
}
}
You can add multiple lines to a asp.net button by using the string builder, something like:
System.Text.StringBuilder buttonText = new System.Text.StringBuilder();
buttonText.AppendLine("first line");
buttonText.AppendLine("second line");
btnMultiline.Text = buttonText.ToString;
I am not sure how you imagine such a composite control would be rendered. Remember that each ASP.NET control in the end outputs HTML. You Button essentially outputs a
<input type="button">The button text</input>
If you want to place anything else inside the <input> tag, it must be HTML-compatible. I'm not sure the input tag allows other HTML inside.
If it is a LinkButton on the other hand, the generated HTML markup is an <a href=""> tag. You can put anything there, even an image if you wish, which will become clickable.
I am not sure what is your full scenario, but what you're trying to do smells bad. I suggest that you either use a LinkButton or rethink your approach, just have in mind what the final output in HTML would be.
In reading both of your posts, it looks like you want to be able to click on anything in the cell and have it post back as if the whole cell were a button?
If so, one of the fairly simple ways to do it is to build your cell content as you would if you were not trying to post back. Then add a button with a style of display:none;. You can then use client side scripting to capture the click event of the cell, and raise the click event of the button to cause a post back.
This allows you to create the cell content in any way you like, and the postback code and handlers are automatically generated for you.
Using JQuery you end up with something along the lines of this:
<head runat="server">
<style>
input.ClickableCellButton
{
display: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("td.ClickableCell").click(function (event) { $(event.target).children("input.ClickableCellButton").click() });
});
</script>
<div>
<table>
<tbody>
<tr>
<td class="ClickableCell">
Cell Contents<br />
on multiple lines
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="ClickableCellButton"
OnClick="Button1_Click" />
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
And if not, is it possible to multiple lines of information into the
button text?
For this particular case, you can accomplish this via CSS only; no need to extend Button:
<asp:button id="myMultilineButton" runat="server" style="width:60px; white-space: normal;" Text="Several lines of text" />
It will render as:
Related
I have a basic url redirect on a DIV's onclick.
<div onclick="location.href = 'page.aspx';">
I have a need to do some work server side, rather than just a redirect, when this Div is clicked.
How do I call one of my code behind functions from the DIV onclick? The DIV is the parent control inside a usercontrol. I suppose I can "fix" it by using a literal control and writing a query string into the onclick, but I would use that as a last resort as I don't want to use a query string.
Are there any other ways of catching a DIV click in code behind that I may have missed?
You can have a button whose display can be 'none'.
Handle click of Div on client side and then from there fire the Click of that button and handle the thinks Server Side on the Click Event of the button.
<asp:Button runat="server" id="btnHidden" style="display:none" onclick="btnHidden_OnClick" />
<div onclick="javascript:DivClicked(); return true;"></div>
<script>
function DivClicked()
{
var btnHidden = $('#<%= btnHidden.ClientID %>');
if(btnHidden != null)
{
btnHidden.click();
}
}
</script>
I have two asp:Labels, the first of which is replaced with a few buttons and the second with a list of items.
I want to click on the buttons to filter the items.
The contents of the buttons are added programmatically by replacing the text with html and works fine.
asp:
<form id="form1" runat="server">
<asp:Label id="filters" runat="server" Text="Filters here"/>
<asp:Label id="itemList" runat="server" Text="List of items here"/>
</form>
resultant html of filters label:
<input type="submit" onclientclick="Load_Items(0)" runat="server" value="First"/>
<input type="submit" onclientclick="Load_Items(1)" runat="server" value="Second"/>
<input type="submit" onclientclick="Load_Items(2)" runat="server" value="Third"/>
relevant c#:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Load_Items(0);
}
}
public void Load_Items(int filterType)
{
//code to load items (pseudo below)
for each row in list
if filterType = itemType
build string
replace second label with string
}
On page load everything happens just as I want it to with the contents being filtered by the first item (hence Load_Items(0)), and if I manually change the 0 to another number in Page_Load, it filters by the other types, but if I click the buttons which are programmatically added, nothing happens other than what looks like the page refreshing.
I know the post back check is working by adding a text replacement before and inside it.
I've also added an asp:button to make sure it's not something to do with the way the buttons are added as below (with some extra things recommended from searches):
<asp:Button runat="server" CausesValidation="False" onclientclick="Load_Items(2); return false;" text="Submit" />
So what could be the issue?
The OnClientClick property specifies the javascript to run in the browser when the button is clicked. Since you probably don't have a javascript function called Load_Items, this will generate a script error, and the button will then cause the form to post back.
The server-side Click event will fire on the server, but doesn't allow you to pass a parameter. You will only get the button instance and an empty EventArgs instance.
You might be better off using the Command event, combined with the CommandArgument property.
<asp:Button runat="server" CommandArgument="2" OnCommand="Load_Items" ...
The event handler would use the CommandArgument property of the CommandEventArgs to access the argument from the clicked button:
protected void Load_Items(object sender, CommandEventArgs e)
{
Load_Items(Convert.ToInt32(e.CommandArgument));
}
Well, that's the common problem which I think every asp.net developer deals some time. The common part of it, that asp.net event system doesn't work, as windows forms.
Page object, and all controls on that page, have lifecycle events, that are triggered during any request, even when it's from update panel.
As you create those controls by code, you have to keep in mind, that all events for those controls should work as part of Page object. That's why you have to create those object in Page_Init event, before all other control's event would be triggered.
Please also keep in mind that you have to create those controls as asp.net objects:
var btn = new Button();
But not by simply adding html markup. And you have to recreate them on each request, following that one, when they were created.
Please take a look on my another answer.
I'm trying to access some page HTML to use for an email in a Button_Click event.
I cannot set this content easily anywhere else at runtime (Such as in a TAG).
So I'm wondering if I can use JQuery to set a variable to .innerHtml(), and pass that in the button click. How would I go about doing this?
Something like this...
<div id="myDiv">
some content...
</div>
<asp:HiddenField ID="hdnHtml" ClientIDMode="Static" runat="server" />
<script type="text/javascript">
$(function () {
$('#hdnHtml').val($('#myDiv').html());
});
</script>
To add a hidden field to a form: fill its value using javascript/jQuery and submit the form via a Button_Click event.
I building an online CV application that allows the user to add new education sections that consist of a number of text boxes and labels.
What is the best way of dynamically creating the form elements and reading them depending on whether the user hits an [Add another] button.
1) server side :In your asp.net button click event , Create the required controls (text box, drop down etc..) dynamically and add that to a conainer like a Panel.
2)Client Side : Using javascript create elements and append to an existing container (div). In this approach, you save a server round trip because you are doing it in the client side.
Here is a javascript sample using jquery which will give you an idea.
HTML
<div id="divContainer">
Education 1 <input id="txt1" type="text" class="txtBox"/>
</div>
<input id="btn1" type="button" value="Add Another" />
Javascript
var counter=1;
$("#btn1").click(function(){
counter++;
$("#divContainer").append("<br/> Education "+counter + " <input type='text' id='txt"+counter+"' class='txtBox' />");
});
Here is the working sample : http://jsfiddle.net/huYMT/13/
I don't know the best way unfortunately but I can tell you what I did in web forms when I used to use them.
I made a PlaceHolder where I could dump in controls on the fly type of thing. I made a UserControl that could be repeated again and again that had public properties. I wrapped an UpdatePanel around the PlaceHolder and attached a click event tied to the UpdatePanel so the user would have the AJAX experience.
Here is kind of a quick summarized version of the code. I can give you the full source if you want. Let me know.
<script runat="server">
void aspx_Init(object sender, EventArgs e)
{
AddCreditCardReceiptButton.Click += new EventHandler(AddCreditCardReceiptButton_Click);
}
void AddCreditCardReceipt()
{
AddCreditCardReceipt(this.ID + "_" + Guid.NewGuid().ToString("N").Substring(0, 5));
}
void AddCreditCardReceiptButton_Click(object sender, EventArgs e)
{
AddCreditCardReceipt();
CreditCardReceipt lastAdded = (CreditCardReceipt)CreditCardReceiptPH.Controls[CreditCardReceiptPH.Controls.Count - 1];
lastAdded.ContainerStyle = "display:none";
ScriptManager.RegisterStartupScript(lastAdded, typeof(CreditCardReceipt), lastAdded.ClientID,
"$('#CreditCardReceipt_" + lastAdded.ClientID + "').toggle(500);", true);
}
</script>
<asp:UpdatePanel runat="server" id="CreditCardReceiptUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:PlaceHolder ID="CreditCardReceiptPH" runat="server" />
<asp:Button runat="server" ID="AddCreditCardReceiptButton" CausesValidation="false" Text="(+) Add Credit Card Receipt" /></div>
</ContentTemplate>
I prefer to create a user control for education section.
And if you hit the add button, The click event of button could dynamic add a new user
control in UI.
Trying to get this div to disappear, does not seem to doing what I expect it to do, where am I going wrong?
It does not disappear.
Javascript:
<script type="text/javascript">
function Show_Hide_Display() {
var div1 = document.getElementById("checkAvailability");
if (div1.style.display == "" || div1.style.display == "block") {
div1.style.display = "none";
}
else {
div1.style.display = "block";
}
return false;
}
</script>
HTML:
<div runat="server" id="checkAvailability">
<asp:LinkButton OnClientClick="Show_Hide_Display()" ID="lbtnCheckAvailability" runat="server" CausesValidation="true" OnClick="lbtnCheckAvailability_Click">Check availability
</asp:LinkButton>
</div>
I want the button to pretty much hide itself.
Change your line to:
var div1 = document.getElementById("<%=checkAvailability.ClientID%>");
The reason is that when the checkAvailability control is rendered on the client side it may or may not have the same id (checkAvailability) since asp.net will prepend its id with that of the container control or some other logic.
This <%=checkAvailability.ClientID%> will always give you the actual id on the client side.
I think you will be better of looking at some jQuery here. For example, your code could look like:
$(document).ready(function(){
$('#yourbutton').click(function(){
$(this).toggle();
});
});
Of course, in your case you can also hide the wrapping div if you want that for some reason. It's about the same approach.
In addition to what #Icarus has posted, modify your code as such.
OnClientClick="return Show_Hide_Display()"
this will stop a post back from happening. i'm guessing you don't want a postback to occur since your div/button will be visible after a postback.
the problem is linkbutton causes postback, thus div visibility, set by JS, after postback will be restored to it's default value. i.e. style.display will not be saved. a simple solution will be just add simple html button. like this
<input type="button" value="hide the div" onclick="Show_Hide_Display()" />
this just triggers JS, not causing postback, and your div visibility will alter as expected.