Solved

ASP.net WebForm within a WebForm

Posted on 2012-04-11
12
349 Views
Last Modified: 2012-04-12
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
Comment
Question by:murbro
  • 7
  • 5
12 Comments
 
LVL 38

Expert Comment

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

Expert Comment

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

Author Comment

by:murbro
ID: 37838679
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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 37838745
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
 

Author Closing Comment

by:murbro
ID: 37838798
Fantastic. Thank you very much. Outstanding answer!
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37838849
You're welcome, thanks for the points.

If it doesn't work correctly, just post another question.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:murbro
ID: 37838999
Hi
The main form works well but when I click the button I get the following error
1
0
 
LVL 38

Expert Comment

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

Author Comment

by:murbro
ID: 37839320
hi how do i convet to vb.net
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37839354
0
 

Author Comment

by:murbro
ID: 37839484
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
 
LVL 38

Expert Comment

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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…

747 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now