how to create an ajax image button? - asp.net

I am creating a thumbnail viewer.
For the thumbnails I add image buttons that when they are clicked they will be viewed in a larger size. The images are entered dynamically by the user (in the code behind).
The problem is:
I don't want the thumbnails to be updated every time they are clicked.
But since it is a button it will be updated by the click anyway!!!
What can I do?
<asp:DataList ID="lstThumbs" runat="server" RepeatDirection="Horizontal">
<ItemTemplate>
<div class="thumbs">
<asp:ImageButton ID="imgbtnThumb"
ImageUrl='<%# Container.DataItem %>'
runat="server"
OnClick="imgSmall_Click" />
</div>
</ItemTemplate>
</asp:DataList>

Related

Using # in the link tag to navigate to a certain part of the page

I'm trying to go from one page to a certain point in another page. Specifically, I have a page that has a photo grid on it, and I want a user to be able to click on the photo and take the user to another page that displays the full size of the photo. I've got that done, but when it goes to the page, it goes to the very top of the page, but what I want is it to navigate down to where the top of the picture is at the top of the page. Here is what I've tried so far:
PeoplePhoto.aspx:
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl='<%#'~/PeoplePic.aspx?ID='+Eval("ID")'#1'%>'>
<asp:Image ID="Image1" runat="server"
BorderWidth="1px"
BorderColor="#DDDDDD"
Width="230px"
Height="180px"
ImageUrl='<%# "photos/PeoplePhotos/" + Eval("picPath") %>' />
</asp:HyperLink>
PeoplePic.aspx:
<asp:Image ID="Image1" runat="server" AlternateText="People Picture"
BorderWidth="1px"
BorderColor="#DDDDDD"
ImageUrl='<%# "photos/PeoplePhotos/" + Eval("picPath") %>' />
I'm pretty certain it's a problem with my hyperlink format, but I'm not quite sure.
The url must be followed with the id of the region.
For example http://en.wikipedia.org/wiki/India#Geography.
Instead of giving #1 you want to give the id of the image. ie image1.
~/PeoplePic.aspx?ID='+Eval("ID")'#image1'.
You have to generate urls appending the image id , so that the navigation will be possible.

tracking variable values in asp.net ajax user control

Working on an asp.net page I created a custom ajax web user control that displays the contents of a list value (which is loaded via database calls). The control includes "next" and "previous" buttons, as well as a couple text boxes. My initial version used a session variable (iterator) to keep track of where the user is while clicking the buttons and filling the text boxes with values from the List[].
In my next iteration, I need to be able to use this custom control, which will be presented many times in a table (or more probably grid), but I'm having trouble figuring out how to handle the iterator, since the session variable will obviously no longer work.
Does anyone have a suggested approach, or a recommended article?
I solved the problem by creating a second form on my user control that is segregated from the controls contained within the UpdatePanel. Before those controls are refreshed, the segregated control (a label in this case) is programmatically assigned a value and when the control Page_Load event fires it references the segregated label value to keep track of it's current position. I also had to move the ScriptManager out of my control and place it on the page(s) the control will be used on, since there will be several of these custom user controls on the page and only one ScriptManager is permitted per page.
<form id="NaviControl" >
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Panel ID="controlsPanel" runat="server" HorizontalAlign="Center" >
<asp:Panel ID="Panel1" runat="server" >
<asp:Button ID="btnLast" runat="server" Text="Previous" Height="25px" Width="75px" OnClick="btnLast_Click" />
<asp:TextBox ID="tbStatusCode" runat="server" ></asp:TextBox>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" HorizontalAlign="Center" >
<asp:TextBox ID="tbDescription" runat="server" ></asp:TextBox>
<asp:Button ID="btnNext" runat="server" Text="Next" Height="25px" Width="75px" OnClick="btnNext_Click" />
</asp:Panel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
<form>
<asp:Label ID="lblCounter" runat="server" visible="false" />
</form>
Hope some other nubs find this approach useful.

ASP.NET: How to re-flow GridView cells over multiple lines

I have an application which contains a table with two columns: messageid and messageDesc . Inside the messageDesc column there is a message description. When I try to bind the GridView to the messageDesc column, it renders the entire column on a single line, requiring the user to scroll horizontally to view the complete text. I want to prevent this by having the description flow over multiple lines. How do I do this?
I have tried using the ItemStyle attribute but it's not working. Please suggest a solution. In addition to this, I can't change the database message content.
Thanks in advance.
Warp label insdie div element and than try out this will surely work for you
<asp:TemplateField>
<ItemTemplate>
<div style="width:100px;">
<asp:Label ID="Label2" runat="server" Text="<%# Eval("description") %>"></asp:Label>
</div>
</ItemTemplate>
</asp:TemplateField>
or
<ItemStyle Wrap="true" Width="100px" />
You can display data in textbox using template field instead of bound field. See below, textbox code. Your TemplateField would look like this:
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" ReadOnly="True" Text='<%# Eval("MessageDesc") %>'
TextMode="MultiLine"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
The ReadOnly setting keeps users from editing the data while having it still enabled for them. In Edit mode, of course you would set ReadOnly to false.

Issue with getting a ModalPopUp to display a populated textbox correctly

My site has descriptions of the products we sell and I am currently trying to get those descriptions to pop up inside a modal popupextender. I can get them to popup with a textbox where I have enabled="false" so that it can't be edited, but it shows all the tags along with the text such as the <p>, <li>, etc. Is there a different control I can use inside of my modal that will show my text better?
<!-- Descriptions -->
<asp:TabPanel ID="tab2" runat="server" HeaderText="Descriptions">
<HeaderTemplate>Descriptions</HeaderTemplate>
<ContentTemplate>
<ul class="info">
<asp:ListView ID="lvDescriptions" runat="server" DataSourceID="dsMarketingDescriptions" DataKeyNames="MarketingID">
<ItemTemplate>
<li>
<asp:LinkButton ID="ViewDescriptionButton" runat="server"><%#Eval("MarketingTitle")%></asp:LinkButton>
<asp:ImageButton ID="DeleteDescriptionButton" runat="server" Style="float:right;" AlternateText="" ImageUrl="../../images/delete.png" CommandName="Delete" OnClientClick="return confirm('Are you sure you want to delete this description?')" />
<asp:Panel ID="ViewDescriptionPanel" runat="server">
<asp:ImageButton ID="CancelDescriptionButton" runat="server" ImageUrl="../../images/exit.png" AlternateText="" Style="float:right;"/>
<asp:TextBox ID="Description" runat="server" width="100px" height="100px" Enabled="false" TextMode="MultiLine" Text='<%# Eval("MarketingData") %>'/>
</asp:Panel>
<asp:ModalPopupExtender ID="ViewDescriptionModal" runat="server" BackgroundCssClass="modalBackground" DropShadow="false" DynamicServicePath="" Enabled="true" PopupControlID="ViewDescriptionPanel" TargetControlID="ViewDescriptionButton" CancelControlID="CancelDescriptionButton"></asp:ModalPopupExtender>
</li>
</ItemTemplate>
</asp:ListView>
</ul>
</ContentTemplate>
</asp:TabPanel>
Here's an example of the <%# Eval("MarketingData")%>:
<p>If you are currently trading options on futures or are interested in exploring them further, check out this newly updated trading guide, featuring 25 commonly used options strategies, including butterflies, straddles, strangles, backspreads and conversions. Each strategy includes an illustration demonstrating the effect of time decay on the total option premium involved in the position.</p><p>Options on futures rank among the most versatile risk management tools, and are offered on most CME Group products. Whether you trade options for purposes of hedging or speculating, you can limit your risk to the amount you paid up-front for the option while maintaining your exposure to beneficial price movements.</p>
If the text wont be editable, why don't you use a asp:label instead?
Does the MarketingData field include html tags? Please provide an example of the value for MarketingData.
Edit:
If you know wich tags can be present on your text, you can simply create a property on the class that hold the propoerty called MarketingData, like this:
public string EditedMarketingData
{
get {return MarketingData.Replace("<p>","").Replace("</p>","").Replace("<li>","");}
}
And then change the binding in your text box as:
Text='<%# Eval("EditedMarketingData") %>'
The replacing is kind of ugly, hope you can get that to look better ;)
I think a Literal would be the most appropriate control for this type of content, as it will preserve the HTML in the content. You could probably also use a Label.
If you would prefer to stick with a TextBox though, I would try setting the ReadOnly property to false (instead of Enabled). If you want to achieve the disabled.

Paging for Listview inside a Gridview not working

I have a listview nested inside a gridview.
I'm trying to get paging working on the listview. I thought that it would display the paging controls, and just page through them normally.
It does display the controls, and limits the result set shown to the appropriate number of records (pageSize) but when I click on the paging controls the grid refreshes and nothing changes with the nested listview (it's still on the first page).
I've tried nesting the listview inside an updatepanel, but the behavior remains. The gridview itself is already in an updatepanel.
So this is the layout I've got:
<Gridview ID="gvApplications" DataSourceID="odsApplications" DataKeyNames="ID" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Functions">
<ItemTemplate>
<asp:ListView ID="lvFunctions" runat="server" DataSource='<%#Eval("ApplicationFunctions") %>'
DataKeyNames="ID">
<LayoutTemplate>
<asp:DataPager ID="dpFunctions" runat="server" PageSize="1" PagedControlID="lvFunctions">
<Fields>
<asp:NextPreviousPagerField />
</Fields>
</asp:DataPager>
<ul>
<li>
<span ID="itemPlaceholder" runat="server" />
</li>
</ul>
</LayoutTemplate>
<ItemTemplate>
<asp:Label ID="lblFunction" runat="server" Text='<%# Eval("ApplicationFunction.Name") %>' />
</ItemTemplate>
</asp:ListView>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</Gridview>
Ideas?
Honestly, I would consider using a master-details pattern here. There are a lot of code examples on this. For example:
Google: Master Details Examples with Child Objects
There are also scenarios where the details view (child objects in your case) would display on a separate page. Either way, by displaying the child objects in a separate details view, you avoid the coding and display issues that come with nesting.
Matt Berseth has some of the best code examples out there on this topic:
http://mattberseth.com/blog/gridview/
Listview / datapager combination do not work properly if the listview does not use a datasource control.
Try including a datasource control (objectdatasource could be applicable) in the template field.

Resources