I have no background in ASPX, but have been assigned to restyle an application that is being built. I decided to use bootstrap, but am having one major issue. I have tracked down the problem to the first <form id="Form1" runat="server"> in the <body> on my Site.Master, which from what I understand is how ASPX treats everything, like a form.
This ASPX form tag is keeping all the labels in other forms to their own line, and all preceding elements to the next line.
Some problematic code, when ran inside of the form tag that ASPX requires to wrap everything:
<form class="form-horizontal span6">
<fieldset>
<legend>Login</legend>
<div class="control-group">
<label class="control-label" for="tbUsername">Username</label>
<div class="controls">
<asp:TextBox ID="tbPassword" placeholder="Password" runat="server" ClientIDMode="Static" TextMode="Password"></asp:TextBox>
</div>
</div>
</fieldset>
</form>
Thanks much Stack!
Related
So I am having an issue on my ASP web form, where I am using Bootstrap and trying to make use of the Ajax AsyncFileUpload control. The file upload control looks like this:
<div id="LoafFileUploadTemplate" class="custom-file">
<asp:AsyncFileUpload ID="LoafFileUpload" runat="server" ClientIDMode="Static" CssClass="custom-file-input file-upload" enctype="multipart/form-data" method="post" OnClientUploadStarted="Loaf_UploadStarted" OnClientUploadComplete="Loaf_UploadComplete" OnUploadedComplete="LoafFileUpload_UploadedComplete" />
<label class="custom-file-label">Choose File</label>
</div>
<asp:Button ID="LoafFileUploadComplete" runat="server" ClientIDMode="Static" CssClass="d-none" OnClick="LoafFileUploadComplete_Click" />
For some reason the LoafFileUpload_UploadedComplete method didn't fire when the uploader was finished. I've read that I need to add enctype="multipart/form-data" method="post" to the file input. I have done that, but still doesn't work. Turns out the way bootstrap renders the AsyncFileUpload control, these two attributes get applied to a div instead of the file upload control, as seen below:
<div id="LoafFileUploadTemplate" class="custom-file">
<div id="LoafFileUpload" class="custom-file-input file-upload" enctype="multipart/form-data" method="post">
<input type="hidden" name="ctl00$CPH_main$CsatoltFajlok$LoafFileUpload$ctl00"><div><input name="ctl00$CPH_main$CsatoltFajlok$LoafFileUpload$ctl02" type="file" id="ctl00_CPH_main_CsatoltFajlok_LoafFileUpload_ctl02" style="" size="20"></div>
</div>
<label class="custom-file-label">Fájl feltöltése</label>
</div>
</div>
<input type="submit" name="ctl00$CPH_main$CsatoltFajlok$LoafFileUploadComplete" value="" id="LoafFileUploadComplete" class="d-none">
So as seen here, the enctype="multipart/form-data" method="post" attributes are applied onto the div containing the file input, not the input itself. Because of this, the file doesn't get posted to the server. Anyones know a fix for this?
Turns out I didn't need to add enctype="multipart/form-data" method="post" to the file input, but to the form itself (in my case, in the master page). It works now.
I have a project, i have used form elemen in master page.
In the content page, i have css class for bootstrap form-horizontal, form-group, and i place a button in the form-group and form-horizontal class.
When i press the button, it doesn't fire at all.
<div class="form-group">
<div class="col-md-4"></div>
<div class="col-md-8" style="float: right;">
<asp:Button ID="btn_simpan_user" runat="server" class="btn btn-success" Text="Simpan" OnClick="btn_simpan_user_Click" />
</div>
</div>
I make other button in another webform pages in the same solution with the same master page, but without form-group and form-horizontal. It works, it can fire.
<asp:Button ID="button_test" runat="server" OnClick="btn_test" Text="Test" />
My Question is:
I know that in webform page content we can't make another form since that only one form can run in a server and it has already run on the master page.
But only make form-group and form -horizontal class, is it wrong??
what should i do to run the button? I need the form group and form-horizontal class to make my pages looking good.
<%# Page Title="" Language="C#" MasterPageFile="~/Main.master" AutoEventWireup="true" CodeFile="zzzz.aspx.cs" Inherits="zzzz" %>
<asp:Content ID="Content1" ContentPlaceHolderID="zzzz" Runat="Server">
<div class="form-group">
Country code: <input type="text" required="required" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code" class="form-group">
</div>
<input type="submit" class="form-group">
<p><strong>Note:</strong> The pattern attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</asp:Content>
Here pattern doesnt work i dont know why.. i tried all possible way to bring it, nothing helped me . I wanted to use patter to filter special character in the textbox. Please help me on this issue.. thank you..
It is working properly.
However, if you are running this page on IE, check what mode the browser is in. Simply press F12 and make sure it is set to IE10/Standard.
And if this is indeed the case, add/modify the following line to your Site.master:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
And this will fix this kind of problem.
Try this code its working perfectly
<html>
<body>
<form action="demo_form.asp">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
</body>
</html>
Enter invalid country code and click submit button. Then You can get a message (title="Three letter country code")
I have just create a blank .net web form page and added a simple html form, it reads:
<body>
<form id="form1" runat="server">
<div>
<form method="post" action="2ndpage.aspx">
<input type="text" name="Value" />
<input type="submit" value="click" />
</form>
</div>
</form>
</body>
If I click the button I'm not taken to 2ndpage.aspx. But If I add "<form></form>" just after the <div> so that the body now reads:
<body>
<form id="form1" runat="server">
<div>
<form></form>
<form method="post" action="2ndpage.aspx">
<input type="text" name="Value" />
<input type="submit" value="click" />
</form>
</div>
</form>
</body>
it works and I'm taken to 2ndpage.aspx when click.
I can look at this for another month but I'm sure I couldn't see where the bug is, I'd need a pair of fresh eyes.
Any ideas?
Thanks
you cant place form inside another form!
There's a good article here - https://web.archive.org/web/20170420110433/http://anderwald.info/internet/nesting-form-tags-in-xhtml/
It discusses not being able to nest one form in another form and also deals specifically with the scenario you describe.
You can't have nested form tags.
I'm not quite sure why it works when you add another empty form tag. But my guess is that the parser simply ignores the start of the tag and sees the end tag as the end tag for the first form. And therefore doesn't see it as nested forms anymore.
I'm trying to put the following Google generated search box code into a Master page on a site:
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-xxxxxxxxxx:u3qsil-l6ut" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
The problem, I believe, is something to do with the form tags. I've tried putting this code inside a user control and embedding that in the master page but no luck yet...
Do you by any chance have a "form runat=server" wrapping around where your user control is being placed?
That would cause a problem.
ASP.NET likes to enclose the entire page with a Form tag, and you can't nest form tags...So move it outside of the <form runat="Server"> tag and you'll be fine.