Develop Reference

ASP.NET WebForms: Image Sizemode in Repeater Control

Is it possible to display pictures with a non-square aspect ratio in a repeater control element?
I load images from a datatable with paths as strings.
But all images are stretched to 450px x 450px.
Code:
<div style="width: 500px; height: 500px; overflow: auto;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial">
<Columns>
<asp:TemplateField HeaderText="IMS-Bilder">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("Bild-Pfad")%>'
Width="450px" Height="450px" Style="cursor: pointer" ImageAlign="Middle" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
I miss the SizeMode property of WinForms :/
Maybe someone has a hint for me :)

In web forms, you'll probably want to handle image display with CSS. As you've seen, width and height properties will just force a specific value. There is also a property called ImageAlign, but I'm not sure how much that helps you. Otherwise its up to CSS pretty much.

CSS was the right keyword :)
I was able to fix the problem with my own css class:
.myImage {
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
height: 75%;
cursor: pointer;
}
and remove the (forced) height and width of the image/imagebutton:
<div style="width: 1000px; height: 1000px; overflow: auto;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial">
<Columns>
<asp:TemplateField HeaderText="IMS-Bilder">
<ItemTemplate>
<asp:Image CssClass="myImage" ID="Image1" runat="server" ImageUrl='<%# Eval("Bild-Pfad")%>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
Final look of the loaded pictures:
Thank you, #erastl :)

popup control linkbutton prevent postback

I am using a popup control with a link button inside that is used to close the popup. The problem is that the link button (or image button in the code below) is causing a full postback which is not intended. Can anyone help? below is the code.
<asp:PopupControlExtender ID="PopupControlLogin" BehaviorID="logpop" Position="Bottom"
TargetControlID="myLogin" PopupControlID="PanelLogin" runat="server">
</asp:PopupControlExtender>
<asp:Panel ID="PanelLogin" Style="position: absolute; display: none;" runat="server">
<div style="border: solid 1px #808080; border-width: 1px 0px;">
<div style="background: url(images/sprite.png) repeat-x 0px -200px;">
<asp:Label ID="Label2" runat="server" Style="font-weight: bold;" Text="Login" />
<asp:ImageButton ID="ImageButton1" Style="background: url(images/sprite.png) no-repeat 0px -300px;"
OnClientClick="$find('logpop').hide(); return false;" runat="server" />
</div>
<div style="background-color: #f2f2f2; width: 300px; height: 150px;">
My Content
</div>
</div>
</asp:Panel>

You are using it correctly, but I think there's an error in your jquery $find. Should be
$('#logpop').hide();
or
OnClientClick="$('#logpop').hide(); return false;"

I would change the button to a straight HTML link:
<img src="images/sprite.png" />
You can adjust the display as needed, but this should be what you need.

Dynamic content w/ jQuery

I am just starting to learn jQuery, and want to load content from a seperate .aspx page dynamically into a div. Using example from here: http://www.asp.net/ajaxLibrary/jquery_webforms_dynamic_load.ashx?HL=var.
However it doesn't seem to be responding and I'm probably missing some piece of this. Here is the code / script in my .aspx page:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="Scripts/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// External ASPX Page calling
$("#btn_Submit").click(loadDynamic);
});
function loadDynamic() {
$("#dynamicResults").load("ResultsView.aspx",
{name: $("#cbox_User").val() },
function (content) {
$(this).hide().fadeIn("slow");
return false;
});
}
<Header>
QUERY VIEW
</Header>
<Content>
<div style="float:right; height:154px; width: 947px; margin-left: 0px; background-color: #E0E0E0;">
<br />
<asp:Label ID="Label2" runat="server" Text="Select a User:"
Style="margin-left:28px" ></asp:Label>
<asp:ComboBox ID="cbox_User" runat="server" AutoCompleteMode="SuggestAppend">
</asp:ComboBox>
<asp:Label ID="Label3" runat="server" Text="Select a Month:"
Style="margin-left:28px" ></asp:Label>
<asp:TextBox ID="txt_Date" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" runat="server"
TargetControlID="txt_Date"
Format="MMMM yyyy"
OnClientShown="onCalendarShown"
OnClientHidden="onCalendarHidden"
BehaviorID="calendar1" >
</asp:CalendarExtender>
<asp:Button ID="btn_Submit" runat="server" Text="Submit" Style="margin-left:28px" onclick="Btn_Submit_Click" />
</div>
</Content>
<Header>
RESULTS VIEW
</Header>
<Content>
<div id="dynamicResults">
</div>
<div style="border-style: none; height:340px; width: 770px; position:relative; top: 10px; left: -2px;">
<asp:GridView ID="ResultsView" runat="server" CellPadding="3"
ForeColor="Black" GridLines="None" AllowPaging="False"
Visible="False"
Height="318px" style="margin-left: 32px; margin-top: 2px;" Width="718px"
BackColor="White" BorderColor="#999999" BorderStyle="Solid"
BorderWidth="1px">
</asp:GridView>
</div>
</Content>
And in the second .aspx page, which contains I a div I just want to dynamically load:
<html xmlns="http://www.w3.org/1999/xhtml">
<div style="background-color:#E0E0E0; border-style: ridge none none none; border- width: thin; border-color: #B3B3B3; height:120px; width: 770px; position:relative; top: 10px; left: 8px;">
<asp:Label ID="lbl_Header" runat="server" Text="User Information:"></asp:Label>
</div>
</html>

Have a look at the load method.
Here is an example from the page:
Loading Page Fragments The .load()
method, unlike $.get(), allows us to
specify a portion of the remote
document to be inserted. This is
achieved with a special syntax for the
url parameter. If one or more space
characters are included in the string,
the portion of the string following
the first space is assumed to be a
jQuery selector that determines the
content to be loaded.
We could modify the example above to
use only part of the document that is
fetched:
$('#result').load('ajax/test.html #container');
When this method executes, it
retrieves the content of
ajax/test.html, but then jQuery parses
the returned document to find the
element with an ID of container. This
element, along with its contents, is
inserted into the element with an ID
of result, and the rest of the
retrieved document is discarded.
jQuery uses the browser's .innerHTML
property to parse the retrieved
document and insert it into the
current document. During this process,
browsers often filter elements from
the document such as , ,
or elements. As a result, the
elements retrieved by .load() may not
be exactly the same as if the document
were retrieved directly by the
browser.
Edit: Just noticed that in your function loadDynamic() you're trying to get the value of the control cbox_User like this:
$("#cbox_User").val()
But, because it's a server-side control, you need to get the value like this:
$("#<%=cbox_User.ClientID%.").val()
This is because .NET gives ASP.NET controls different id's than what you specify.
Hope this helps.

Accordian: Arrow image not displaying even though image path is correct

I want the arrow-collapsed image to be displyed before accordian headers and when accordian header is clicked and expanded, arrow-collapsed image should change to arrow-expanded image. What am I doing wrong below? Also, image paths are all correct. I have checked many times.
my accordian:-
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None"SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250"
HeaderCssClass="accordionHeader toggler" ContentCssClass="accordionContent expanded toggler">
<HeaderTemplate>
<b style="color: Black">
<%#Eval("Ques")%>
</b>
</HeaderTemplate>
<ContentTemplate>
<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>
</ContentTemplate>
</cc1:Accordion>
css
Am I giving the CSS Class names incorrectly or what ????
#denis..its still not displaying the images..cant find the images in Firebug either

Firstly, I would suggest to take a look at Accordion sample page which lists all available properties along with their descriptions. You'll notice that the Accordion also exposes HeaderSelectedCssClass property - this is where you set a style for the collapsed state. So, you could re-write your markup like so:
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None" SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250"
HeaderCssClass="accordionHeader toggler"
HeaderSelectedCssClass="accordionHeader toggler-expanded"
ContentCssClass="accordionContent">
<HeaderTemplate>
<b style="color: Black">
<%#Eval("Ques")%>
</b>
</HeaderTemplate>
<ContentTemplate>
<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>
</ContentTemplate>
</cc1:Accordion>
And for CSS:
<style type="text/css">
.accordionHeader {
cursor: pointer;
margin-top: 10px;
margin-left: 20px;
}
.toggler {
background: url('../../images/arrow-collapsed.png') no-repeat left center transparent;
}
.toggler-expanded {
background: url('../../images/arrow-expanded.png') no-repeat left center transparent;
}
.accordionContent {
margin-top: 10px;
margin-left: 20px;
}
</style>
And please remove all those scripts.

Can't update a second update panel

I have 3 updatepanels on my page and I want 2 of them to update when an event is fired. In one of the update panels I have an asp ReoderList.
<asp:UpdatePanel ID="upMain" UpdateMode="Conditional" runat="server" style="left: 0px; top: 0px; min-height: 100px; width: 495px; overflow: auto;">
<ContentTemplate>
<div class="reorderListDemo" style="position: relative; left: -41px; width: 490px; overflow: auto;">
<ajax:ReorderList ID="rlAlerts" Style="min-height: 100px; padding: 0px 6px 0px 0px;" Width="480px" runat="server" PostBackOnReorder="false" CallbackCssStyle="callbackStyle" DragHandleAlignment="Left" DataKeyField="ItemID" SortOrderField="Priority" OnItemReorder="rlAlerts_ItemReorder">
<ItemTemplate>
<%--set the class to inactiveAlert if the active flag is set to false--%>
<div id="alertItem<%# Eval("ItemID")%>" class="<%# Convert.ToBoolean(Eval("Active")) ? "" : "inactiveAlert" %>" onclick="updateAlertPreview('<%# Eval("ItemID")%>','<%# Eval("Priority")%>','<%# Eval("Title") %>','<%# Eval("Description") %>', '<%# Eval("StartDate") %>', '<%# Eval("EndDate") %>', '<%# Eval("Image") %>');">
<div style="position: relative; float: left; left: 10px; padding-top: 6px; overflow: hidden; width: 180px; height: 17px;">
<asp:Label ID="Label4" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Title"))) %>' />
</div>
</div>
</ItemTemplate>
<ReorderTemplate>
<asp:Panel ID="Panel2" runat="server" CssClass="reorderCue" />
</ReorderTemplate>
<DragHandleTemplate>
<div class="dragHandle">
</div>
</DragHandleTemplate>
</ajax:ReorderList>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="rlAlerts" EventName="ItemReorder" />
<asp:AsyncPostBackTrigger ControlID="ckbxShowInactive" EventName="CheckedChanged" />
</Triggers>
</asp:UpdatePanel>
Currently this update panel will update will either the items are reordered or the checkbox state changes.
Now I have this second updatePanel that isn't updating when the list is reordered.
<asp:UpdatePanel ID="UpdatePanelAlertOrderNotification" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Label ID="lblOrderChangedNotification" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="rlAlerts" EventName="ItemReorder" />
</Triggers>
</asp:UpdatePanel>
Here is my code behind:
protected void rlAlerts_ItemReorder(object sender, AjaxControlToolkit.ReorderListItemReorderEventArgs e)
{
.....
Session["AlertOrderChangedNotification"] = Resources.LocalizedText.Alert_Order_Changed;
lblOrderChangedNotification.Text = "AWESOME";
//lblOrderChangedNotification.DataBind();
//UpdatePanelAlertOrderNotification.Update();
}
I've stepped through the code and I can't figure out why it isn't working.
Things I have tired:
I have tired :
to set UpdatePanelAlertOrderNotification's UpdateMode to always.
to have UpdatePanelAlertOrderNotification's UpdateMode to Conditional, remove its triggers and have the code behind function update the
updatepanel directly.
to store the text in the session and when the page post fires to check if there is text in the session. I am able to step over this code in the pageLoad
function and it still doesn't do anything. (Tried with both lines commented out and then with only 1, then with none of them commented out.)
protected void Page_Load(object sender, EventArgs e)
{
if (Session["AlertOrderChangedNotification"] != null)
{
lblOrderChangedNotification.Text = Session["AlertOrderChangedNotification"] as string;
//lblOrderChangedNotification.DataBind();
//UpdatePanelAlertOrderNotification.Update();
}
}
I don't know if I'm having an issue because I have two update panels that have the same trigger (Even though
I tried removing it from UpdatePanelAlertOrderNotification and have it set to always.)
Changs:
So I tried to add a new button and get the updatepanel to update. This works. If I switch the triggers back to the reorder list it doesn't work. So My question is, Can I have 2 different updatePanels with the same trigger? IF I can't I should be able to have the broken one update by calling UpdatePanelAlertOrderNotification.Update()?? Ideas?
<div style="position: absolute; top: 195px; right: 10px; height: 100px; width: 120px; overflow: hidden;">
<asp:UpdatePanel ID="UpdatePanelAlertOrderNotification" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Label ID="lblOrderChangedNotification" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<%--<asp:AsyncPostBackTrigger ControlID="rlAlerts" EventName="ItemReorder" />--%>
<asp:AsyncPostBackTrigger ControlID="btnUpdateBrokenUpdatePanel" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<div style="position: relative; top: 25px; left: 10px;">
<asp:Button ID="btnUpdateBrokenUpdatePanel" runat="server" CssClass="redButton" Width="300px" Height="25px" Text="Update Broken UPdatePanel" OnClick="btnUpdateBrokenUpdatePanel_Click" />
</div>
Any help would be awesome.
Thanks Brad

I'm guessing that you are having an issue with the update panels not getting proper notice, I would setup the wrapping one with a conditional trigger, and then have it call the update method on both of the other ones.
One thing you want to make sure of is that your code that actually updates the display of those items is executed as well.

The problem that you have is that the control rlAlerts is in the content template of the first update panel and when you define the asynchronous trigger in the 2nd updatepanel, it doesnt know about rlAlerts because it has been prepended with naming container from 1st updatepanel.
Try one of these approaches:
Take rlAlerts outside of the updatepanel, if that is possible
In the code behind for ItemReorder event handler to explicitly call UpdatePanelAlertOrderNotification.Update(). SOund like you have tried and it doesnt work, which is strange
Explicitly register the trigger from code behind for the 2nd updatepanel on prerender:
UpdatePanelAlertOrderNotification.Triggers.Add(new AsyncPostBackTrigger()
{ControlID = rlAlerts .UniqueID, EventName = "ItemReorder"});