How to get at repeater Item from jQuery - asp.net

I've got a repeater on the page. The repeater is actually in an .ascx. In the repeater each item has a few things such as an Add button, and a couple of other fields.
What I am trying to the Container.DataItem but the one that relates to the Add button that was clicked. If the user clicks the add button in the repeater list, give me reference to the Container.DataItem for that related to the button in that ItemTemplate that the user just clicked.
The add button is really just a regular HTML hyperlink wrapped around a regular HTML image. I added an ID to the hyperlink but don't know how to really link the two and gain reference to the DataItem.
I'm all set and can fly with jQuery and do whatever client-side stuff I want.
Example of what I started:
<script type="text/javascript">
$(document).ready(function()
{
$(myUserControl.MyRepeater).
}
</script>

The repeater doesn't generate any HTML of its own. It'll only write what you tell it to write.
So what you'll have to do is somehow identify each item, preferably with unique id's in the HTML. That way you can gain access to it through the DOM.
For example, if the rendered markup looked like this then you could actually access "item1" via jquery:
<div id="item1">abc</div>
<div id="item2">def</div>
To accomplish this you might try something like this in your ItemTemplate :
<ItemTemplate>
<div id="item<%#Container.ItemIndex %>">bla</div>
</ItemTemplate>

The Repeater and the DataItems are server-side control which is available from the code-behind of your pages/controls. You cannot access it from client-side code (javascript).

Related

Nested Repeater not being recognised in code behind

I have a nested repeater set up but the child repeater control is not being recognised in the code behind. It's not even being added to the designer file. I've tried this on an aspx and an ascx page but both gives the same problem.
<asp:Repeater ID="RepeaterParent" runat="server">
<ItemTemplate>
<asp:Repeater ID="RepeaterChild" runat="server">
</asp:Repeater>
</ItemTemplate>
</asp:Repeater>
with this on the page the code behind only recognises the RepeaterParent but not RepeaterChild.
Can anyone help me out here?
Many thanks!
Like any other control that is used within a repeater (or template) control, you need to retrieve the control using FindControl.
So, in your item data bind event handler for the parent, you would do:
var childRepeater = RepeaterParent.FindControl("RepeaterChild") as Repeater;
The RepeaterChild will be accessible when you use FindControl("RepeaterChild") on the parent repeater I think. Can't remember the exact syntax.
Also note that the FindControl method will also take the context of the current item of the parent repeater, as the name you specify will repeat. Naming containers do some work in the background to provide unique naming, but it is hard to track sometimes.

ASP.NET: checkboxlist with textbox?

I'm working in ASP.NET and I have a CheckBoxList where I want one of the options to be basically like "Other: _." So I need to include a textbox where the user can fill in their own option. It doesn't seem like there's a way to include a textbox inside of a checkboxlist, however. What's the best way to make this work?
-UPDATE-
If using a separate textbox control, how do I position it so it will align correctly with the checkbox?
Make the textbox a separate control on the page, then in your codebehind, check to see if other is checked. If it is, pull the value of the textbox, and use that.
To answer the question in your edit: You'll have to play with the CSS of the page to get it positioned correctly. How you do it depends on the layout of the page, among other things. I recommend posting some of the HTML from your page in another question and ask about how to position them.
What #Kyle Trauberman said...
Make the textbox a separate control on
the page, then in your codebehind,
check to see if other is checked. If
it is, pull the value of the textbox,
and use that.
Plus use javascript to hide or gray out the option unless the checkbox is selected.
string test="";
<asp:CheckBoxList ID="chk_list" runat="server">
<asp:ListItem Value="00">xxxx</asp:ListItem>
</asp:CheckBoxList>
<asp:TextBox ID="other" runat="server"></asp:TextBox>
inside the for loop
if (chk_list.Items[i].Value == "00")
{
test +=chk_list.Items[i].Text + other.Text;
}

Databound DIV in asp .net

Looking for a custom ASP .NET control were the InnerHTML of a DIV is connected to a databas to fetch the content to render the HTML content from the databas inside the DIV.
Is there one out there I have missed or anyone could tell if its possible to make my own DIV component to make it DataBound?
Thanks,
Stefan
You can't databind to a div, but you can databind to something like a Repeater, which is mainly good for showing rows of data (i.e. repeating the same markup for multiple data items).
If you just want to show one field from one row, you're probably better off with something like a literal:
<div>
<asp:Literal id="myLiteral" runat="server" />
</div>
And then in the code behind...
myLiteral.Text = "some string from the database or wherever";

How to populate UpdatePanel in Repeater in ASPX (not code-behind)?

I have a Repeater which displays a list of items (in a grid-like/table view). When a user clicks an item, I display an UpdatePanel under this item with additional information relevant to the item (similar to Accordion control). I know how to populate the elements of the UpdatePanel in code-behind (I pass the ID of the selected element in the Repeater control as CommandArgument, get additional info for this ID, and set up the text fields of the active UpdatePanel controls). But I'm wondering if I could set up binding directly in the ASPX (instead of code-behind). When I used the <%= %> syntax to assign text fields of the UpdatePanel control the values of the page properties, e.g. <%= Comment %>, it sort of worked, but it changed the fields of all UpdatePanels in the repeater. Is there any way to bind the active UpdatePanel to the current values and leave already bound UpdatePanels unchanged?
Are you looking to display a container that displays additional information? Is there other activity in the "box" that requires it be an updatepanel?
<asp:repeater>
<itemtemplate>
<%# Eval("Name") %> <%# Eval("LastName") %><br />
<span onclick="$get('<%# Eval("Id") %>')">View Age</span>
<div id="<%# Eval("Id")%>" style="display:none;">
Age: <%# Eval("Age") %>
</div>
<itemtemplate>
</asp:repeater>
Ithink that's right, some syntax may be off a bit (typing without intellisense). Would that work?
I used ID as a unique identifier for the div id and the onclick command. You could also use jquery, asp:controls or whatever else you wanted.
Easiest way is to nest a FormView inside the update panel. Then the only thing you need to do in the code behind is get the additional info, assign it to the FormView.DataSource, and call FormView.DataBind(). Everything in the FormView will use the <%# Eval("SomeColumn") %> syntax. You'll probably need to use a FindControl() to get a reference to the FormView. I'd type up the code for you but I'll save you some headaches down the road and say DON'T DO THIS.
The update panel is about the most inefficient way to do any ajax stuff. The only way to get it all to wire up correctly with this repeater and server side code is to either have a gigantic viewstate or to rebind the repeater in your page load. You are turning a request that could be 300ms into something that will take over a second...or longer! Get familiar with a good ajax framework and don't be afraid to write real html. At the very least, use a webservice that loads a usercontrol with your markup.
I know the update panel is easy, and it's built in. It might even be adequate for what you are doing, but you must resist. You'll be glad you did.

Is there a way to add an onclick event to an ASP.NET Label server control?

I wanted to do something like this:
<asp:Label ID="lblMyLabel" onclick="lblMyLabel_Click" runat="server">My Label</asp:Label>
I know that in Javascript I can do:
<span onclick="foo();">My Label</span>
So I'm wondering why I can't do that with a Label object.
You can use Attributes to add onclick client side callback.
I didn't know you can do this on span tags, but if it works you can add 'onclick' by lblMyLabel.Attributes.Add("onclick", "foo();");
But foo(); would need to be a client side javascript function.
System.Web.UI.WebControls.Label does NOT have OnClick server event. You could look into using AJAX if you want server callback with example above.
You could also use LinkButton like other say. You can make it not look like a link by using CSS, if it is just that underline you are concerned about.
ASPX:
<asp:LinkButton ID="LinkButton1" runat="server"
CssClass="imjusttext" OnClick="LinkButton1_Click">
LinkButton
</asp:LinkButton>
CSS:
a.imjusttext{ color: #000000; text-decoration: none; }
a.imjusttext:hover { text-decoration: none; }
Your question doesn't specify if you mean to raise the click event on the server (VB or c#) or the client (javascript.) If you're looking for a server-side event you should use a link button with css that makes the link appear as a label. You can then use the link button's server-side click event. If you're looking for a client-side click event - just type it into your server control markup asp:label id="MyLabel" runat="server" onclick="javascript:alert('hello');" Text="Click Me"; ASP.NET will emit additional attributes in the html markup that generates.
You can do it in code in the page_load eg:
void Page_Load(object sender, EventArgs e)
{
lblMyLabel.Attributes.Add("onclick",
"javascript:alert('ALERT ALERT!!!')");
}
If you want an onclick event, why don't you use a linkbutton, which has the onclientclick event:
<asp:linkbutton id="lblMyLink" onclientclick="lblMyLink_Click" runat="server">My Label</asp:linkbutton>
You can use CSS to make the link look like whatever you want
I think you can, but it's a client-side onclick handler, not server side. It will complain about the attribute not being supported (or some such) but I think it renders correctly. If you want to to a server-side handler, I think you'll need to do a LinkButton.
As far as I know that's impossible. Label control emits <span> element which is “unclickable” on the server side. You would need to replace your Label control with a LinkButton.
Another hack would be to use a hidden link or button with style="display:none;" and trigger the click on the server control from a javascript function in the span.
Something like this:
<asp:linkbutton id="lblMyLink" onClick="lblMyLink_Click" runat="server" style="display:none;">My Link</asp:linkbutton>
<span onclick="document.getElementById('lblMyLink').click();">My Label</span>
you could always roll out your own control which produces a span, with the .net's standard postback javascript, but as stated earlier using a linklabel with a CSS class would be easier
Just to chime in on this issue,
I used a label in my .aspx page that was only to be visible in my DataList Item template if there were child records in the dataset.
I added a onclick function to the label:
moreOptionsLabel.Attributes.Add("onclick", string.Format("toggle_visibility('{0}')", div.ClientID));
in my .cs file. It will now control a div tag in the .aspx page to show or hide the records - because the onclick points to a client side javascript function. Notice the div.ClientID, that makes this workable in a datalist.
As noted above - the span tag does indeed become functional with "onclick". And since the label control is rendered as a span after the page request, using the Addtribute.Add("onclick".... does work.
The result is show/hide functionality of data with out doing a postback. If you use the LinkButton, or simlar controls - the postback and page reload is unavoidable - unless you want to get into some Ajax stuff.
NOTE: the span tag won't look clickable unless you style it with an underline and hand cursor.
Credit to this idea comes from Will Asrari over at http://www.willasrari.com/blog/display-nested-repeaters-and-gridviews-asynchronously/000292.aspx
You need to create a class object that inherits from the label and onclick event handler which will be a method by yourslef and use your object as a custom label.

Resources