Showing posts with label regarding. Show all posts
Showing posts with label regarding. Show all posts

Wednesday, March 28, 2012

Multiple update panels

I had a query regarding multiple update panels.
I have a user control which contains one update panel.This user control contains a hidden textbox .
I am updating the updatepanel on basis of a timer control in javascripts which raises a postback.

I have placed two instances of this user control in another page say for eg. CIndexPage.aspx.
Now the Script manager is also placed in the same page ie CIndexPage.aspx.

Will the two updatepanels wrk independently.

Is the hidden variable shared between the instances of the update panel ?
Becoz the issue here is that even if i pass a value for the hidden textbox contained
in the first Update Panel, still the value gets stored for the hidden
variable in the second instance of the updatePanel.

Can we use Update Panels in a User Control and place multiple instances of the UserControls in a page.

Please if someone cld help me with this.

Thanks in advance.

Regards,
Shweta

hello.

well, the updatepanels will work independently. if you want to get independent refershes, you need to make sure that you've set the update mode of the pannel to conditional.

regarding the hidden field, it depends on how you've injected in the page...


Hi,

My Code is somewhat like this

User Control contains

_____________________________________________________________

<asp:UpdatePanel id=UpdatePanel1 runat=server>
<div id=DivCtrl runat=server >
<asp:HiddenField runat="server" ID="RequestID" Value="0" />
</UpdatePanel>


____________________________________________________________________
There is adiv control which contains multiple hyperlinks.That is done thru .cs file of the Master Control and is dynamically generated.
The hidden filed in placed inside the UpdatePanel and the RequestID is updated on the hyperlink click.

And 2 instances of this user control are placed in the Parent Page.
Also what happens is even though i am clicking on the first User Controls hyperlink (first updatepanel) still the Value is assigned to the second User Controls Hidden Field.

It always updates the last user control.

Why does work in this manner . Also to update the UpdatePanel i am using the timer control and _dopostback method.

Is there an issue with the timer control.Shld that be placed in the ParentPage.

regards,

Shweta


hello.

can you please build a small demo app with a simple user control + page and put it here?


yes sure
------------
User Control Code is as follows for .aspx is as follows
-------------
<script language =javascript>
var l_objtimer="";
l_objtimer =window.setInterval('UPdatePanel',1000);
function UPdatePanel()
{
var obj=get$('<%=RequestID.ClientID%>');
_dopostback("obj",'');
}

function CallDetails(nSerialNo)
{
var obj=get$('<%=RequestID.ClientID%>');
obj.value=nSerialNo;
_dopostback("obj",'');
}
</script>
<body>
<asp:UpdatePanel id=UpdatePanel1 runat=server>
<div id=DivCtrl runat=server >
<asp:HiddenField runat="server" ID="RequestID" Value="0" />
</UpdatePanel>
</body>

------------
end
-------------

------------
User Control Code is as follows for cs is as follows
-------------

In this i dynamically adding a hyperlink whose onclick events call CallDetails(nSerialNo) (in .aspx of user control).
And pass different value to the nSerialNo parameter on the click event.In the event i change the value of RequestID to the the nSerialNo.

------------
end
-------------

------------
Parent Page Code is as follows for .aspx is as follows
-------------
<%@. Register TagPrefix="csc" Namespace="CustomServerControls" %>
<body>
<asp:ScripManager runat=server id=ScriptMgr1 >
</asp:ScripManager >
<csc:CustomServerControls id=CustomServer1 runat=server >
</csc:CustomServerControls>

<csc:CustomServerControls id=CustomServer2 runat=server >
</csc:CustomServerControls>

</body>

------------
end
-------------

This way 2 instances of this user control are placed in the Parent Page.
Also what happens is even though i am clicking on the first User Controls hyperlink (first updatepanel) still the Value is assigned to the second User Controls Hidden Field.

Also if i am placing the usercontrol in a page and call the page thru <script tag by specifying the source it gives me a Syntax error.

Can i call the page in this way.


hello

well, now it's clear!. what you shoud do is change the js code. you should have something like this:

<script language =javascript>
var l_objtimer="";
l_objtimer =window.setInterval('UPdatePanel',1000);
function UPdatePanel(idCtl)
{
var obj=get$(idCtl);
_dopostback("obj",'');
}

function CallDetails(idCtl, nSerialNo)
{
var obj=get$(idCtl);
obj.value=nSerialNo;
_dopostback("obj",'');
}
</script>

where idCtl is the ID of the control (hidden field) you want to use. yep, you'll have to change your code so that it also passes the id of the field when you call the method.

in your code, what's happening is that when you're adding the second user control, it'll add the js methods again, overriding the previous definitions. this means that clicking on the 1st or 2nd user control will always call the latest definition, which points to the id of the last user control you've added to the page. if you perform the changes I've said, this won't happen any more.

Multiple updatepanels vs single updatepanel

Hi,

Anybody got any information regarding the trade off with having either a single updatepanel encapsulating a large number of databound controls (each of which can be independently updated) or multiple updatepanels each surrounding a single databound control?

Any advice or pointers would much appreciated.

Brendy

The answer depends on what gets updated and the dependency that the controls have on each other. Typically, you want to use UpdatePanels to only update fragments of the page that need to be updated, leaving the other areas intact. This technique will also reduce the amount of data that is coming back down from the server to render the page.

So if some controls don't need to be updated regularly, then they belong within their own UpdatePanel (with the UpdateMode set to Conditional).


hi, many thanks for your reply. What I really want to know is, is there a point at which adding more updatepanels to a page starts to have a negative impact on performance? The page that I have has a 10x10 matrix with each cell containing a number of independent datadriven controls. So what's the tradeoff between having one update panel covering the entire matrix or 100 updatepanels one for each cell? Does this slow down the page load?

Cheers

Brendy

Saturday, March 24, 2012

Need desperate help with an ajax functionality. Deadline in two days.

Hello. I have a question regarding animationextender and tables...

if you go to...

http://doc000.emailster.com/test.aspx

And click on the button in the middle left, you will see the above image move to the left, while the table cell on the right containing the word "right" does not expand along with the moving div layer. it stays stationary. This is visible in IE, however, in FF it works ok..

I put my code below...

This is the html portion that I am testing:

<tableborder="1">

<tr>

<tdstyle="width:197px;">

<asp:PanelID="pSideMenu"Style="position:relative;"runat="server">

<imgalt="TRSh"src="/images/Create-New-Material.gif"width="197"height="47"/>

</asp:Panel></td>

<tdstyle="width:100%;">right</td>

</tr>

</table>

This is my ajax code:

<ajaxToolkit:AnimationExtenderID="AnimationExtender1"runat="server"TargetControlID="collapserClose">

<Animations>

<OnClick>

<Sequence>

<parallelDuration=".20"Fps="25">

<MoveAnimationTarget="pSideMenu"Horizontal="-180"/>

<ResizeAnimationTarget="pSideMenu"width="10px"/>

</parallel>

<StyleActionAnimationTarget="collapserClose"Attribute="display"Value="none"/>

<StyleActionAnimationTarget="collapserOpen"Attribute="display"Value="block"/>

</Sequence>

</OnClick>

</Animations>

</ajaxToolkit:AnimationExtender>

<ajaxToolkit:AnimationExtenderID="AnimationExtender2"runat="server"TargetControlID="collapserOpen">

<Animations>

<OnClick>

<Sequence>

<parallelDuration=".20"Fps="25">

<MoveAnimationTarget="pSideMenu"Horizontal="180"/>

<ResizeAnimationTarget="pSideMenu"width="197px"/>

</parallel>

<StyleActionAnimationTarget="collapserClose"Attribute="display"Value="block"/>

<StyleActionAnimationTarget="collapserOpen"Attribute="display"Value="none"/>

</Sequence>

</OnClick>

</Animations>

</ajaxToolkit:AnimationExtender>

Any help would be very much appreciated. In fact, i would be so grateful, I'm willing to put money in on this. Negotiable (message me).

I've spent around 2 days on this now. And it's eating up the work hours. So I'm fairly desperate. Thanks so much.

Sincerely,

Jeff

I tested your page with firefox and ie7, didn't see anything moving...

Maybe you need something like this:

<StyleActionAnimationTarget="[...]"Attribute="overflow"Value="hidden"/>

Except you want overflow visible? (Not sure I understood your problem though..)


Well, if you click the button. You should see something happen at the very top left corner. See it?


Why don't you use a collapsiblepanelextender instead...this has built-in animation for the collapse/expand and may resolve your problem.


Well, I did that at the beginning. But the animationextender gives much more flexibility in terms of FPS, and duration, and also, it allows me to specify how much it should be moved. I tried using the "expandedsize" and "collapsedsize" for the collapsiblepanel, but it did not work.

I'm stuck.

Help.

Thanks.

Wednesday, March 21, 2012

Need help designing a drag-drop resulting in a formatted output to the user

Hi

I have a request from a customer regarding a drag-drop-edit feature.

This is the idea:

An editor of a website must enter data to show for the web-site user. He has a fixed number of elements that can be used, most of which will be positioned the same place on every page, but a few can vary and some can be added multiple times (this is decided based on the database using relations). The editor would like to be able to have some sort of toolbox feature on his "Create journal", from this toolbox he can drag out elements, such as date, journal number, description, resume etc. When an item is dragged out on the "workspace" he can then enter the data that should go in that field, meaning the description box should be considerebly larger than the date box as example. When the editor has added all the elements to the journal he can save it and it is now visible on the website. The website visitors can now see the journal formatted the way the editor defined it.

I haven't worked alot with AJAX before, so I would like to hear if this is something AJAX can help me solve? If so links to usefull sites would be very welcomeSmile

Hi,

Thank you for your post!

Seehttp://forums.asp.net/t/1187961.aspx

Here is a simple demo to combine pictures at server side in C#:

using System;
using System.Collections.Generic;
using System.Collections;
using System.Text;
using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;

namespace Enter_name
{
class GenerateImage
{
public struct favoriteImage
{
private string _imagePath;
private int _x;
private int _y;

public int x
{
get
{
return _x;
}
set
{
_x = value;
}
}

public int y
{
get
{
return _y;
}
set
{
_y = value;
}
}

public string imagePath
{
get
{
return _imagePath;
}
set
{
_imagePath = value;
}
}
}

[STAThread]
static void Main(string[] args)
{
string CurrentDirectory = System.Environment.CurrentDirectory;
string body_path = CurrentDirectory + "\\4.jpg";

favoriteImage[] FaImage = new favoriteImage[2];

FaImage[0].x = -3;
FaImage[0].y = 70;
FaImage[0].imagePath = CurrentDirectory + "\\1.jpg";

FaImage[1].x = 20;//65;
FaImage[1].y = -12;
FaImage[1].imagePath = CurrentDirectory + "\\2.jpg";

generateWinterMark(CurrentDirectory, body_path, FaImage);
}

/// <summary>
///
/// </summary>
/// <param name="savePath"></param>
/// <param name="body_path"></param>
/// <param name="favorite"></param>
/// <returns></returns>
private static string generateWinterMark(string savePath, string body_path, favoriteImage[] favorite)
{
//create a image object containing the photograph to watermark
Bitmap imgPhoto = new Bitmap(body_path);
int phWidth = imgPhoto.Width;
int phHeight = imgPhoto.Height;


string nowTime = DateTime.Now.Year.ToString() + DateTime.Now.Month.ToString() + DateTime.Now.Day.ToString();
nowTime += DateTime.Now.Hour.ToString() + DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString();

string saveImagePath = savePath + "\\FA" + nowTime + ".jpg";

//create a Bitmap the Size of the original photograph
Bitmap bmPhoto = new Bitmap(phWidth, phHeight, PixelFormat.Format24bppRgb);
//setResolution
bmPhoto.SetResolution(imgPhoto.HorizontalResolution, imgPhoto.VerticalResolution);

//load the Bitmap into a Graphics object
Graphics grPhoto = Graphics.FromImage(bmPhoto);
//set the rendering quality for this Graphics object
grPhoto.SmoothingMode = SmoothingMode.AntiAlias;

for (int i = 0; i < favorite.Length; i++)
{
//Draws the photo Image object at original size to the graphics object.
grPhoto.DrawImage(
imgPhoto, // Photo Image object
new Rectangle(0, 0, phWidth, phHeight), // Rectangle structure
0, // x-coordinate of the portion of the source image to draw.
0, // y-coordinate of the portion of the source image to draw.
phWidth, // Width of the portion of the source image to draw.
phHeight, // Height of the portion of the source image to draw.
GraphicsUnit.Pixel); // Units of measure

//------------------
//Step #2 - Insert Property image,For example:hair,skirt,shoes etc.
//------------------
//create a image object containing the watermark
Bitmap imgWatermark = new Bitmap(favorite[i].imagePath);
int wmWidth = imgWatermark.Width;
int wmHeight = imgWatermark.Height;
imgWatermark.MakeTransparent(); //使默认的透明颜色对此 Bitmap 透明。


//Create a Bitmap based on the previously modified photograph Bitmap
Bitmap bmWatermark = new Bitmap(bmPhoto);

//bmWatermark.SetResolution(imgPhoto.HorizontalResolution, imgPhoto.VerticalResolution);
//Load this Bitmap into a new Graphic Object
Graphics grWatermark = Graphics.FromImage(bmWatermark);


int xPosOfWm = favorite[i].x;
int yPosOfWm = favorite[i].y;

//叠加
grWatermark.DrawImage(imgWatermark, new Rectangle(xPosOfWm, yPosOfWm, wmWidth, wmHeight), //Set the detination Position
0, // x-coordinate of the portion of the source image to draw.
0, // y-coordinate of the portion of the source image to draw.
wmWidth, // Watermark Width
wmHeight, // Watermark Height
GraphicsUnit.Pixel, // Unit of measurment
null); //ImageAttributes Object


//Replace the original photgraphs bitmap with the new Bitmap
imgPhoto = bmWatermark;//age(FromHbitmap(bmWatermark;

grWatermark.Dispose();
imgWatermark.Dispose();
}
bmPhoto.Dispose();
grPhoto.Dispose();

//save new image to file system.
imgPhoto.Save(saveImagePath, ImageFormat.Jpeg);
imgPhoto.Dispose();

return saveImagePath;
}
}
}

The demo show you that conbine 1.png and 2.png towhite.png.

Happy coding!

Need Opinion

Hello all, =)

I have question(s) regarding the way I add JavaScript functions and I need opinion(s). Here's one of my example:

HTML:
...
<asp:TextBox ID="txtUserName" MaxLength="30" runat="server" />
<asp:Button ID="btnAddUser" Text="Add User" OnClientClick="return ValidateUser();" OnClick="AddUser" runat="server" /
Code Behind:
protected void Page_Load(object sender, eventargs e)
{
LoadMy_JavaScripts();
}

private void LoadMy_JavaScripts()
{
string script = "";
script += "function ValidateUser()";
script += "{ ";
script += " do something here ...";
script += "}";

System.Web.UI.ScriptManager.RegisterClientScriptBlock( ... ... );
}

As you can see how I register my javascript functions. Most my pages, LoadMy_JavaScripts() contains more than 20+ javascript functions. Every time when there's a postback (partial or not), this LoadMy_JavaScritps() is called again. I have developed more than 100+ pages of .aspx with ajax and all of them are working fine with the way I am doing.

Now I am wondering if what I am doing is right or not. I know that I can add the .js file directly to the ScriptManager using ScriptReference.

from the example above: if i move that ValidateUser function into a .js file, when should i add the .js file to the scriptmanager? Is it at Page_Load? I do not want to add it directly to the <asp:ScriptManager ... > because other pages do not use this function.

Any feedback/opinion would be sweet ... ta ta ...

The 'best practice' on this is to put all your .js in a separate file (or files as needed) and then add them as scriptreferences. THis makes them easier to control and maintain, lets your clients' browsers cache the information, stops you from having to resend the same stuff on every page_load, and so on.

If your scriptmanager is on a Master page (as you indicate) then you use a scriptmanagerproxy on the content page to load additional page-specific script files. ALternatively, you can add a scriptreference programmatically if you want. Embedding javascript in your codefile is a lot more prone to error, no matter how good you are it's easy to forget to add an important syntax bit when you're doing string concatenation.

As a sidenote, when you must concatenate strings, it's almost always a good deal more efficient to use the a StringBuilder object than it is to do += style string concatenation.


Paul,

thanks again, ... i don't have any problem with string concat. =) ... javascript is easy to debug anyway.

Thanks for your input ... before i used to add the javascript druing databound later on i moved everything to a function as i am doing right now. I guess I'll start storing them in a .js file. It makes more sense ... ... =)


Anytime; glad to help. FWIW, I used to do string concat that way too until I heard about the performance hit, which I gather can be pretty signficant if there are enough concatenations.