Multiview and Javascript in a view.

Hi, I am using a Multiview control in an update panel, and I need to output some dynamic Javascript inside a View control. Please see below.

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Height="478px" Width="557px">
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">


</asp:View>
<asp:View ID="View2" runat="server">

<script type="text/Javascript">//<![CDATA[
function aa(){alert('<%= DateTime.Now %>');}
//]]></script>
<input type='button' onclick='aa()' />

</asp:View>
</asp:MultiView>
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" /></asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

--BEHIND--

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button2_Click(object sender, EventArgs e)
{
MultiView1.SetActiveView(View2);
}
}

The problem is, that when you click the button that runs the function "aa", an "Object expected" error is thrown. Presumably because the newly outputted script has not been 'registered' with the browser (I checked with Nikhils Web Dev Helper and the script is present).

As I say, the script is dynamic, so I can't move it to an external file, nor would it be good to have to write the script outside of the Multiview (since it's dependent on the controls in View).

Any help or tips greatly welcome - thanks,

Jim

Read this, will give you solution.

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

WS

Thanks, that did help with my example -however...

In reality my UpdatePanel and Multiview are inside a UserControl. So I dont have access to ScriptManager from the UserControl.

I looked at ScriptManagerProxy, but that doesn't have the RegisterClientScriptBlock method :(

Any idea how I can do this from within a UserControl?

Many thanks

Jim

Is this your code behind from your UserControl?

protected void Button2_Click(object sender, EventArgs e)
{
MultiView1.SetActiveView(View2);
}

??

You can add

protected void Button2_Click(object sender, EventArgs e)
{
MultiView1.SetActiveView(View2);
System.Web.UI.ScriptManager.RegisterClientScriptBlock ...
}

It works on my end ... should be the same on yours.

WS

AHH! RegisterClientScriptBlock is static - sorry I assumed it wasn't.

Yes that works great, thanks very much - you saved me some awkward workarounds.

Jim

Can I open up this topic, and add a little twist to it?

I have u panel inside a multiview, this panel has a usercontrol which shows a HTML page from a database (response.binarywrite because it's all blobs) I hav e NO control of the javascript that is used in the HTML files that are loaded from the database.

One of the HTML files that is loaded, contains javascript to have a menu with hoverfunctions enabled on the html-page:

if (window.attachEvent) window.attachEvent("onload", sfHover);

When I switch the multiview.activeindex, back and forth to the panel with the usercontrol, the hover functions do not work anymore...anyway, in IE they don't. In Firefox they do work.

The RegisterClientScriptBlock is no option, because I am not aware of the javascript functions that are used in the database-files.

I hope my explanation is clear...

Rob

MultiView control, View control and nested UpdatePanels

I have an application that is using a MultiView control to simulate "tabs". Within that MultiView control, I have a number of View controls with nested UpdatePanels and they work just fine. However, whenever I try to encase the MultiView control inside an UpdatePanel, paging between the View controls works fine with no postbacks, but none of the UpdatePanels in any of the View controls works after that.

Has anyone ever run into this or provide any suggestions? Code samples available if necessary...

Thanks!

hello.

yes, seeing a small sample would help. btw, i must say that i still don't like the idea of nesting updatepanels.

Multiview inside updatepanel, updatepanel inside View?

Has anyone gotten this to work? I have a multiview inside an updatepanel, and I can switch tabs without a screen repaint. But then, in one of the views I tried to put an updatepanel to update something in that view and it started freaking out. (probably for similar reasons to the freakout when I tried to put an updatepanel inside the itemtemplate of a repeater)

For example, I want a view to enter billing information, but then I want to dynamically hide the states dropdown if you pick a country other than US, CA or AU. At first it told me that my trigger had to reference a valid control, so I set it to the name of my country dropdownlist. It accepted that but then it gave me an object expected javascript error. Quite frankly, my brain is about to explode from trying to wrap it around this stuff.

So, I'm going to skip the idea of hiding the state DDL and just have a default option "select if appropriate" and move on with my life. But consider this an FYI to you boys (and girls) on the atlas development team.

hello.

can you give more details about your scenario? it looks like you ended with an updatepanel inside another updatepanel...

An updatepanel inside a view inside a multiview inside another updatepanel. So yes, basically, an updatepanel inside an updatepanel. From what I understand you can nest updatepanels no? Or does that only work when you don't have something in the way like my view/multiview

hello again,

to be honest, i haven't tried...well, what i really don't understand is why you're dont' simply update the whole view...btw, can you build a small sample that reproduces that behavior and post it here? it'll have to be a simple page so that we can copy/paste it...

I built a simple page where the view has a button that changes a label, and that worked fine, but my dropdown does not: I want the states DDL to disappear when I select france. Keep in mind that I'm building a submission form and I don't want to lose input in any of the views (same as if I was using the wizard control but without all the overhead)

<%@. Page Language="VB" AutoEventWireup="false" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"
Sub Button1_Click(s as Object, e as EventArgs)
MultiView1.SetActiveView(stepone)
End Sub

Sub Button2_Click(s as Object, e as EventArgs)
MultiView1.SetActiveView(StepTwo)
End Sub
Sub checkcountriesddl(ByVal s As Object, ByVal e As EventArgs)
If countriesddl.SelectedItem.Value = "CA" Or countriesddl.SelectedItem.Value = "US" Then
statesddl.Visible = True
Else
statesddl.Visible = False
End If

End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering=true />
<table><tr><td>
<asp:button ID="button1" runat=server Text="Step 1 Tab" onclick=Button1_click />
</td><td>
<asp:button ID="button2" runat=server Text="Step 2 Tab" onclick=Button2_click />
</td></tr></table>
<atlas:UpdatePanel runat=server ID=mvup>
<Triggers>
<atlas:ControlEventTrigger ControlID=button1 EventName="Click" />
<atlas:ControlEventTrigger ControlID=button2 EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:MultiView id="MultiView1" runat="server" ActiveViewIndex=0>

<asp:View id="stepone" runat="server" >
Hi there
</asp:View>
<asp:View ID="steptwo" runat="server">
<asp:Label ID="tobeupdated" runat=server Text="Welcome to Step Two" /><br /><br />
<asp:PlaceHolder ID="statesplaceholder" runat=server>
<asp:DropDownList ID="statesddl" runat=server>
<asp:ListItem Value="AK" Text="Alaska"></asp:ListItem>
<asp:ListItem Value="AR" Text="Arizona"></asp:ListItem>
</asp:DropDownList></asp:PlaceHolder><br /><br />
<asp:dropdownlist OnSelectedIndexChanged="checkcountriesddl" runat="server" id="countriesddl">
<asp:ListItem Value="US" Text="United States"></asp:ListItem>
<asp:ListItem Value="CA" Text="Canada"></asp:ListItem>
<asp:ListItem Value="FR" Text="France"></asp:ListItem>
</asp:dropdownlist>

</asp:View></asp:MultiView>
</ContentTemplate></atlas:UpdatePanel>

</form>
</body>
</html
I tried setting autopostback=true on the dropdownlist. No effect.

I tried adding a trigger to the multiview triggers:

<atlas:ControlEventTrigger ControlID=countriesddl EventName="SelectedIndexChanged" />

So then I tried another update panel (replacing the purple section above)

<atlas:updatepanel ID="statesup" runat=server>
<Triggers>
<atlas:ControlEventTrigger ControlID="countriesddl" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:PlaceHolder ID="statesplaceholder" runat=server>
<asp:DropDownList ID="statesddl" runat=server>
<asp:ListItem Value="AK" Text="Alaska"></asp:ListItem>
<asp:ListItem Value="AR" Text="Arizona"></asp:ListItem>
</asp:DropDownList></asp:PlaceHolder>
</ContentTemplate></atlas:updatepanel>
<br /><br />
<asp:dropdownlist AutoPostBack=true OnSelectedIndexChanged="checkcountriesddl" runat="server" id="countriesddl">
<asp:ListItem Value="US" Text="United States"></asp:ListItem>
<asp:ListItem Value="CA" Text="Canada"></asp:ListItem>
<asp:ListItem Value="FR" Text="France"></asp:ListItem>
</asp:dropdownlist>

Interesting that it doesn't work, but then if you click one of the buttons that controls the multiview, that it then fires the SelectedIndexChanged

Actually, I meant to hide the placeholder, not the DDL, but what I did is pretty much the same. sorry for the confusion
Hi !
I'm having the same problem while trying to have an atlas-updatable GridView inside an atlas-changeable Multiview. Basically it's the same thing : inclusion of updatepanels... no problem with the multiview alone, no problem if my gridview is outside, but when I put one in the other my gridview can't be updated. If I suppress the grid's updatepanel, any click on it sends me back to the main view of the multiview...

I'm not sure you managed to solve yours, did you ?

MultiView, User Controls, PopupControlExtender

I have a webpage containing a MultiView. I put a user control in every view of the MultiView. From each user control, I use the ModalPopupExtender to open another user control, which contains fields for entering dates. I then use the calendar control and PopupControlExtender to select date.

It works fine when only one user control in the modal popup window has the calendar control and the PopupControlExtender. If more than one user controls opened with the modal popup extender have the calendar control and the PopupControlExtender, none of them works. In the latter case, I can still popup the calendar, but it doesn't allow me to select date, and it doesn't close. The calendar would dispear if I click outside the calendar area. But then I can't close the window containing the user control opened with the modal popup extender.

Anyone has similiar experience?

Please try your scenario with the recently available61020 release of the Toolkit (and ASP.NET AJAX Beta 1). If the problem persists, then please reply with acomplete, self-contained sample page that demonstrates the problem. Thank you!

Multiview, updatepanel, animation extender....bad combo?

I got a multiview inside of an updatepanel. The multiview has a view which has an updatepanel. There's an animation extender on the inner updatepanel. The extender has an animation of fadeout on onloading and fadein on onloaded.

When I run it, when the inner updatepanel is to update, I see it fadeout ever so slightly in IE and not at all in firefox. The updated data doesn't fade in, it just shows up. I set the duration of the fadeout/in to high values to test. didn't help. The change just shows without animation.

Is there a way to do this?

Did some more fiddling. It seems putting an updatepanel inside an update panel removes the animation.

Just had to remove the children as triggers and always update and it works.

My gridview is not update

Hi,

I have an update panel in my page which contain a grid view.

I need to refresh my page periodically. I am using Timer for that. Here is my code

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

<ContentTemplate>

<asp:TimerID="Timer1"runat="server"Interval="10000">

</asp:Timer>

...................

<asp:GridViewID="GridView1"runat="server"SkinId="SampleGridView"CssSelectorClass="PrettyGridView"

DataKeyNames="ID"DataSourceID="SqlDataSource2"OnSelectedIndexChanged="GridView1_SelectedIndexChanged"

OnRowCommand="VerDiagramRed"Width="666px"OnDataBound="GridView1_DataBound"AutoGenerateColumns="False">

<Columns>

<asp:CommandFieldShowSelectButton="True"SelectText="Routers"/>

<asp:BoundFieldDataField="ID"HeaderText="ID"InsertVisible="False"ReadOnly="True"

SortExpression="ID"/>

<asp:BoundFieldDataField="Nombre"HeaderText="Nombre"SortExpression="Nombre"/>

<asp:BoundFieldDataField="Lectura"HeaderText="Lectura"SortExpression="Lectura"/>

<asp:BoundFieldDataField="Errores"HeaderText="Errores"SortExpression="Errores"/>

<asp:BoundFieldDataField="Estado"HeaderText="Estado"SortExpression="Estado"/>

<asp:ButtonFieldButtonType="Image"CommandName="diagram"HeaderText="Plano"

Text="Diagrama"ImageUrl="~/images/diagrama1.jpg"/>

</Columns>

</asp:GridView>

</ContentTemplate></asp:UpdatePanel>

DataGrid is not refreshed. What am doing wrong?

Thank you

Hi!

Follow these steps and it should work:

- Take the Timer out of the UpdatePanel.
- Set the UpdatePanel's properties UpdateMode="Conditional" and ChildrenAsTriggers="false"
- Add a trigger to the UpdatePanel's triggers collection:

<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="OnTick" />
</Triggers>

Now, as you are doing something on OnSelectedIndexChanged and OnRowCommand, are you sure that you need the Timer at all? Is not enough to refresh the GridView on these events?

Anyway, don't forget to add triggers for each event you are handling.

Hope this helps,

You can use Timer Control & you can trigger it's OnTick event..

So that it will periodically refreshes the GridView

Thank you very much. I did what you said and it is working perfectly.

I need to do refresh periodically because the users needs to monitor the information in the gridview.

Need Help with Ajax Examples

Hi..

can anybody provide a working example of using the dropdownlist and grid view control and saving the data with a button using AJAX..

please help..

The page requirements:
1) Table/Grid displays a list of states (U.S. states) with a column for the state name and a column that contains a dropdown list of the state's cities.
2) Upon selecting a city, the page will display the city name (and perhaps futher lookup some information specific to the city).

The basic ASP.NET flow here is (using 2.0 here, but works similarly in 1.1 using DataGrid):
1) Create a GridView with a bound column for state and a template column for the DropDownList
2) Create a label to display the city name upon selecting it in the DropDownList.
3) Bind the GridView to an array of state objects (could be bound to many other things as well, but keeping it simple for this example). State contains properties for Name and for Cities.
4) Hookup RowCreated event on the GridView so that we can populate the cities into the particular row's DropDownList.
5) Add postback event for getting the selected city and populating the label with it.

Here's what the aspx code looks like:

<asp:GridView ID="gvStates" AutoGenerateColumns="false"
runat="server" OnRowCreated="gvStates_RowCreated">
<Columns>
<asp:BoundField HeaderText="State" DataField="Name" />
<asp:TemplateField HeaderText="Cities">
<ItemTemplate>
<asp:DropDownList ID="ddlCities"
AutoPostBack="true" runat="server"
OnSelectedIndexChanged="ddlCities_SelectedIndexChanged">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView
<asp:Label ID="lblCity" runat="server" Text="Label">
</asp:Label
And here's the code behind:

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Create states array and bind it to Grid
ArrayList states = new ArrayList();

string[] cities =
new string[] { "Portland", "Salem", "Eugene" };
State state = new State("OR", cities);
states.Add(state);
cities =
new string[] { "Seattle", "Tacoma", "Olympia" };
state = new State("WA", cities);
states.Add(state);

this.gvStates.DataSource = states;
this.gvStates.DataBind();
}
}

protected void gvStates_RowCreated(object sender,
GridViewRowEventArgs e)
{
if (!IsPostBack)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// Bind drop down to cities
DropDownList ddl =
(DropDownList)e.Row.FindControl("ddlCities");
ddl.DataSource = ((State)e.Row.DataItem).Cities;
ddl.DataBind();
}
}
}

protected void ddlCities_SelectedIndexChanged(object sender,
EventArgs e)
{
this.lblCity.Text = ((DropDownList)sender).SelectedValue;
}

In Ajax framework,you can place them in a asp:UpdatePanel and specify asynchronous postback in the triggers of the asp:UpdatePanel.

Wish this can help you.

Need help with TabContainer in DotNetNuke

When I add an AjaxControlToolkit TabContainer to a module, it does not display properly in IE6 or IE7, but it does in Firefox. You can view the problem here:

http://www.websmithing.com/portal/Tabs/tabid/64/Default.aspx

Here is the code:

<%@dotnet.itags.org. Control Language="C#" AutoEventWireup="true" CodeFile="Tabs.ascx.cs" Inherits="DesktopModules_TabTest_Tabs" %>
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1"
 Height="200px" Width="200px">
 <cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
 </cc1:TabPanel>
 <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
 </cc1:TabPanel>
</cc1:TabContainer>

using System;
using DotNetNuke;
using DotNetNuke.Entities.Modules;
public partialclass DesktopModules_TabTest_Tabs : PortalModuleBase
{
protected void Page_Load(object sender, EventArgs e)
 {
if (DotNetNuke.Framework.AJAX.IsInstalled())
 {
 DotNetNuke.Framework.AJAX.RegisterScriptManager();
 }
 }
}

I built a very simple user control and put it onto an aspx page and had no problems with viewing it in IE. You can see it here:

http://www.websmithing.com/portal/TabPanel.aspx

So it somehow seems to be a problem related to DotNetNuke...

thanks

Nick

ps. I have posted the question in the DotNetNuke Forums

I want to thank David Anson of Microsoft for finding the solution to this problem. Here was our thread:

Thank you David, that was exactly the problem. The TabContainer isdisplaying properly now. My menus are a little bit off in DotNetNuke,but I'm going to work on fixing the skin rather than going back to theother doctype.

For those who want to know, here is where the fix needs tohappen. In Default.aspx.vb at about line 259, I changed theDocTypeValue from:

'Dim DocTypeValue As String = "<!DOCTYPE HTML PUBLIC ""-//W3C//DTD HTML 4.0 Transitional//EN"">"

to:

Dim DocTypeValueAs String ="<!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0 Transitional//EN"" "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"">"

once again, thank you!
Nick

- Hide quoted text -

On Dec 4, 2007 10:11 PM, David Anson wrote:

The DOCTYPEs are subtly different and I'm wondering if theproblematic one is leaving the browser in quirks mode (according to myunderstanding of the last paragraph ofhttp://msdn2.microsoft.com/en-us/library/ms535242.aspx).If so, that could be the problem as we don't support quirks mode with theToolkit. Maybe try switching to the same DOCTYPE for both to see if that helps?

I'm having this problem with DNN 5.5.1 but this fix doesn't apply b/c when I view source on my browser, it already has the appropriate doctype declaration.  The .vb code is diferent in this version anyway.

I'm having this problem with DNN 5.5.1 but this fix doesn't apply b/c when I view source on my browser, it already has the appropriate doctype declaration.  The .vb code is diferent in this version anyway.

I'm having this problem with DNN 5.5.1 but this fix doesn't apply b/c when I view source on my browser, it already has the appropriate doctype declaration.  The .vb code is diferent in this version anyway.

I'm having this problem with DNN 5.5.1 but this fix doesn't apply b/c when I view source on my browser, it already has the appropriate doctype declaration.  The .vb code is diferent in this version anyway.

I'm having this problem with DNN 5.5.1 but this fix doesn't apply b/c when I view source on my browser, it already has the appropriate doctype declaration.  The .vb code is diferent in this version anyway.