?
Solved

Multiview and HTML div

Posted on 2011-05-10
14
Medium Priority
?
1,426 Views
Last Modified: 2012-05-11
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

0
Comment
Question by:Camillia
  • 6
  • 6
  • 2
14 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35732592
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
 
LVL 29

Expert Comment

by:Paul Jackson
ID: 35732617
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
 
LVL 7

Author Comment

by:Camillia
ID: 35732661
I will try jacko72's method as I have to keep the design the same...
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 38

Expert Comment

by:Tom Beck
ID: 35732917
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
 
LVL 7

Author Comment

by:Camillia
ID: 35733005
I will try , thanks.
0
 
LVL 7

Author Comment

by:Camillia
ID: 35733048
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
 
LVL 29

Expert Comment

by:Paul Jackson
ID: 35733121
What is the purpose of the divs are you trying to create tabs so the multiview views can be selected using the tabs?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35733206
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35733271
>>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
 
LVL 7

Author Comment

by:Camillia
ID: 35734413
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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 35736926
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
 
LVL 7

Author Comment

by:Camillia
ID: 35737042
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35737201
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
 
LVL 7

Author Comment

by:Camillia
ID: 35737546
thanks again
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an anti-spam), the admin…
Loops Section Overview
Suggested Courses

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question