• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 371
  • Last Modified:

ASP.net WebForm within a WebForm

Hi

In ASP.net I am trying to build a subform in my main WebForm so that I can take a user through a three step questionaire without seemingly leaving that page. How would I do this?

Thanks
0
Murray Brown
Asked:
Murray Brown
  • 7
  • 5
1 Solution
 
Tom BeckCommented:
A working sample of an aspx form within an aspx form using jquery ajax and a modal popup so the user never leaves the parent page. Information entered in the child form is returned to the parent.
<!-- THIS IS THE CONTENT ON YOUR PARENT PAGE, WEBFORM1.ASPX, NOTHING IN CODE BEHIND -->

<!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 id="Head1" runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        * {margin:0 auto}
        #wrapper
        {
            width:800px;
            height:600px;
            background-color:#def
        }
        #content
        {
            padding:40px
        }
        .screen
        {
            position:fixed;
            top:0px;
            left:0px;
            display:none;
	        width:100%;
	        height:100%;
            background-color: #333; 
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
            filter: alpha(opacity=50); 
            opacity: 0.5;
            z-index:200;
            display:none
        }
        #result {
            background-color:#fff;
            bottom: 100px;
            height: 328px;
            padding: 10px;
            position: absolute;
            left: 200px;
            width: 500px;
            z-index:300;
            display:none
        }
        .functions {
            background-color: #fff;
            border: 2px solid #F9B41E;
            clear: both;
            margin: 20px 10px;
            padding: 5px 10px 10px;
        }
        .loading {
	        position: absolute;
	        top: 170px; left: 245px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
    <div id="screen" class="screen"></div>
    <div id="content">
        <div id="idHolder" style="font-size:2em;color:Green;border:2px solid Red"></div>
        <br />
        <p><span style="font-weight:bold;font-size:1.5em">Some content on the xyz.aspx page.</span>Quis ipsum ullamcorper dolore vulputate commodo suscipit eum duis  delenit molestie nostrud qui velit molestie zzril at eum ut volutpat,  consequat feugait aliquip amet. Laoreet illum illum suscipit zzril  nonummy dolore, dolore accumsan. Et, augue at tincidunt wisi duis sed  amet feugiat nulla luptatum nisl ut facilisis. Et veniam velit feugait  accumsan magna veniam, nulla vulputate in vero erat duis ea, illum  consequat at, exerci, ullamcorper. Te, dignissim feugiat iusto enim  consequat velit enim enim ea autem nulla eum, accumsan. Tation nisl, eum  in vero blandit et dolore consequat veniam accumsan duis ut eros in  odio delenit. Luptatum hendrerit molestie, et ullamcorper, odio ex, nisl  odio odio iriure minim vel elit exerci dolore, feugait nostrud, dolore  dolor ut. 
            Duis autem esse molestie euismod in commodo enim,  exerci qui quis dolore dignissim velit augue, esse et vel et sit iriure  te esse. Molestie autem ut consequat dignissim, facilisi eros quis, et  facilisis consectetuer laoreet aliquip. Suscipit tation dolor dignissim  ex nisl praesent et lobortis eu nulla laoreet zzril ea hendrerit in. 
            Vel  nisl ut facilisis nulla veniam velit feugait accumsan</p>
            <br />            
            <input type="submit" id="load_basic" value="Bring Up a second form" />
            <br /><br />
            <p> magna veniam,  nulla vulputate in vero erat duis ea, illum consequat at, exerci,  ullamcorper duis, dignissim. Iusto iusto enim consequat velit enim enim  ea autem nulla eum, accumsan blandit nisl, eum in. Feugait blandit et  dolore consequat veniam accumsan duis ut eros in odio delenit ea  hendrerit molestie. 
            Ullamcorper iriure ut diam aliquam conQuis ipsum ullamcorper dolore vulputate commodo suscipit eum duis  delenit molestie nostrud qui velit molestie zzril at eum ut volutpat,  consequat feugait aliquip amet. Laoreet illum illum suscipit zzril  nonummy dolore, dolore accumsan. Et, augue at tincidunt wisi duis sed  amet feugiat nulla luptatum nisl ut facilisis. Et veniam velit feugait  accumsan magna veniam, nulla vulputate in vero erat duis ea, illum  consequat at, exerci, ullamcorper. Te, dignissim feugiat iusto enim  consequat velit enim enim ea autem nulla eum, accumsan. Tation nisl, eum  in vero blandit et dolore consequat veniam accumsan duis ut eros in  odio delenit. Luptatum hendrerit molestie, et ullamcorper, odio ex, nisl  odio odio iriure minim vel elit exerci dolore, feugait nostrud, dolore  dolor ut. 
            Duis autem esse molestie euismod in commodo enim,</p>
    </div>
    <div id="result" class="functions"></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    </div>
    <script type="text/javascript">
	$.ajaxSetup ({
		cache: false
	});
	var ajax_load = "<img class='loading' src='images/load.gif' alt='loading...' />";

    var loadUrl = "Webform2.aspx";
    if(window.location.href.indexOf("?x=") != -1){
        var x = window.location.href;
        x = x.substring(x.indexOf("x="));
        $("#screen").css("display", "none");
	    $("#result").css("display", "none");
	    $("#idHolder").html("Data returned: " + x + " to this page.");        
    }else{    
	    $("#load_basic").click(function(){
	        $("#screen").css("display", "block");
	        $("#result").css("display", "block");
		    $("#result").html(ajax_load).load(loadUrl);
	    });
    }
</script>
</body>
</html>

Open in new window


The child form markup:
<!-- THIS IS THE CONTENT FOR YOUR CHILD PAGE THAT WILL LOAD INTO THE MODAL POPUP -->

<!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 id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div style="font-size:3em">
    Webform2.aspx loaded here    
    </div>
    <div style="font-size:2em">
    Enter form data.
    </div>
    <br />
    <asp:TextBox ID="sampleTxt" runat="server"></asp:TextBox>
    <asp:Button ID="submitBut" runat="server" Text="Submit" OnClick="submitBut_Click" />
    <asp:Label ID="errorLbl" runat="server" ForeColor="Red"></asp:Label>
    </form>
</body>
</html>

Open in new window


Code behind button click handler for the child page:
        protected void submitBut_Click(object sender, EventArgs e)
        {
            if (this.sampleTxt.Text != "")
            {
                Response.Redirect("WebForm1.aspx?x=" + this.sampleTxt.Text);
            }
            else
            {
                this.errorLbl.Text = "You must enter a search term.";
            }
        }

Open in new window

0
 
Tom BeckCommented:
Another way to do this would be to use divs as your child forms with display set to none. When the child form is needed, toggle the display to block and present the form inside a modal popup.

The key to either method is the modal popup because the screen over the page effectively disables the controls under it thus forcing focus on the child form.
0
 
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Hi. Thank you for the extensive answer. I am very new ASP.net so please would you advise me where to put the code. If I add WebForm1 that uses my site master I get

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="WebForm1.aspx.vb" Inherits="OfficeIntegrate.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

</asp:Content>
0
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!

 
Tom BeckCommented:
What method have you decided to go with.

Assume method 1.

Webform1.aspx is your parent page so the code I posted between the <body> tags (not including the body tags) for the parent page would go in the MainContent placeholder. The css including the <style> tags COULD go in the HeadContent placeholder OR it could go on a stylesheet with a <link> to the stylesheet in the HeadContent.

For the child page, create a new web form, Webform2.aspx, NOT a content form, and place everything I posted for the child form on that. This form will not be part of the MasterPage set. Place the code behind for the child page in WebForm2.aspx.vb. I have it written in C# so it needs to be converted to vb. You can use converter.telerik.com for that.

You will have to adjust some references to forms in the scripts so they match the names of your forms.
0
 
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Fantastic. Thank you very much. Outstanding answer!
0
 
Tom BeckCommented:
You're welcome, thanks for the points.

If it doesn't work correctly, just post another question.
0
 
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Hi
The main form works well but when I click the button I get the following error
1
0
 
Tom BeckCommented:
From the looks of the image, you appear to have that code on an aspx page. I see a closing </div> and a </script> tag. It should go in the Webform2.aspx.vb code behind AFTER the code is converted to vb.
0
 
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
hi how do i convet to vb.net
0
 
Tom BeckCommented:
0
 
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Hi. Sorry but I am not getting this right. The code behind WebForm2 looks as follows
When I double click the button to insert the code I converted it simply highlights the line
  <asp:Button ID="submitBut" runat="server" Text="Submit" OnClick="submitBut_Click" />
Also shouldn't there be code behind the button click on the first form to bring up the second




<!-- THIS IS THE CONTENT FOR YOUR CHILD PAGE THAT WILL LOAD INTO THE MODAL POPUP -->

<!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 id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div style="font-size:3em">
    Webform2.aspx loaded here    
    </div>
    <div style="font-size:2em">
    Enter form data.
    </div>
    <br />
    <asp:TextBox ID="sampleTxt" runat="server"></asp:TextBox>
    <asp:Button ID="submitBut" runat="server" Text="Submit" OnClick="submitBut_Click" />
    <asp:Label ID="errorLbl" runat="server" ForeColor="Red"></asp:Label>
    </form>
</body>
</html>
0
 
Tom BeckCommented:
When you create a web form or content form in Visual Studio, three files are created: WebForm2.aspx, WebForm2.aspx.vb, and WebForm2.aspx.designer.vb.  Check your Solution Explorer to confirm this.

When you create a web form in VS there is a <%@ Page ... directive added to the top of the aspx file. Do not paste over this directive. Paste what I have provided below that directive.

The markup you posted above goes on WebForm2.aspx page below the Page directive.

The VB code you translated goes in the WebForm2.aspx.vb file under the Page_Load block.

The button that launches the child form is not an asp:Button, it's a standard html input, so it does not require any code behind in the WebForm1.aspx.vb file. The click event is handled by the javascript on the aspx page.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now