Multiview and HTML div

I have a multiview with 3 steps. It works fine. Now, our web designer has changed the design and wants to add am HTML code on top of the page so the user can tab thru that to get to the correct "view"/screen...


I dont know how I can hook up the HTML to the multiview. Do I need to remove the multiview? not sure what I need to do...

So, in code below, the first view's ID is "v1x", HTML div id is "stepNumber1". I have "href = #" which might not be right...so how can connect v1x to stepNumber1??

Code below..any ideas?

<asp:Content ID="Content3" ContentPlaceHolderID="contentMAINplaceholder" Runat="Server">

 <div class="pageSteps">
           <div id="stepNumber1" class="stepNumber completed"><a href="#"><strong>Step 1</strong><br />
             Personal Info</a></div>
           <div id="stepNumber2" class="stepNumber completed"><a href="#"><strong>Step 2</strong><br />
             Work Experience</a></div>
           <div id="stepNumber3" class="stepNumber selected"><strong>Step 3</strong><br />
             Education</div>
         <div class="clear"></div></div>

<asp:MultiView runat="server"   OnActiveViewChanged="mvApplication_OnActiveViewChanged" ActiveViewIndex="0" ID="mvApplication" >
             
      <asp:View runat="server"  ID="v1x"> <!-- personal -->
          <fieldset>
           <div class="floatWRAPPER" >
            <div class="contentCOLUMN">
              <ul>
                <li>
                  <asp:Label ID="lblRel" class="LABEL" runat="server" Visible="true" AssociatedControlID="txtFirst_name">*First Name:</asp:Label>
                  <asp:TextBox  runat="server" MaxLength="50" ID="txtFirst_name" CssClass="formFIELD" TabIndex ="1"></asp:TextBox>
                   <asp:RequiredFieldValidator Display="Dynamic" ID="RequiredFieldValidator1" ControlToValidate="txtFirst_Name" ErrorMessage="First Name" Text="*" runat="server"/>
                    
                  </li>
       .....

Open in new window

LVL 8
CamilliaAsked:
Who is Participating?
 
Tom BeckConnect With a Mentor Commented:
Sample using divs and javascript for a three step form.
<!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>
<title></title>
<script language="javascript" type="text/javascript">
function showHide(divNum) {
    for (i=0; i<3; i++) {
        var curDiv = document.getElementById('div_' + i);
        curDiv.style.display = 'none';
        if (i == divNum){
            document.getElementById('link_' + i).className = 'linkSelected';
        }else if (i < divNum) {
            document.getElementById('link_' + i).className = 'linkCompleted';
        }else{
            document.getElementById('link_' + i).className = 'linkUnselected';
        }
    }
    document.getElementById('div_' + divNum).style.display = 'block';
}
</script>
<style type="text/css">
.stepNumber {text-align:center;float:left;width:198px;background-color:#eee;padding:10px 0;border:solid 1px #fff}
.linkCompleted {text-decoration:none;color:#666;}
.linkSelected {text-decoration:none;color:#33f;background-color:#fff;}
.linkUnselected {text-decoration:none;color:#00f;}
#div_0 {width:570px;height:400px;background-color:#def;padding:15px}
#div_1 {width:570px;height:400px;background-color:#fed;padding:15px}
#div_2 {width:570px;height:400px;background-color:#edf;padding:15px}
</style>
</head>
<body onload="showHide(0);">
<div class="pageSteps">
    <div id="stepNumber1" class="stepNumber"><a id="link_0" href="#" onclick="showHide(0)"><strong>Step 1</strong><br />
             Personal Info</a></div>
    <div id="stepNumber2" class="stepNumber"><a id="link_1" href="#" onclick="showHide(1)"><strong>Step 2</strong><br />
             Work Experience</a></div>
    <div id="stepNumber3" class="stepNumber"><a id="link_2" href="#" onclick="showHide(2)"><strong>Step 3</strong><br />
             Education</a></div>
</div>
<div style="clear:both"></div>
<div id="panels">    
    <div id="div_0">
        <label for="textBox_1">Name</label>
        <input type="text" id="textBox_1" />
    </div>
    <div id="div_1">
        <label for="textBox_2">Work Experience</label>
        <input type="text" id="textBox_2" />    
    </div>
    <div id="div_2">
        <label for="textBox_3">Education</label>
        <input type="text" id="textBox_3" />
    </div>
</div>
</body>

</html>

Open in new window

0
 
Tom BeckCommented:
You could add a menu that gives the choices, Step 1, Step 2, Step 3, etc.

<asp:Menu
        ID="Menu1"
        Width="168px"
        runat="server"
        Orientation="Horizontal"
        StaticEnableDefaultPopOutImage="False"
        OnMenuItemClick="Menu1_MenuItemClick">
    <Items>
        <asp:MenuItem ImageUrl="~/step1.gif"
                      Text=" " Value="0"></asp:MenuItem>
        <asp:MenuItem ImageUrl="~/step2.gif"
                      Text=" " Value="1"></asp:MenuItem>
        <asp:MenuItem ImageUrl="~/step3.gif"
                      Text=" " Value="2"></asp:MenuItem>
    </Items>
</asp:Menu>

Set initial view on MultiView to ActiveViewIndex="0", then in code behind handle the menu item click event and switch views.

protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
        {
            this.mvApplication.ActiveViewIndex = Int32.Parse(e.Item.Value);
        }
0
 
Paul JacksonSoftware EngineerCommented:
Put the main div "pageSteps" outside of the Multiview, then put each div for the views outside of the appropriate view.

<asp:Content ID="Content3" ContentPlaceHolderID="contentMAINplaceholder" Runat="Server"> 
 <div class="pageSteps"> 
<asp:MultiView runat="server"   OnActiveViewChanged="mvApplication_OnActiveViewChanged" ActiveViewIndex="0" ID="mvApplication" > 
           <div id="stepNumber1" class="stepNumber completed"><a href="#"><strong>Step 1</strong><br /> 
             Personal Info</a>              
      <asp:View runat="server"  ID="v1x"> <!-- personal --> 
          <fieldset> 
           <div class="floatWRAPPER" > 
            <div class="contentCOLUMN"> 
              <ul> 
                <li> 
                  <asp:Label ID="lblRel" class="LABEL" runat="server" Visible="true" AssociatedControlID="txtFirst_name">*First Name:</asp:Label> 
                  <asp:TextBox  runat="server" MaxLength="50" ID="txtFirst_name" CssClass="formFIELD" TabIndex ="1"></asp:TextBox> 
                   <asp:RequiredFieldValidator Display="Dynamic" ID="RequiredFieldValidator1" ControlToValidate="txtFirst_Name" ErrorMessage="First Name" Text="*" runat="server"/> 
                     
                  </li> 
       .....

</asp:View>
</div>
</asp:MultiView>
</div>

Open in new window

0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
CamilliaAuthor Commented:
I will try jacko72's method as I have to keep the design the same...
0
 
Tom BeckCommented:
Divs cannot be inside a multiview.

>>I have to keep the design the same.

Do you mean the styling. You can add styling to the menu. It's rendered as a table.

This is a little closer to your design:

<asp:Menu
        ID="Menu1"
        Width="168px"
        runat="server"
        Orientation="Horizontal"
        StaticEnableDefaultPopOutImage="False"
        OnMenuItemClick="Menu1_MenuItemClick" CssClass="stepNumber">
    <Items>
        <asp:MenuItem Text="Step 1" Value="0" Enabled="false"></asp:MenuItem>
        <asp:MenuItem Text="Step 2" Value="1"></asp:MenuItem>
        <asp:MenuItem Text="Step 3" Value="2"></asp:MenuItem>
    </Items>
</asp:Menu>

Then you could just disable the steps as you go:

protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
        {
            this.MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value);
            e.Item.Enabled = false;
        }
0
 
CamilliaAuthor Commented:
I will try , thanks.
0
 
CamilliaAuthor Commented:
If you look at what I posted:
<div class="pageSteps">
...
</div>
That's on top of the page...what would happen to that?
Using asp:menu...isnt that just like multiview?
What if I just remove the menu and multiview and just keep the "div class=
pageSteps"> ...</div>...can I do that??
0
 
Paul JacksonSoftware EngineerCommented:
What is the purpose of the divs are you trying to create tabs so the multiview views can be selected using the tabs?
0
 
Tom BeckCommented:
Just enclose the menu in the div class="pageSteps">. It will wrap the outside of the resulting table for the menu.

<div class="pageSteps">
    <asp:Menu
        ID="Menu1"
        Width="168px"
        runat="server"
        Orientation="Horizontal"
        StaticEnableDefaultPopOutImage="False"
        OnMenuItemClick="Menu1_MenuItemClick" CssClass="stepNumber">
    ...
</asp:Menu>
    </div>
0
 
Tom BeckCommented:
>>What if I just remove the menu and multiview and just keep the "div class=
pageSteps"> ...</div>...can I do that??

Do you want to start from scratch? You only have the menu set up in divs, not the views. You could use nothing but divs and hide all steps (divs) except the one currently being worked on. This can be done without postback using css (display:block or display:none) and javascript (to change the css).

The MultiView requires a postback between views so if you are going to use that you might as well use a menu control for switching the views.
0
 
CamilliaAuthor Commented:
let me try the solution in ID: 35733206

The multiview works. I have next and previous buttons. But with the new pageSteps that the web designer, I dont know if I even need the multiview anymore...

You could use nothing but divs and hide all steps (divs) except the one currently being worked on. This can be done without postback using css (display:block or display:none) and javascript (to change the css).  how can I do this if i remove the multiview?
0
 
CamilliaAuthor Commented:
Thanks Tommy, let me try today and see. Very frustrated that this wasnt thought thru to begin with but it is what it is now. Thanks for your help.
0
 
Tom BeckCommented:
Just a heads up. Be sure you work out how you are going to capture the form entries before you commit to this method. You may need to transfer all tex tbox entries to hidden values inside a <form>. I have not tested this, but I'm wondering what happens to the value in an input field when the containing div is set to display:none.

Also, just because you can do it this way, it may not be ideal depending on the complexity of the form. Usually when forms have enough input fields to warrant multiple steps, the form values for each step are captured in a postback so that if the user's session is interrupted, the completed steps can be reloaded rather than repeated by the user.
0
 
CamilliaAuthor Commented:
thanks again
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.