Showing posts with label images. Show all posts
Showing posts with label images. Show all posts

Monday, March 26, 2012

Ajax AnimationExtender

I have to implement animation for images similiar to shown in bellow link

http://ajax.asp.net/showcase/default.aspx?tabid=47

Why don't you look into the PopupExtender control?


Hi Trebolin. I also would like to achieve the effect citeabove. I followed your advice and was able to get close with thePopupExtender using this code:

<asp:Image ID="Image1" runat="server" Height="135px" ImageUrl="~/Images/ad1.jpg" Style="cursor:pointer" Width="218px"/>
<asp:Panel ID="Panel1" runat="server" CssClass=".popupControl" Height="300px" Width="500px" BackColor="#FFFFC0">
</asp:Panel>
<cc1:PopupControlExtender ID="PopupControlExtender1" runat="server"TargetControlID="Image1" PopupControlID="Panel1" OffsetX="10"OffsetY="10" Position="Bottom">
</cc1:PopupControlExtender>

But I have to click the imageto get the panel to popup. How can I get the panel to popup onmouseover or hover like in the example cited above? Thanks forany feedback you can provide.


Actually, the HoverMenuExtender is a better choice for my specific need. These Ajax controls are fantastic.


Hi,

Please try this:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager
</div
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px" BackColor="#FFFFC0">
This is the popup control</asp:Panel>
<asp:Button ID="Button1" runat="server" Text="Button" />
<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1"BehaviorID="pop"runat="server" PopupControlID="Panel1" TargetControlID="Button1">
</ajaxToolkit:PopupControlExtender>
</form
<script type="text/javascript">
function pageLoad(sender, args)
{
// $get("Button1").style.visibility = "hidden";
$get("Panel1").onmouseout = mouseOut;
}

function mouseOut()
{
var bh = $find("pop");
bh.hidePopup();

}
</script
</body>
</html>

Hope this helps.

Wednesday, March 21, 2012

Ajax and dynamically created images

Hi all,

I have a page that display a large dynamically created image (server side script) that can take a while to be generated (say about 2 seconds). Pressing a button I want the image to be refreshed.

I included the image and the button in a UpdatePanel to avoid flicker, but I don't take the effect I want as images are loaded asynchronously by the browser after the UpdatePanel completes.

Is there a solution to avoid this?

Thanks in advance

Here's the simple code I used:

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title></title>

</head>

<body>

<formid="form1"runat="server">

<div>

<asp:ScriptManagerID="ScriptManager"runat="server">

</asp:ScriptManager>

<asp:UpdatePanelID="UpdatePanelMain"runat="server">

<ContentTemplate>

<imgalt=""src="testimage.aspx?<%=DateTime.Now()%>"/>

<asp:ButtonID="ButtonRfreshImage"runat="server"Text="Refresh"/>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

Hi,

I think you need to block the execution of button click event until the image is generated successfully so that the changes can be reflected on the client.

For instance:

btnClick()

{

generateImage();// call this method synchronously

}

Hope this helps.


This is what I do, my code was only an example to demonstrate the behaviours.

What happens in any case is that, if the image is big enough and the connection is slow, the page will be refreshed before the image is completely received because the browser download it asynchronously.

I solved this using two images, one invisible and the other as a placeholder: I refresh the invisible image and when it is complete I reassign the .src of the placeholder image to load the some URL: the file is now in the cache and it happens immediately .... but I think it's strange Ajax doesn't support this directly.

Ajax and Dynamically created controls.

I have an app where I add images to a panel based on what a user selects from a drop down list. Under internet explorer and opera it works fine. but the html code generated in firefox and netscape is missing the events. When I debug with IE or OPERA as default browser in vs 2005 events are fired. When Netscape or Firefox are set as default events (for the images) are not fired. I looked at the code being generated by the server and there are no events in the html code for the images. Here is what I get.

<li class="zipitem"><input name="zipselect1$ziprepeater$ctl01$selectbtn"id="zipselect1_ziprepeater_ctl01_selectbtn"class="imagebtn"src="images/selectbtn.gif"alt="Select"style="border-width: 0px;"type="image"><span id="zipselect1_ziprepeater_ctl01_ziplbl">12836</span></li><li class="zipitem"><input name="zipselect1$ziprepeater$ctl02$selectbtn"id="zipselect1_ziprepeater_ctl02_selectbtn"class="imagebtn"src="images/selectbtn.gif"alt="Select"style="border-width: 0px;"type="image"><span id="zipselect1_ziprepeater_ctl02_ziplbl">12851</span></li>
<li class="zipitem"><input name="zipselect1$ziprepeater$ctl03$selectbtn"id="zipselect1_ziprepeater_ctl03_selectbtn"class="imagebtn"src="images/selectbtn.gif"alt="Select"style="border-width: 0px;"type="image"><span id="zipselect1_ziprepeater_ctl03_ziplbl">12852</span>
this is just a code scrap. The page looks fine in all browsers but the Mozilla browsers dont work. You should be able to click on the images which takes and adds the zipcodes the images represent into a gridview. As I said works in IE and Opera fine.
 
 
 

See this is Browser compatibility issue....

Can you post some code details so it will help..

Which version of Firefox you used...

I suggest try yo use latest version...


It is a browser issue? I thought asp.net server side created the code for each browser. Any way if I.E worked the way it should I would not need Ajax to solve this problem. It is the only browser of the four I have tested that causes the screen to flash when clicking on the images. of course I could have some setting wrong which IE requires that the others don't.

The follow code produces a number of images on the page. When an image is clicked it gets put into a data grid.

see first post for code scrap generated for mozilla browsers . As can be seen there there is no event code created for the images.

As for code here is html source

<%@. Control Language="c#" AutoEventWireup="false" Codebehind="zip_selector.ascx.cs" Inherits="active.UserControls.zip_selector" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%
<br>
<div id="div_selectedzip">
<asp:label runat="server" id="lblSelZip"> Set of Selected Zipcodes: </asp:label><asp:button id="btnRemoveAll" runat="server" text="Remove All" visible="False"></asp:button><asp:repeater id=selectedzip runat="server">
<headertemplate>
<ul style="list-style-type: none">
</headertemplate>
<itemtemplate>
<li class="selectedzipitem">
<asp:label id="Label2" runat="server"><%#DataBinder.Eval(Container.DataItem, "zip_code") %></asp:label>
<asp:linkbutton id="removelnk" runat="server" commandname='<%# DataBinder.Eval(Container.DataItem, "zip_code") %>'>Remove</asp:linkbutton
</li>
</itemtemplate>
</asp:repeater>
<div style="CLEAR: both"></div> <!-- This is to make Opera load correctly for fieldsets -->
</div>
<br>
<div id="div_cntyzip">
<div id="instructTxt"><p>Enter one or
more zip codes in the text box separated by commas. Or you can add to set of selected zip
codes from a county. If you are interested in one of the <a onclick="window.open('glossary.htm', 'Glossary', 'width=432,height=270,toolbar=0,scrollbars=1,screenX=200,screenY=200,left=200,top=200')" href="http://links.10026.com/?link=javascript:void(0)" >non-standard zipcodes</a>, type one or more of the
following values separated by commas: <b>invalid,
illegible, unreported, irregular, or private</b>.</p></div>
<asp:label id="zipErrMsg" runat="server" forecolor="Red" visible="False">* Error:</asp:label>
<span>Zip Code:</span><asp:textbox id=txtZip runat="server"></asp:textbox><asp:button id=btnSelectZip runat="server" text="Add to Set"></asp:button>
<asp:Button id="btnAddAllZip" runat="server" Text="All NYS Zipcodes"></asp:Button><br>
<div style="DISPLAY: inline; WIDTH: 70px; HEIGHT: 15px" ms_positioning="FlowLayout">OR</div><br
<span>Add to Set of Selected Zipcodes from County: </span><asp:dropdownlist id=cntyzipddl runat="server" autopostback="True"></asp:dropdownlist>
<asp:repeater id=ziprepeater runat="server" OnItemCommand="ziprepeater_ItemCommand1" >
<headertemplate>
<ul style="list-style-type: none">
</headertemplate>
<itemtemplate>
<li class="zipitem">
<asp:imagebutton id="selectbtn" runat="server" cssclass="imagebtn" alternatetext="Select" imageurl="../images/selectbtn.gif" commandargument='<%#DataBinder.Eval(Container.DataItem, "cnty_code") %>' commandname='<%#DataBinder.Eval(Container.DataItem, "zip_code") %>'></asp:imagebutton>
<asp:label id="ziplbl" runat="server"><%#DataBinder.Eval(Container.DataItem, "zip_code") %></asp:label>
</li>
</itemtemplate>
<footertemplate>
</ul>
<div class="spacer"> </div>
</footertemplate>
</asp:repeater>
<div style="CLEAR: both"></div> <!-- This is to make Opera load correctly for fieldsets -->
</div>
<br
here is code behind page in c#

namespace active.UserControls
{
using System;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using active.DataAccessLayer;
using active.Common;

/// <summary>
/// Summary description for zip_selector.
/// </summary>
public class zip_selector : System.Web.UI.UserControl
{
#region Properties
protected System.Web.UI.WebControls.Repeater ziprepeater;
protected System.Web.UI.WebControls.Repeater selectedzip;
protected System.Web.UI.WebControls.Label Label1;
protected System.Web.UI.WebControls.Label zipErrMsg;
protected System.Web.UI.WebControls.Label lblSelZip;
protected System.Web.UI.WebControls.TextBox txtZip;
protected System.Web.UI.WebControls.Button btnSelectZip;
protected System.Web.UI.WebControls.DropDownList cntyzipddl;
protected System.Web.UI.WebControls.Button btnRemoveAll;
protected System.Web.UI.WebControls.Button btnAddAllZip;
protected bool bBadZipFound=false;
private int MAXZIP;

private int MAXZIPCOUNT
{
get {return 300;}
set {MAXZIP = value;}
}

public bool All_ZIP_SELECTED
{
get
{
object o = ViewState["All_Zip_Selected"];
if (o == null)
return false;
else
return (bool)o;
}
set { ViewState["All_Zip_Selected"] = value; }
}

private string CountyCode
{
get
{
object o = ViewState["CountyCode"];
if (o == null)
return "00";
else
return o.ToString();
}
set { ViewState["CountyCode"] = value; }
}

public DataTable SelectedZipTable
{
get
{

DataTable t = ViewState["SelectedZip"] as DataTable;
if (t == null)
{
t=new DataTable("SelectedZip");
DataColumn dc = new DataColumn("zip_code",System.Type.GetType("System.String"));
DataRow dr = t.NewRow();
t.Columns.Add(dc);
dr["zip_code"] = "None Selected";
ViewState["SelectedZip"] = t;
}

return t;
}
set { ViewState["SelectedZip"] = value; }
}
public bool BadZipFound
{
get
{
return bBadZipFound;
}
}
public event EventHandler BubbleClick;
#endregion

#region Page Events
private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
zipErrMsg.Visible = false;
if (!Page.IsPostBack)
{
CountyList lstCounties = Lookups.Counties;

//Filter out the non-standard county codes. All nonstandard counties have a sort_order
//greater than 990.
DataView dv = lstCounties.Tables[0].DefaultView;
dv.RowFilter = "sort_order < 990";
//lstCnty.DataSource = lstCounties;
cntyzipddl.DataSource=dv;
cntyzipddl.DataMember = lstCounties.counties.TableName;
cntyzipddl.DataTextField = lstCounties.counties.cnty_nameColumn.ColumnName;
cntyzipddl.DataValueField = lstCounties.counties.cnty_codeColumn.ColumnName;
cntyzipddl.DataBind();

ListItem item= new ListItem("Select County","00");

cntyzipddl.Items.Insert(0,item);
cntyzipddl.SelectedValue = CountyCode;

BindZipRepeater();
BindSelectedZip();

}

}
protected override void OnPreRender(EventArgs e)
{
if (SelectedZipTable.Rows.Count > 0)
btnRemoveAll.Visible=true;
else btnRemoveAll.Visible=false;
base.OnPreRender (e);
}
#endregion

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
this.cntyzipddl.SelectedIndexChanged +=new EventHandler(cntyzipddl_SelectedIndexChanged);
this.ziprepeater.ItemCommand +=new RepeaterCommandEventHandler(ziprepeater_ItemCommand);
this.selectedzip.ItemCommand +=new RepeaterCommandEventHandler(selectedzip_ItemCommand);
this.btnSelectZip.Click += new System.EventHandler(this.btnSelectZip_Click);
base.OnInit(e);
}

/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.btnRemoveAll.Click += new System.EventHandler(this.btnRemoveAll_Click);
this.btnAddAllZip.Click += new System.EventHandler(this.btnAddAllZip_Click);
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion

#region User Public Methods

/// <summary>
/// Binds the zip selector datagrid to the results from list of zip codes retrieved by county
/// </summary>
public void BindZipRepeater()
{
DataSet dsZipSelect;
string cnty_cd = CountyCode;
DataTable dt;

dsZipSelect = Lookups.GetZipByCnty(cnty_cd);
dt = dsZipSelect.Tables[0];

//Add the option of selecting all zip codes in county
if (CountyCode!="00")
{
DataRow dr = dt.NewRow();
dr[1]="All County Zip";
dt.Rows.Add(dr);
}
/*//Add the option of selecting all NY zip codes
dr = dt.NewRow();
dr[1]="All NY Zip";
dt.Rows.Add(dr);
*/
ziprepeater.DataSource = dsZipSelect;
ziprepeater.DataMember = "ZipSelect";
ziprepeater.DataBind();

}

public void BindSelectedZip()
{
selectedzip.DataSource = SelectedZipTable;
selectedzip.DataMember = "SelectedZip";
selectedzip.DataBind();

int selectedCount = SelectedZipTable.Rows.Count;
lblSelZip.Text = "Set of Selected Zip Codes (" + SelectedZipTable.Rows.Count + " of " + MAXZIPCOUNT + " Max): ";

}
#endregion

#region Private Methods
private void lstCnty_SelectedIndexChanged(object sender, EventArgs e)
{
ListControl lstCnty = sender as ListControl;
if (lstCnty != null)
{
CountyCode = lstCnty.SelectedValue;
BindZipRepeater();
}
}

private void cntyzipddl_SelectedIndexChanged(object sender, EventArgs e)
{
ListControl lstCnty = sender as ListControl;
if (lstCnty != null)
{
CountyCode = lstCnty.SelectedValue;
BindZipRepeater();
}
}

private void ziprepeater_ItemCommand(object source, RepeaterCommandEventArgs e)
{
OnBubbleClick(e);
string selectedZip = e.CommandName;
string selectedCnty = e.CommandArgument.ToString();
DataTable dt = SelectedZipTable;
zipErrMsg.Visible=false;
if (!All_ZIP_SELECTED)
{
//the zip is not already been added and the amount of selected zipcodes
//do not exceed MAXZIPCOUNT
if (dt.Rows.Count < MAXZIPCOUNT)
{
if (selectedZip == "All County Zip")
{
//Add all zips in the selected County
AddCountyZips();
}
else
{
AddSelectedZip(selectedZip);
}
}
else
{
zipErrMsg.Text = "You have exceeded the maximum of " + MAXZIPCOUNT.ToString() + " zip codes. Please narrow your search. <BR>";
zipErrMsg.Visible = true;
}
}
else
{
zipErrMsg.Text="All NYS zip codes have been selected. No need to add individual zipcode.<br>";
zipErrMsg.Visible=true;
}
}

private void selectedzip_ItemCommand(object source, RepeaterCommandEventArgs e)
{
string selectedZip = e.CommandName;
DataTable dt = SelectedZipTable;
string selectExpr = "zip_code ='" + selectedZip+"'";
DataRow[] foundRow = dt.Select(selectExpr);
zipErrMsg.Visible=false;

if (foundRow.Length >0)
{
dt.Rows.Remove(foundRow[0]);
if (selectedZip=="All NYS Zip")
{ All_ZIP_SELECTED = false;
}
BindSelectedZip();

}

}
//"Add to Set" button click method
private void btnSelectZip_Click(object sender, System.EventArgs e)
{
OnBubbleClick(e);
zipErrMsg.Visible=false;
//reset the select county table to avoid confusion
CountyCode="00";
cntyzipddl.SelectedValue = CountyCode;
BindZipRepeater();

if (!All_ZIP_SELECTED)
{
//parse and validate zip input string
string [] zips = zipinput_parser();
DataTable dt = SelectedZipTable;

//if valid zips are returned, add to Selected Zip table
if (zips != null)
{
foreach (string zip in zips)
{
//the zip is not already been added and the amount of selected zipcodes
//do not exceed MAXZIPCOUNT
if (dt.Rows.Count < MAXZIPCOUNT)
{
AddSelectedZip(zip);
}
else
{
zipErrMsg.Text = "You have exceeded the maximum of " + MAXZIPCOUNT.ToString() + " zip codes. Please narrow your search.<br>";
zipErrMsg.Visible = true;
break;
}
//blank out the zip textbox for another entry
txtZip.Text="";
} //end of foreach
} //end of if zip length==0

}
else
{
zipErrMsg.Text="All NYS zip codes have been selected. No need to add individual zipcode.<br>";
zipErrMsg.Visible=true;
}
}

public string[] zipinput_parser()
{
// split zip string between commas
string[] splitTxt = txtZip.Text.Split(new char[] {',',' '});
string validZips="";
string badZips="";
zipErrMsg.Text = "* Error: ";
zipErrMsg.Visible=false;
//check blank zip input
if (txtZip.Text == "")
{
zipErrMsg.Text += "Please enter a zip code value. <br>";
zipErrMsg.Visible = true;
}
else
{
string lowerZip;
//txtZip.Text = "";
foreach (string zip in splitTxt)
{
lowerZip = zip.ToLower();
lowerZip = lowerZip.Trim();
if (zip !="")
{
//check it is not one of the non-standard zip code values
if ((lowerZip != "private") &&(lowerZip != "invalid") && (lowerZip != "illegible") && (lowerZip != "unreported") && (lowerZip != "irregular"))
{ //zip code is invalid if zip is alpha or is not 5 digits long
if ((lowerZip.Length != 5)||!Validations.IsNumeric(lowerZip))
{
//zipErrMsg.Text = zipErrMsg.Text + lowerZip;
zipErrMsg.Visible = true;
//txtZip.Text = txtZip.Text + lowerZip + ",";
badZips= badZips + lowerZip + ",";
}
else validZips = validZips + lowerZip + ",";
}
else validZips = validZips + lowerZip + ",";
}
}
if (zipErrMsg.Visible)
{
bBadZipFound=true;
badZips = badZips.Remove(badZips.Length-1,1);
txtZip.Text=badZips;
zipErrMsg.Text = zipErrMsg.Text + badZips + " is not valid.";
if (validZips.Length>0)
{
zipErrMsg.Text += " Valid zips have been added to the selected zip table.";
}
zipErrMsg.Text += "<br>";
}
//remove last comma
if (validZips.Length>0) validZips = validZips.Remove(validZips.Length-1,1);
}
if (validZips =="")
return null;
else return validZips.Split(new char[] {','});

}

public string zipinput_parser(bool validateOnly)
{
// split zip string between commas
string[] splitTxt = txtZip.Text.Split(new char[] {',',' '});
string validZips="";
string badZips="";
zipErrMsg.Text = "* Error: ";
zipErrMsg.Visible=false;
//check blank zip input
if (txtZip.Text == "")
{
zipErrMsg.Text += "Please enter a zip code value. <br>";
zipErrMsg.Visible = true;
}
else
{
string lowerZip;
//txtZip.Text = "";
foreach (string zip in splitTxt)
{
lowerZip = zip.ToLower();
lowerZip = lowerZip.Trim();
if (zip !="")
{
//check it is not one of the non-standard zip code values
if ((lowerZip != "private") &&(lowerZip != "invalid") && (lowerZip != "illegible") && (lowerZip != "unreported") && (lowerZip != "irregular"))
{ //zip code is invalid if zip is alpha or is not 5 digits long
if ((lowerZip.Length != 5)||!Validations.IsNumeric(lowerZip))
{
//zipErrMsg.Text = zipErrMsg.Text + lowerZip;
zipErrMsg.Visible = true;
//txtZip.Text = txtZip.Text + lowerZip + ",";
badZips= badZips + lowerZip + ",";
}
else validZips = validZips + lowerZip + ",";
}
else validZips = validZips + lowerZip + ",";
}
}
if (zipErrMsg.Visible)
{
bBadZipFound=true;
badZips = badZips.Remove(badZips.Length-1,1);
zipErrMsg.Text = zipErrMsg.Text + badZips + " is not valid.";
zipErrMsg.Text += "<br>";
}
//remove last comma
if (validZips.Length>0) validZips = validZips.Remove(validZips.Length-1,1);
}
return validZips;

}
/// <summary>
/// Adds all the zip codes within a county
/// </summary>
private void AddCountyZips()
{
DataSet dsZipSelect;
string cnty_cd = CountyCode;
DataTable dt = SelectedZipTable;
DataTable cntyTable;
string zipCd;
int totalZip;

zipErrMsg.Visible=false;
dsZipSelect = Lookups.GetZipByCnty(cnty_cd);
cntyTable = dsZipSelect.Tables[0];
totalZip = dt.Rows.Count + cntyTable.Rows.Count;
if (totalZip < MAXZIPCOUNT)
{
foreach (DataRow aRow in cntyTable.Rows)
{
zipCd = aRow[1].ToString();
AddSelectedZip(zipCd);
}
}
else
{
zipErrMsg.Text = "You have exceeded the maximum of " + MAXZIPCOUNT.ToString() + " zip codes. Please narrow your search. <br>";
zipErrMsg.Visible = true;
}
}
private void AddSelectedZip(string zipcd)
{
DataTable dt = SelectedZipTable;
string selectExpr = "zip_code ='" + zipcd +"'";
DataRow[] foundRow = dt.Select(selectExpr);
if (foundRow.Length ==0)
{
DataRow dr = dt.NewRow();
dr[0]=zipcd;
dt.Rows.Add(dr);
BindSelectedZip();
}
}

private void btnRemoveAll_Click(object sender, System.EventArgs e)
{
SelectedZipTable.Clear();
zipErrMsg.Visible = false;
All_ZIP_SELECTED = false;
BindSelectedZip();
}

private void btnAddAllZip_Click(object sender, System.EventArgs e)
{
OnBubbleClick(e);
SelectedZipTable.Clear();
AddSelectedZip("All NYS Zip");
All_ZIP_SELECTED = true;
}
protected void OnBubbleClick(EventArgs e)
{
if(BubbleClick != null)
{
BubbleClick(this, e);
}
}
#endregion

protected void ziprepeater_ItemCommand1(object source, RepeaterCommandEventArgs e)
{

}

}
}

None of the click events for the images created on the fly fire as I said in first posting. You can see that the html generated by the server does not have any events.