Multiview control

Hi.

I used three radio button to switch among multiview control, how may I include AJAX into radio button control, so it doesn't post back when I try to change view ? I tried, it doesn't seem to work.

thanks for the help.

Hi,

You can avoid the postback by wrapping them in an UpdatePanel. For instance:

<%@. 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"> protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e) { MultiView1.ActiveViewIndex = RadioButtonList1.SelectedIndex; }</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:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"> <asp:ListItem>1</asp:ListItem> <asp:ListItem>2</asp:ListItem> <asp:ListItem>3</asp:ListItem> </asp:RadioButtonList> <asp:MultiView ID="MultiView1" runat="server"> <asp:View ID="View1" runat="server"> View1</asp:View> <asp:View ID="View2" runat="server"> View2</asp:View> <asp:View ID="View3" runat="server"> View3</asp:View> </asp:MultiView> </ContentTemplate> </asp:UpdatePanel> </form></body></html>

Hope this helps.

thanks.

But, I don't understand, in the radio button, it says AutoPostBack=true. I did exactl the way you did except put radio button in the updatepanel, what is the magic for this updatepanel ?

thanks so much for the help.

That's weird. Can you show me your page?

Hi. this is my code.

<divstyle="border-bottom:dotted; border: 1px;">

<asp:MultiViewid="MultiView1"runat="server"ActiveViewIndex="0">

<asp:ViewID="View1"runat="server">

<asp:LabelID="lblMsg"runat="server"Width="273px"Font-Bold="True"ForeColor="Red"></asp:Label><br/>

<asp:TextBoxID="txtAddress"runat="server"></asp:TextBox>

<asp:LabelID="Label2"runat="server"Text="Ex. 101 Monroe St"Width="111px"></asp:Label><br/>

<asp:TextBoxID="txtZip"runat="server"></asp:TextBox>

<asp:LabelID="Label3"runat="server"Text="Ex. 20850"Width="106px"></asp:Label><br/>

<asp:TextBoxID="txtMiles"runat="server">2</asp:TextBox>

<asp:LabelID="Label4"runat="server"Text="Within Miles"Width="107px"></asp:Label><br/>

<asp:ButtonID="btnAddress"runat="server"Text="Find"OnClick="btnAddress_Click"/>

</asp:View>

<asp:ViewID="View2"runat="server">

<asp:DropDownListID="lstCities"runat="server"></asp:DropDownList><br/>

<asp:ButtonID="btnCities"runat="server"Text="Find"OnClick="btnCities_Click"/>

</asp:View>

<asp:ViewID="View3"runat="server">

<asp:DropDownListID="lstZipCode"runat="server">

</asp:DropDownList>

<asp:ButtonID="btnZip"runat="server"Text="Find"OnClick="btnZip_Click"/>

</asp:View>

</asp:MultiView>

</div>

The code you posted isn't sufficient to reproduce the issue. Can you show me more?

<divstyle="border-bottom:dotted; border: 1px;">

<asp:RadioButtonID="RadioButton1"runat="server"Text="Address"GroupName="grpSelection"AutoPostBack="true"OnCheckedChanged="RadioButton1_CheckedChanged"Font-Bold="True"ForeColor="Blue"Width="80px"checked="true"/>

<asp:RadioButtonID="RadioButton2"runat="server"Text="Cities"GroupName="grpSelection"OnCheckedChanged="RadioButton2_CheckedChanged"AutoPostBack="True"Font-Bold="True"ForeColor="Blue"Width="67px"/>

<asp:RadioButtonID="RadioButton3"runat="server"Text="Zip Code"GroupName="grpSelection"OnCheckedChanged="RadioButton3_CheckedChanged"AutoPostBack="True"Font-Bold="True"ForeColor="Blue"Width="84px"/>

</div>

<scriptlanguage="c#"runat="server">

protectedvoid RadioButton1_CheckedChanged(object sender,EventArgs e)

{

MultiView1.SetActiveView(View1);

}

protectedvoid RadioButton2_CheckedChanged(object sender,EventArgs e)

{

MultiView1.SetActiveView(View2);

}

protectedvoid RadioButton3_CheckedChanged(object sender,EventArgs e)

{

MultiView1.SetActiveView(View3);

}

</script>

thanks.

Here is the page that I made with the codes your provided, it worked fine.

<%@. Page Language="C#" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void RadioButton1_CheckedChanged(object sender, EventArgs e) { MultiView1.SetActiveView(View1); } protected void RadioButton2_CheckedChanged(object sender, EventArgs e) { MultiView1.SetActiveView(View2); } protected void RadioButton3_CheckedChanged(object sender, EventArgs e) { MultiView1.SetActiveView(View3); } protected void btnAddress_Click(object sender, EventArgs e) { } protected void btnCities_Click(object sender, EventArgs e) { } protected void btnZip_Click(object sender, EventArgs e) { }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:UpdatePanel runat="server" ID="up1"> <ContentTemplate> <div style="border-bottom:dotted; border: 1px;"><asp:MultiView id="MultiView1" runat="server" ActiveViewIndex="0"><asp:View ID="View1" runat="server"><asp:Label ID="lblMsg" runat="server" Width="273px" Font-Bold="True" ForeColor="Red"></asp:Label><br /><asp:TextBox ID="txtAddress" runat="server"></asp:TextBox><asp:Label ID="Label2" runat="server" Text="Ex. 101 Monroe St" Width="111px"></asp:Label><br /><asp:TextBox ID="txtZip" runat="server"></asp:TextBox><asp:Label ID="Label3" runat="server" Text="Ex. 20850" Width="106px"></asp:Label><br /><asp:TextBox ID="txtMiles" runat="server">2</asp:TextBox><asp:Label ID="Label4" runat="server" Text="Within Miles" Width="107px"></asp:Label><br /><asp:Button ID="btnAddress" runat="server" Text="Find" OnClick="btnAddress_Click" /></asp:View><asp:View ID="View2" runat="server"><asp:DropDownList ID="lstCities" runat="server"></asp:DropDownList><br /><asp:Button ID="btnCities" runat="server" Text="Find" OnClick="btnCities_Click" /></asp:View><asp:View ID="View3" runat="server"> <asp:DropDownList ID="lstZipCode" runat="server"></asp:DropDownList>     <asp:Button ID="btnZip" runat="server" Text="Find" OnClick="btnZip_Click" /></asp:View></asp:MultiView></div><div style="border-bottom:dotted; border: 1px;"> <asp:RadioButton ID="RadioButton1" runat="server" Text="Address" GroupName="grpSelection" AutoPostBack="true" OnCheckedChanged="RadioButton1_CheckedChanged" Font-Bold="True" ForeColor="Blue" Width="80px" checked="true" />    <asp:RadioButton ID="RadioButton2" runat="server" Text="Cities" GroupName="grpSelection" OnCheckedChanged="RadioButton2_CheckedChanged" AutoPostBack="True" Font-Bold="True" ForeColor="Blue" Width="67px" />      <asp:RadioButton ID="RadioButton3" runat="server" Text="Zip Code" GroupName="grpSelection" OnCheckedChanged="RadioButton3_CheckedChanged" AutoPostBack="True" Font-Bold="True" ForeColor="Blue" Width="84px" /></div> </ContentTemplate> </asp:UpdatePanel> </form></body></html>

Another tip is you need to make sure ajax extension is successfully installed on your machine, andnecessary entries have been added into your web.config.

thanks. let me try it out !

Hi.

just tried it. I don't have the file for AjaxControlToolkit, where may I find the file ?

thanks.

Hi.

In order to use UpdatePanel, I have to install AjaxControltoolkit, right ?

thanks.

shukuo:

Hi.

just tried it. I don't have the file for AjaxControlToolkit, where may I find the file ?

thanks.

http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=4923

shukuo:

Hi.

In order to use UpdatePanel, I have to install AjaxControltoolkit, right ?

thanks.

No, Ajax Extension is enough.

MultiView containing an UpdatePanel: cant switch ActiveViewIndex?

I have a button control inside of an UpdatePanel. This UpdatePanel sits inside of a MultiView control (which is NOT inside another UpdatePanel, just a regular multiview). The function that is fired from the button click is supposed to change the ActiveViewIndex, but it does not. It fires off other actions inside the function, but does not change the multiview.

Is there something I need to do to get this to work? Here is roughly what I'm talking about. In this case it's set to ActiveViewIndex = 0. I need the button to change it to index 1. Thanks!!

<asp:MultiView runat="server" ID="someID">

<asp:View runat="server"

<asp:UpdatePanel runat="server">

<contenttemplate>

<asp:Button runat="server" onclick="MyFunction" Text="CLICK ME" />

</contenttemplate>

<asp:UpdatePanel>

</asp:View>

<asp:View runat="server">

SOME LITERAL HTML CONTENT

</asp:View>
</asp:MultiView

hi rpeters,

what are you using for your MyFunction?

should be something like this, right?

multiviewAppSec.SetActiveView((

View)this.multiviewAppSec.FindControl("ViewName")));

I was simply using...

myMultiView.ActiveViewIndex = 1;

pixelsyndicate:

hi rpeters,

what are you using for your MyFunction?

should be something like this, right?

multiviewAppSec.SetActiveView((View)this.multiviewAppSec.FindControl("ViewName")));

Tried using the approach as well. No difference... :(

Anyone??

I am pretty sure I tried that before, and didn't get it to work. the definition of that property says its Sets or Gets... so it should work. Try using the

SetActiveView(view) method to make that change. You will have to pass it a reference to the View you want however. Using the findcontrol() method example I used should help you to do that. Respond back on whether it worked or not. ;)

pixelsyndicate:

I am pretty sure I tried that before, and didn't get it to work. the definition of that property says its Sets or Gets... so it should work. Try using the

SetActiveView(view) method to make that change. You will have to pass it a reference to the View you want however. Using the findcontrol() method example I used should help you to do that. Respond back on whether it worked or not. ;)

Tried it...no luck. Same result as by setting the property.

Anyone else? There has to be a way!

you stated you were using 1 as the view index to display. isn't the view you want to show actually the first view? that would mean you need to display view index ZERO (0). indexes are zero-based, meaning its it this order...

0
1
2
3
4
5
6
...

pixelsyndicate:

you stated you were using 1 as the view index to display. isn't the view you want to show actually the first view? that would mean you need to display view index ZERO (0). indexes are zero-based, meaning its it this order...

0
1
2
3
4
5
6
...

I know that they are zero-based indices. I also am using the correct view index for my application. The problem is that it seems that because it is being called from a routine that is inside of an update panel, it is trying to make the change inside that panel, rather than changing the entire page to reflect the new panel.

anyone else?? thanks.

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 ?