Wednesday, March 28, 2012

Progess bar for a fileupload in an iFrame

hi,

I have put a file upload control in an iFrame so that I can mimic an asynch. postback. This works well, but now I would like to be able to detect when the button in the iFrame that submits the form in the iframe is clicked, so that i can trigger a "processing" message in the main page, which isn't posting back.

Any ideas on how I might accomplish this? (or if anyone has a better way to do an asynchrounous fileupload I'm very open to suggestions :-)

Hmm... I would be very interested in the direction you are headed.

Couldn't you do something with the onclientclick of the submit button in the iframe? So when that submit button is clicked in the iframe, a javascript is fired in the parent/main page that shows a "processing" message.

http://www.esqsoft.com/javascript_examples/iframe_talks_to_parent/

I am trying to do the exact same thing, would you have any example code?

thanks..

Programatically accessing Panels and Triggers (In CodeBehind at least)

I have a extensive toolkit that I have written over the past year or two that automatically generates all of my grids, dropdowns, "detail views" and other things. I wanted to start incorporating some snazzy ajax enabled inline calendars and stuff like that. However all of my code is buried deep within class files that generate the controls dynamically. A typical page that has a grid in it is simply a ASP:Placeholder tag, and a snip of codebehind saying what table the user wants to view, and the users group ID (around 3 lines of actual code).

I so to really AJAX enable this I would need a few things to work out, but I don't want to bore you all with those details. I would have tried to do it all of this in my class library already if I could, but when I instantiate a new Trigger, and type "t." to see what options I have, they are only the 4 options that I would have with an variable of type object (Equals, ToString, etc). I cannot even find the "EnablePartialRendering" flag that you need to setup on these panels on the updatepanel obj. Many of these controls have very few if any extra methods/properties/events different from the "System.Web.UI.Control" that they all inherit from.

Am I doing something wrong?

AB

hello.

is this an intellisense problem? if so, have you added the using directive to the source file?


I don't think that there is a problem with the intellisense, I mean, I have been coding for a few years now in .Net, using the intellisense to figure out how things work, without even really bothering with the documentation. It would seem that the Atlas is not to the point where it has the necessary XML markups to the source for the descriptions and what nots to kick in...

Basically, I am looking for examples, given an ASP.Net placeholder, to atlas enable it from the codebehind only, not from the designer... Make sense?

AB

hello again.

let me see if i got this correctly: you want to use the atlas server controls (ex.: UpdatePanel) from your source code files, right?

well, this should work, though i think that the intellisense info is not done yet (ie, you can see the methods/properties, but no info about them). so, your best option is to use .net reflector to see what it does (or, you can allways post your doubts here)


Yes, that is correct.

Have you seen any examples accessing the UpdatePanel from source code? The only examples I have found are in the ASPX Markup files, not the .ASPX.CS codebehind files...

The methods and properties I see are very limited, but as I see it, it would be done like:

Microsoft.Web.UI.ControlEventTrigger t = new Microsoft.Web.UI.ControlEventTrigger();
Microsoft.Web.UI.UpdatePanel up = new Microsoft.Web.UI.UpdatePanel();
up.Controls.Add(SomeLiteralControl);
t.ControlID(SomeButtonControl.ID);
t.EventName("Click");

Now, I can cause "SomeButtonControl" 's click event to change the Literals content and it will ajax that new content into the page?

AB
Ohh yeah, I also don't get the autocomplete for <atlas:UpdatePanel in my ASPX pages, any ideas on that?

AB

hello.

yep, adding triggers should be done like that ( though you still need to add the trigger to the collection maintained by the panel and this should be done until the init event of the page - btw, adding controls to the panel can't be done like that because you need a template).

what problems are you having with the updatepanel?


Hello,

I think I have the same problem. I thought I will start and try to change the example from

http://atlas.asp.net/docs/util/srcview.aspx?path=~/Server/samples/UpdatePanel.src

So the Panel2 is added to PlaceHolder on Page, but the panel doesn't update than.

Any ideas how it should be then, were to initiate the Panel.

For the moment my source code looks like that:

public

partialclassDefault6 : System.Web.UI.Page

{

privateUpdatePanel Panel2;protectedint PostBackCount

{

get

{

return (int)(ViewState["PostBackCount"] ?? 0);

}

set

{

ViewState[

"PostBackCount"] =value;

}

}

protectedoverridevoid OnInit(EventArgs e)

{

this.Init +=new System.EventHandler(this.Page_Init);this.Load +=new System.EventHandler(this.Page_Load);base.OnInit(e);

}

publicvoid Page_Init(Object sender,EventArgs e)

{

Panel2 =

newUpdatePanel();

Panel2.Mode =

UpdatePanelMode.Conditional;

Panel2.ID =

"UPForm";

Panel2.ContentTemplate =

newCTemplate(this);ControlEventTrigger pBtnClikEventTrigger =newControlEventTrigger();

pBtnClikEventTrigger.ControlID =

"Panel3bButton";

pBtnClikEventTrigger.EventName =

"Click";

Panel2.Triggers.Add(pBtnClikEventTrigger);

phPanel2.Controls.Add(Panel2);

}

protectedvoid Page_Load(object sender,EventArgs e)

{

if (IsPostBack)

{

PostBackCount++;

}

}

protectedvoid Panel3aButton_Click(object sender,EventArgs e)

{

Panel2.Update();

}

publicclassCTemplate :ITemplate

{

privateDefault6 m_pInnerControl;public CTemplate(Default6 pInnerControl)

{

m_pInnerControl = pInnerControl;

}

publicvoid InstantiateIn(System.Web.UI.Control container)

{

container.Controls.Add(

newLiteralControl(" [" + m_pInnerControl.PostBackCount +"] "));

}

}

}

thanks a lot in advance

Anna


hello again.

sorry, i didn't look with attention to your code. btw, don't add the panel like that...OnInit is called ot handle the init event, so just call method that adds the panel instead of creating a delegate...i see that you set the trigger to a panel3dbutton...where is this button placed? note that if's inside an user control, you can't do that because you need the full id of the control.


hi,

Thanks for sam clues.

But i noticed that the posted code

upadtes the panel. I changed the line

container.Controls.Add(newLiteralControl(" [" + m_pInnerControl.PostBackCount +" " +DateTime.Now +"] "));

And the date is changed every button click. Only the m_pInnerControl.PostBackCount is always zero.

Anna

Programatically add UserControls that Contain an UpdatePanel

In the release notes for the latest release it states that you can programatically add UpdatePanels now. I have a user control (ascx) that contains an UpdatePanel and a Timer to refresh the panel. When I add more than one of these controls to the page programatically the first refresh of one of the UpdatePanels blanks out all of the data in all of ascx controls. When I add the controls to the page in the aspx code everything works fine. I need to add them programatically since the number of them is configurable. I have the ScriptManager control on the page with partial refresh enabled. Is there something special I need to do when I add these controls programatically?

UserControl

<%@dotnet.itags.org. Control Language="C#" AutoEventWireup="true" Codebehind="DataPart.ascx.cs" Inherits="MS.Support.KnowledgeManagement.VisualKb.DataPart"
EnableViewState="false" %>
<div class="dataPart">
<div id="divHeader" class="dataPartHeader" runat="server">
<img alt="Collapse" style='float: right' src='images/Collapse.gif' title='Collapse'
onclick="ExpandCollapse(this,this.parentElement.parentElement.children(1))" />
<asp:Label ID="lblHeader" runat="server"></asp:Label>
</div>
<div id="divBody" class="dataPartBody" runat="server">
<asp:UpdatePanel ID="divUpdate" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<vkb:VkbBulletedList ID="blItems" runat="server" BulletStyle='disc' DisplayMode='HyperLink'
CssClass="dataPartList" NewIndicatorFontColor="red">
</vkb:VkbBulletedList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="timerRefresh" />
</Triggers>
</asp:UpdatePanel>
<div style='text-align: center; width: 100%'>
<asp:HyperLink ID="lnkViewAll" runat="server" CssClass="dataPartLink">View All</asp:HyperLink>
</div>
</div>
</div>
<asp:XmlDataSource ID="xmlDataSource" runat="server" XPath="descendant::Items/Item"
EnableCaching="false" EnableViewState="False"></asp:XmlDataSource>
<asp:Timer ID="timerRefresh" OnTick="timerRefresh_Tick" runat="server">
</asp:Timer>

Code to add ascx to page

dp = Page.LoadControl("DataPart.ascx") as DataPart;
dp.DataType = "Article";
dp.HeaderColor = Color.LightGray;
dp.HeaderFontColor = Color.Black;
dp.HeaderText = nodes.Current.GetAttribute("Name", String.Empty);
dp.CategoryId = Convert.ToInt32(nodes.Current.GetAttribute("Id", String.Empty));
dp.BodyColor = Color.WhiteSmoke;
dp.EnableRefresh = false;
dp.XmlData = nodes.Current.SelectSingleNode("Items") != null ? nodes.Current.SelectSingleNode("Items").OuterXml : "<Items />";
td.Controls.Add(dp);

I tried a simple example just using a RadioButtonList against XML data source and everything seemed to work fine when adding dynamically. What's in the VkbBulletedList control?
Its just an override of the BulletedList control to add some custom text to each bulleted item.

programatically adding cascading dropdowns with the ability to add to the dropdownlist

I'll keep this as simple as possible, apologies in advance. Cascading dropdowns (CCD) are added to a page programatically. Each cascade dropdown (CCD) is added in a while lop based on the number of levels read in from a db table. beside each dropdown (CCD) is an add button, which when clicked pops up a modal window, allowing the user to via an update panel add to each the cascading dropdown (CCD) of choice. My problem is this I want the button beside the dropdown only to become enabled when the cascading dropdown is active/populated. So when I draw everything in theOnInit function I make the buttons beside the cascading dropdowns disabled. My Question is how do I enable them based on the (CCD) becoming active? and secondly am I doing this the correct way. Code below: Thanks in advance

While counter < SR.Item("Annello")

Lit =New Literal

If counter < 1Then

Lit.Text ="Category"

Else

Lit.Text ="Sub-Category"

EndIf

UPanel.ContentTemplateContainer.Controls.Add(Lit)

DDL =New DropDownList

With DDL

.ID ="DropDown" & counter

.Width = 250

.DataTextField ="CategoryName"

.DataValueField ="CID"

EndWith

UPanel.ContentTemplateContainer.Controls.Add(DDL)

Cascade =New AjaxControlToolkit.CascadingDropDown

With Cascade

.ID ="Cas" & counter

.TargetControlID = DDL.ID

If counter > 0Then

.ParentControlID ="DropDown" & counter - 1

.PromptText ="Please select a Sub-Category"

Else

.PromptText ="Please select a Category"

EndIf

.LoadingText ="Loading.."

.Category = counter

.ServiceMethod ="GetCategoriesPageMethod"

EndWith

UPanel.ContentTemplateContainer.Controls.Add(Cascade)

IB =New ButtonWith IB

.ID ="ADD" & counter

.Text ="add to.."

EndWith

UPanel.ContentTemplateContainer.Controls.Add(IB)

IB.Enabled =False

'''MODAL POPUP

NPanel =New Panel

With NPanel

.Style.Add(HtmlTextWriterStyle.Display,"none")

.Style.Add(HtmlTextWriterStyle.Height,"200px")

.Style.Add(HtmlTextWriterStyle.Width,"350px")

.Style.Add(HtmlTextWriterStyle.BackgroundColor,"#ffffff")

.Style.Add(HtmlTextWriterStyle.Padding,"10px")

.ID ="NPanel" & counter

EndWith

Lit =New Literal

Lit.Text ="Enter Your Category here "

NPanel.Controls.Add(Lit)

TBX =New TextBox

With TBX

.ID ="AddTBX" & counter

.Width =New System.Web.UI.WebControls.Unit(190)

EndWith

NPanel.Controls.Add(TBX)

IB =New ButtonWith IB

.ID ="OK" & counter

.Text ="OK"

'.Attributes.Add("onclick", "InsertCategory();")

EndWith

NPanel.Controls.Add(IB)

IB2 =New Button

With IB2

.ID ="Cancel" & counter

.Text ="Cancel"

EndWith

NPanel.Controls.Add(IB2)

UPanel.ContentTemplateContainer.Controls.Add(NPanel)

MP =New AjaxControlToolkit.ModalPopupExtender

With MP

.TargetControlID ="ADD" & counter

.PopupControlID ="NPanel" & counter

.OkControlID ="OK" & counter

.CancelControlID ="Cancel" & counter

.OnOkScript ="InsertNewCategory()"

.OnCancelScript ="alert('cancel');"

'.OnOkScript = "alert('OK');"

.DropShadow =False

.BackgroundCssClass ="ModalPopupBackground"

EndWith

UPanel.ContentTemplateContainer.Controls.Add(MP)

Hi

Try this,It works:

<td><asp:DropDownList ID="DropDown1" onchange="javascript:activeBtn(this)" runat="server" Width="170" /></td>

<script type='text/javascript'>
function activeBtn(ccd)
{
var strcounter = ccd.id.substring(ccd.id.indexOf("DropDown") + 8, ccd.length - 1);
var counter = parseInt(strcounter);
var theBtn = document.getElementById(ccd.id.replace("DropDown", "ADD").replace(strcounter, (counter + 1) + ""))
if(theBtn){
if(ccd.selectedIndex != 0)theBtn.disable = false;
else theBtn.disable = true;
}
}
</script>

You can add the onchange event handlers for your DropDownLists in code-behind by using this code:

DDL =New DropDownList

With DDL

.ID ="DropDown" & counter

.Width = 250

.DataTextField ="CategoryName"

.DataValueField ="CID"

.Attributes.Add("onchange", "javascript:activeBtn(this);")

EndWith

Best Regards


Gave that a go and couldn't get it to work. I see what your doing and I'm hitting the function and even if I hardcode the Button.ID to enable that one button it doesn't work, no errors but it just won't enable it... any ideas. Thanks in advance..


Hi

Sound odd,I have test it many times.I'm sure it works.

Would you please privide us with a whole demo?

Thanks


ThanksJin-Yu YinSmile


Firstly thanks for you help. It is strange that it doesn't work, the funny thing is if I change you function to the following it works, but I'd never have gotten there without your help. Again many thanks.

function activeBtn(ccd)

{

var strcounter = ccd.id.substring(ccd.id.indexOf("DropDown") + 8, ccd.length - 1);

var counter = parseInt(strcounter);

var theBtn = document.getElementById(ccd.id.replace("DropDown","ADD").replace(strcounter, (counter + 1) +""))

if(theBtn){

if(ccd.selectedIndex != 0)

{

if (theBtn.disabled) {theBtn.disabled =false;}else theBtn.disabled =true;

}

}

}


Hi

Glad to hear that it works now.I'm sorry for misunderstanding any logic of it.

Best Regards


Like I said mate, thanks ,u were 100% bang on. Appreciate the help.

Programatically Adding an AutoCompleteExtender & AutoCompleteProperties

This is from the documentation:

To extend a text box with auto-completion behavior programmatically, add an AutoCompleteExtender control to your ASP.NET Web page, and use theServicePath andServiceMethod properties to specify the Web method that returns the item list. Then for each text box that you want to add the auto-completion behavior to,add anAutoCompleteProperties server control to theControls collection of the AutoCompleteExtender. The AutoCompleteProperities component enables you to specify the target control the extender should link to and to override the ServicePath and ServiceMode setting for individual controls.

So am I to understand that I add an AutoCompleteProperties instance to the AutoCompleteExtender.Controls collection?

When I try that I get this message in VS2005:

Value of type 'Microsoft.Web.UI.Controls.AutoCompleteProperties' cannot be converted to 'System.Web.UI.Control'.

hello.

well, you just need to add them as child elements of the control since it'll automaticatically parse those elements and add them to the targetproperties property.


...forgive me for my ignorance, but how exactly is that accomplished? Can you provide a brief example?

Thanks! :)


Dim autoComplete as New AutoCompleteExtender()
Dim props as New AutoCompleteProperties()
props.TargetControlID = "txt_suggestion"
props.ServiceURL = "/WebServices/Service.asmx"
props.ServiceMethod = "GetSuggestions"
autoComplete.TargetProperties.Add(props)
Page.Controls.add(autoComplete)

Hey that worked! Thanks!

I didn't know about the AutoCompleteExtender.TargetProperties.Add method, I was trying to add it to the controls collection of the AutoCompleteExtender.

FYI - The ServiceURL property in the above code is supposed to be ServicePath (at least in the July 06 release).

Programatically adding UpdatePanel?

I want to programatically add an updatepanel control on a button click.

I tried adding a reference to Microsoft.Web.Atlas.dll and then creatinga System.Web.UI.UpdatePanel control but the app does not compile - withnamespace does not exist error.

Does anyone know what I should be doing or if this is possible at all?

Thanks !

you would need to import the following

Imports Microsoft.Web.UI

Then, you can create an instance of the UpdatePanel like this:

Dim UP As New UpdatePanel

Hope this works for you.


Thanks it works ... I was using System.Web.UI which was the problem
Now that I have this I'm trying to add content to the updatepanel.

I can set most of the properties, add triggers without problems.

However when I try to execute it - it gives an error saying "A ContentTemplate must be specified".

Whats the easist way to do this. I haven't found any documentation on programatically adding a contenttemplate.

Any help would be greatly appreciated!
I'm looking for the same thing myself and haven't found any answers.
You'll need to create a class that implements ITemplate, create an instance of that and set the content template property to that instance.

try this

protected

overridevoid OnInit(EventArgs e)

{

updatePanel.ContentTemplate =

newCompiledTemplateBuilder

(

newBuildTemplateMethod(CreateAtlasUpdateContent));

}

public

void CreateAtlasUpdateContent(Control container)

{

container.Controls.Add(yourcontrol);

}


dont know if this will come in handy with anyone but what i did to get around the template error was

have a class with the following:

PublicClass AjaxControl :Inherits Microsoft.Web.UI.UpdatePanelProtectedOverridesSub OnInit(ByVal eAs System.EventArgs)Me.ContentTemplate =New TemplateBuilderMyBase.OnInit(e)EndSubEndClass

Then whenever i needed to create a control that was surrounded by the update panel i would inherit this class and could just then put me.controls.add() as usual.

probs useless to you all, but works for me :)


Even if you got past the coding issues, you still can't add an UpdatePanel once InitComplete has fired (which is pretty early in the lifecycle) so you're not going to be able to accomplish what you set out to do, which I think was to add an UpdatePanel dynamically.

HTH

Has anyone been able to dynamically add an UpdatePanel to a page?

I got so far - and then I got the error:

"The UpdatePanel 'panel1'was not present when the page's InitComplete event was raised."

Is there any way around this?

Wade.

Programatically collapse a panel

With Beta 2, does anyone know how to programatically collapse a panel controlled by the CollapsiblePanel extender? When I click a button, I want to collapse a panel and change the ImageControl(image) to a different image...Here's another thread that addresses the same issue and has a code sample, although I don't know if it's right since it doesn't actually work for me.

http://forums.asp.net/thread/1457087.aspx


I think this iswork item 5688.

this works for me

Me.CollapsiblePanelExtender1.ExpandControlID = "Panel3"

Me.CollapsiblePanelExtender1.Collapsed = False