Difference between Web Form and Web Form with Master Page?
Asked Answered
W

2

6

I new to using web applications. I am currently using visual studio 2013 and I have created a web application. I would like to have a form that employees fill out and then when they hit submit the form will either add, change or delete from the database. From researching I originally tried making a web form. This did not allow me to keep the formatting that was made on my master page, and when I tried connecting it to the master page it did not allow it because of the <form>. So then I created a web form with master page. This allows me to keep the formatting from the master page but now I am unable to create a form using <form>. So my question is how do I create a form that will submit and still keep the formatting from my master page?

Master Page:

 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> Employee Information</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>
<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!--<a class="navbar-brand" runat="server" href="~/">Employee Information</a>-->
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/HomePage">Home</a></li>
                        <!--<li><a runat="server" href="~/About">About</a></li>-->
                        <li><a runat="server" href="~/EmployeeInput">Add Employee</a></li>
                        <li><a runat="server" href="~/EditEmployee">Edit Information</a></li>
                        <li><a runat="server" href="~/Terminate">Terminate Employee</a></li>
                    </ul>
                    <asp:LoginView runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Register">Register</a></li>
                                <li><a runat="server" href="~/Account/Login">Log in</a></li>
                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a></li>
                                <li>
                                    <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                </li>
                            </ul>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>
            </div>
        </div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> </p>
            </footer>
        </div>
    </form>
</body>
</html>

Web Form

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebForm3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <div id="Column1" style="height:355px;width:250px;float:left;">
        First Name: <input type="text" name="FirstName" />
        First Name: <input type="text" name="FirstName" />
        First Name: <input type="text" name="FirstName" />
        First Name: <input type="text" name="FirstName" />
        First Name: <input type="text" name="FirstName" />
        First Name: <input type="text" name="FirstName" />
        First Name: <input type="text" name="FirstName" />
        First Name: <input type="text" name="FirstName" />
        First Name:&nbsp; <input type="text" name="FirstName1" size="20" />
        <select id="Select1" name="D1">
            <option>This</option>
            <option>That</option>
            <option>The other thing</option>
        </select></div>
    <div id="Column2" style="height:355px;width:250px;float:left;">
        First Name: <input type="text" name="FirstName2" size="20" />
        First Name: <input type="text" name="FirstName3" size="20" />
        First Name: <input type="text" name="FirstName4" size="20" />
        First Name: <input type="text" name="FirstName5" size="20" />
        First Name: <input type="text" name="FirstName6" size="20" />
        First Name: <input type="text" name="FirstName7" size="20" />
        First Name: <input type="text" name="FirstName8" size="20" />
        First Name: <input type="text" name="FirstName9" size="20" />
        First Name: <input type="text" name="FirstName10" size="20" />
    </div>
    </body>
</html>

I would like to have everything within the body of my web form to be a form.

Woll answered 11/6, 2014 at 16:33 Comment(1)
can you show us your masterpage and webforms page? Generally you only have to make sure you have a form tag like: <form runat="server" id="form_1"></form>. More info about ASP.net formsEdulcorate
S
7

You can only have one form that has the runat="server"attribute on the composite page (Page + Master Page(s)).

The solution is to put the form in the Master Page, and put the content place holders inside the form. The Page itself doesn't just has to have the Content and declare the markup inside. When the page is executed, the markup from the Page and Master Page(s) will be combined into a single HTML file that is sent to the client.

Example master page:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>

<!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 runat="server">
    <title>Working with Data Tutorials</title>
    <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="wrapper">

        <form id="form1" runat="server">

            <div id="header">
                <span class="title">Working with Data Tutorials</span>
                <span class="breadcrumb">TODO: Breadcrumb will go here...</span>
            </div>

            <div id="content">
                <asp:contentplaceholder id="MainContent" runat="server">
                  <!-- Page-specific content will go here... -->
                </asp:contentplaceholder>
            </div>

            <div id="navigation">
                TODO: Menu will go here...
            </div>
        </form>
    </div>
</body>
</html>

Example content page:

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <h1>Welcome to the Working with Data Tutorial Site</h1>

    <p>This site is being built as part of a set of tutorials that illustrate some of the new data access and databinding features in ASP.NET 2.0 and Visual Web Developer.</p>

<asp:TextBox runat="server" id="TextBox1" /><br />
<asp:TextBox runat="server" id="TextBox2" /><br />
<asp:Button runat="server" id="Btn1" OnClick="Btn1_Click" Text="Click to submit!" />

        </asp:Content>

On the code behind (.cs file) for the page, you'd read the values from the text boxes like this:

protected void Btn1_Click(object sender, EventArgs e)
{
    string sometext=TextBox1.Text;
    string somemoretext=TextBox2.Text;
}

Examples from MSDN.

Spritsail answered 11/6, 2014 at 17:53 Comment(6)
Okay I have a content page that is set up like this example. How do I create a form on it though? The content Page does not allow for '<form>' and so I am unable to put an action statement for a submit button. Does the action statement go in the Master page as well? If so could you demonstrate where for me?Woll
@user3730892 What do you mean by form action statement? Do you mean just a button to cause a postback?Spritsail
Like I said I am really new to this. From what I have read so far if I want to post anything from a set of input boxes into a database (such as SQL Server) I have to encapsulate all of the input boxes within '<form>' such as '<form action="something"> <input boxes> <input submit></form>'Woll
@user3730892 I've updated my example to include some text boxes and a button, and the code you'd use to read that data on the server side after the button is clicked.Spritsail
So is 'runat="server"' pointing to whatever database I am connected to?Woll
@user3730892 No. Runat server makes the control run on the server side, the resulting content gets sent to the client as HTML. In your C# code you'll have to talk to the database. This is all basic stuff. You should watch some YouTube videos or read some books on ASP.NET development, as Stack Overflow is an inappropriate place to teach you an entire architecture.Spritsail
S
0

Both are Same but if you create Webform with Master Page Visual Studio implicitly add reference of the Master Page

<%@ Page Title="" Language="C#" MasterPageFile="~/My.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="project.WebForm1" %>

and if you create a Webform not added reference of the Master Page even Master Page existed.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="project.Bhand" %>
Statistician answered 12/3, 2018 at 9:48 Comment(2)
There is already a solution that solves OP's issue. Please have a look at that and then take into consideration if yout think that your answers adds some needed information.Mercymerdith
It is short answer!Statistician

© 2022 - 2024 — McMap. All rights reserved.