I have a simple web form, but when I submit the button postback is always false. This should all happen on the same page.
<form runat="server" class="frm" method="post" action="">
<span><input type="radio" name="options" value="Milk" /><label>Option 1</label></span>
<span><input type="radio" name="options" value="Butter" /><label>Option 2</label></span>
<span><input type="radio" name="options" value="Cheese" /><label>Option 3</label></span>
<span><input type="radio" name="options" value="Milk" /><label>Option 4</label></span>
<span><input type="radio" name="options" value="Butter" /><label>Option 5</label></span>
<span><input type="radio" name="options" value="Cheese" /><label>Option 6</label></span>
<input type="submit" name="submit" value="vote" />
</form>
*Button Code *
<asp:Button ID="loginBtn" runat="server" Text="vote" OnClick="Login" />
As Noon Silk said, you need to use server side controls, but you also need to use the asp.net mechanism on the form tag; see example code below. Notice the form tag has a 'runat="server"' attribute rather than a method and action:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="button" runat="server" />
</div>
</form>
</body>
</html>
Because you're not using the .net controls; you are just doing it manually.
You'd need to use an ASP.NET button, like so:
<asp:Button runat="server" ID="btnSubmit" ... />
And same for your inputs, if you want to be able to access them through txtFoo.Text. Of course, if you don't, you can still access everything through Request[...].
Related
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>© <%: 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: <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.
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.
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" %>
When i create radiobuttonlist programmatically using below code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadioButtonList.Default" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<% for (int i = 0; i < 2; i++)
{
anketsonucu.ID = i.ToString();
%>
<div>
<br />
<label>
<span class="questionicon">>></span> Deneme</label>
<asp:RadioButtonList ID="anketsonucu" runat="server" RepeatDirection="Horizontal"
CssClass="anketsonucu">
<asp:ListItem Text="Çok Kötü" Value="1"></asp:ListItem>
<asp:ListItem Text="Kötü" Value="2"></asp:ListItem>
<asp:ListItem Text="Orta" Value="3"></asp:ListItem>
<asp:ListItem Text="İyi" Value="4"></asp:ListItem>
<asp:ListItem Text="Çok İyi" Value="5"></asp:ListItem>
</asp:RadioButtonList>
</div>
<%
}
%>
</div>
</form>
</body>
</html>
it gives me this page source
<div>
<br />
<label>
<span class="questionicon">>></span> Deneme</label>
<table id="0" class="anketsonucu">
<tr>
<td><input id="0_0" type="radio" name="0" value="1" />
<label for="0_0">Çok Kötü</label></td><td><input id="0_1" type="radio" name="0" value="2" />
<label for="0_1">Kötü</label></td><td><input id="0_2" type="radio" name="0" value="3" />
<label for="0_2">Orta</label></td><td><input id="0_3" type="radio" name="0" value="4" />
<label for="0_3">İyi</label></td><td><input id="0_4" type="radio" name="0" value="5" />
<label for="0_4">Çok İyi</label></td>
</tr>
</table>
</div>
<div>
<br />
<label>
<span class="questionicon">>></span> Deneme</label>
<table id="1" class="anketsonucu">
<tr>
<td><input id="1_0" type="radio" name="0" value="1" /><label for="1_0">Çok Kötü</label></td><td>
<input id="1_1" type="radio" name="0" value="2" /><label for="1_1">Kötü</label></td><td>
<input id="1_2" type="radio" name="0" value="3" /><label for="1_2">Orta</label></td><td>
<input id="1_3" type="radio" name="0" value="4" /><label for="1_3">İyi</label></td><td>
<input id="1_4" type="radio" name="0" value="5" /><label for="1_4">Çok İyi</label></td>
</tr>
</table>
</div>
</div>
If you look carefully all of the controls has same "name" attribute as zero so i cannot select two options for different two radiobuttonlist. I can only select one.
How can i change name attribute of radio buttons so i can select two radio button at the same time for different radiobuttonlist?
Use CheckBoxList instead - by design it's used when multiple choices are desired.
EDIT
Gotcha - use this instead. Your loop just kept referencing the SAME RadioButtonList since it was already defined on the page. I just removed your RadioButtonList, added it back programmatically, added a PANEL to add it/them to the page, and removed the no longer needed end braces.
<%# Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="sandbox._Default" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<% for (int i = 0; i < 2; i++)
{
//anketsonucu.ID = i.ToString();
RadioButtonList rbl = new RadioButtonList();
rbl.ID = "anketsonucu" + i.ToString();
rbl.RepeatDirection = RepeatDirection.Horizontal;
rbl.CssClass = "anketsonucu";
rbl.Items.Add(new ListItem("Çok Kötü", "1"));
rbl.Items.Add(new ListItem("Kötü", "2"));
rbl.Items.Add(new ListItem("Orta", "3"));
rbl.Items.Add(new ListItem("İyi", "4"));
rbl.Items.Add(new ListItem("Çok İyi", "5"));
pnl.Controls.Add(rbl);
}
%>
<div>
<br />
<label><span class="questionicon">>></span> Deneme</label>
<asp:Panel ID="pnl" runat="server" />
</div>
</div>
</form>
</body>
</html>
i want to run the submit button when the page loads
Here is my form, it redirect to paypal and i want to run on page load
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server" action="<%= ConfigurationManager.AppSettings["PayPalSubmitUrl"] %>"
method="post" >
<input type="hidden" name="cmd" value="_cart"/>
<input type="hidden" name="upload" value="1"/>
<input type="hidden" name="business" value="<%= ConfigurationManager.AppSettings["PayPalEmailAddress"] %>"/>
<input type="hidden" name="item_name_1" value="Shopping_Cart"/>
<input type="hidden" name="amount_1" value="<%=Session["Total"].ToString() %>" />
<input type="hidden" name="currency_code" value="EUR" />
<input type="submit" id="submit" runat="server" value="PayPal" />
</form>
</body>
</html>
Use some Jquery and Javascript to submit the form as soon as the document is ready.
$(document).ready(function() {
document.forms["form1"].submit();
});
I have already download and install this package to support HTML5 input type
http://support.microsoft.com/kb/2468871
The following is code in my page
<!DOCTYPE HTML>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="testEmail" type="email" />
</div>
<div>
</div>
<asp:TextBox ID="testEmailAsp" runat="server" type="email"></asp:TextBox>
<asp:TextBox ID="testUrlAsp" runat="server" type="url"></asp:TextBox>
<asp:TextBox ID="textBoxTest" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
</html>
This code is generated when running in visual studion 2010
<input name="testEmailAsp" type="text" id="testEmailAsp" type="email" />
<input name="testUrlAsp" type="text" id="testUrlAsp" type="url" />
<input name="textBoxTest" type="text" id="textBoxTest" />
<input type="submit" name="Button1" value="Button" id="Button1" />
When publish to the server. it renders like this.
<input name="testEmailAsp" type="text" id="testEmailAsp" type="email" />
<input name="testUrlAsp" type="text" id="testUrlAsp" type="url" />
<input name="textBoxTest" type="text" id="textBoxTest" />
<input type="submit" name="Button1" value="Button" id="Button1" />
As you can see. it render type 2 time so the markup is incorrect and that make the input type keyboard on mobile not work.
I have to install that on the server as well, i don't know that
This may sound silly but does IE9 support HTML5 input type="email", url
http://html5test.com/
I have a checkboxlist in ASP.net with several choices in it. Is there a way that I can make the physical check able box invisible? I want it so that only the item in question is visible, but the box is invisible. If this is not possible can somebody recommend an alternate ASP control that would behave similarly to the checkboxlist?
For example I have a checkboxlist such as this:
<asp:CheckBoxList ID="Example" runat="server" AutoPostBack="false" RepeatColumns="2" RepeatDirection="Horizontal">
<asp:ListItem> 1 </asp:ListItem>
<asp:ListItem> 2 </asp:ListItem>
<asp:ListItem> 3 </asp:ListItem>
<asp:ListItem> 4 </asp:ListItem>
<asp:ListItem> 5 </asp:ListItem>
</asp:CheckBoxList>
Now I want only the number to be visible and selectable, but I want to the checkbox to be invisible. Much like the way a button works but I feel as though creating x amount of buttons may be more tedious.
As per the answer I have tried the demo Jquery and came out with this:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Testjq.Test" %>
<!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">
<script type = "text/javascript" src ="Scripts/jquery-1.7.1.min.js"></script>
<script type = "text/javascript" src ="Scripts/jquery-ui-1.8.18.custom.min.js"></script>
<script>
$(function () {
$("#check").button();
$("#format").buttonset();
});
</script>
<style>
#format { margin-top: 2em; }
</style>
<title></title>
</head>
<body>
<div class="demo">
<input type="checkbox" id="check" /><label for="check">Toggle</label>
<div id="format">
<input type="checkbox" id="check1" /><label for="check1">B</label>
<input type="checkbox" id="check2" /><label for="check2">I</label>
<input type="checkbox" id="check3" /><label for="check3">U</label>
</div>
</div><!-- End demo -->
</body>
</html>
Unfortunatley I still cannot get it to work. Any additional help would be much appreciated.
Did you check the jQueryUI?
Take a look at the demo page: http://jqueryui.com/demos/button/#checkbox
If I understood well they have exactly what you are looking for.