Form in asp.net webform content page - css

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.

Related

What happens when an update panel doesn't have any triggers?

I have the markup below, there is no triggers section and no setting of the triggers in the code behind. When I click on the checkbox, the page does update and show the hidden div (server side code sets visible), but page loading spinner in the page tab doesn't spin in chrome. If I remove the update and template tags, the page seems to act the same except that the page loading spinner spins.
What is actually happening? Is the page being reloaded or not? If the update panel is loading the page, why is it doing so without a defined AsyncPostBackTrigger?
<asp:UpdatePanel runat="server" ID="pnlMain">
<ContentTemplate>
<div class="control-group">
Hide Div
<div class="controls">
<asp:CheckBox ID="chkbx" CssClass="Input" runat="server" AutoPostBack="true" />
</div>
</div>
<div id="divToHide" runat="server">
stuff to hide when div is clicked
</div>
<div class="form-actions">
<asp:LinkButton ID="btnSubmit" runat="server" Text="Submit" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
Page is loaded in both cases. With Update Panel only Partial Page(Content inside the Content Template is updated) whereas in normal case entire page is re-rendered.

ASPX Form messing up Bootstrap styles

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!

Button click event is not firing in jquery mobile dialog with ASP.net webforms

I am opening dialog using Jquery Mobile. Problem is that btnSend_Click event is not firing. What I am trying to do that keeping button and textbox in update panel and do post back and close dialog after ruining on code on serverside.
Sample here
Parent Page Button HTML
<a href="/Kiosk/RetrieveTickets/RetrieveTicketsBySms.aspx" data-role="button" data-inline="true" data-theme="c" class="MyBigButton"
data-inline="true" data-rel="dialog" data-transition="pop">Via SMS
<br />
<br />
<img src="/Kiosk/images/mobile.png" />
</a>
Dialog Page HTML
<div id="dlgSms" data-role="dialog" data-theme="b">
<div data-role="header" data-theme="d">
<h1>
Retrieve Tickets By SMS</h1>
</div>
<div data-role="content" data-theme="c">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<p>
Please type here your mobile number. You will get your ticket on your mobile via
SMS.</p>
<asp:TextBox runat="server" ID="txtMobileNumber" placeholder="Enter Mobile Number" />
<asp:Button ID="btnSend" Text="Send SMS Now" runat="server" data-theme="b" OnClick="btnSend_Click" />
</ContentTemplate>
</asp:UpdatePanel>
Cancel
</div>
</div>
I will describe you the main issue here.
When you click on the "Via SMS" button you open a dialog, and the script is load one diferent aspx page, the RetrieveTicketsBySms.aspx and renders it in the DOM of the previous. So the button and the update panel and the script of the RetrieveTicketsBySms.aspx is now history.
So the button its fire, but is call the RetrieveTicketsOptions.aspx page, that is not even have it, but also the hash validation is also fails, so its not fired. You also have it inside the update panel, so from what I see is not even make any post back.
The possible solution here is to place the content of the dialog, that loads the RetrieveTicketsBySms.aspx inside an iframe -if this is possible. and remove the UpdatePanel.

how to trigger asp.net multiview?

I'm still getting my head around asp.net.
I followed some online examples of using multiviews and got them working just fine when I use something like a Menu class as the trigger to select the active view. Having the onClick event makes it pretty easy.
But I can't figure out how to change the emmited code from the Menu control.
I have the following multiview control...
<asp:View ID="0" runat="server">
<p>view page 1</p>
</asp:View>
<asp:View ID="1" runat="server">
<p>view page 2</p>
</asp:View>
And I need to have the following structure used to trigger the views.
(Note: this needs to be what gets emitted to the browser. Not necessarily the literal code in the aspx page)
<a class="button large-plain" href="" >
<span>
See page 1
</span>
</a>
<a class="button large-plain" href="" >
<span>
See page 2
</span>
</a>
For clarification: we have a style sheet provided by an exteranl designer that works with the above markup. If I could just make the triggers asp button controls, or a menu control, it would be easy. But the style sheet doesn't work then, and I'm told the world will end if the style sheet doesn't work.
Can I customise a Menu control so that it outputs this kind of structure? (And if so, how?)
I could just hard code the links that trigger the views (the structure is not going to change). But if I hardcode it, how do I call the onClick event what the links are clicked?
I think you might be able to try the following to change the tags into server-side controls and then use that as the trigger. Adding ID and runat="server" to any html element means that you can then access them programmatically as you would any other .NET style control. Additionally if you're using .NET 4.0 you can also add the ClientIdMode="Static" attribute so that the ID's are as you typed and not modified by ASP.NET.
To solve the Click problem you can add the OnServerClick="" attribute to specify which method to call on the server when the link is clicked.
<a class="button large-plain" href="" ID="ViewPage1" runat="server" OnServerClick="ViewPage1_Click">
<span>
See page 1
</span>
</a>
<a class="button large-plain" href="" ID="ViewPage2" runat="server" OnServerClick="ViewPage2_Click">
<span>
See page 2
</span>
</a>

Ajax popup causes screen to re-load using ASP.NET

I am using the code from How to create a stunning and smooth popup using jQuery. When I click the button to activate the Ajax popup, it does appear, but the page is reloading on the button click.
How do I get around this?
Hard to say without seeing your code, but whatever link/button you are using to launch the dialog, make sure it is returning false from its click event handler (or submit event handler on a form)
Is your modal wired up to an ASP.NET button? If so, this will be set to postback on a click. Perhaps wire the modal to a regular HTML button instead?
Most likely your button is a post back button. You might want to change that configuration so that it does not automatically post back.
Since I'm using an ASP.NET button control, it wanted to post back, so I created an update panel with the AsyncPostBackTrigger ControlID=[my button id].
So the code to make it all work (with loading the jQuery library) is as follows:
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="button">
<asp:Button ID="Save1" runat="server" Text="Button" onclick="Save1_Click" />
</div>
<asp:UpdatePanel ID="up1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Save1" />
</Triggers>
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>Title of our cool popup, yay!</h1>
<p id="contactArea">
Here we have a simple but interesting sample of our new stuning and smooth popup. As you can see jQuery and CSS does it easy...
<br/><br/>
We can use it for popup-forms and more... just experiment!
<br/><br/>
Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!
<br/><br/>
</p>
</div>
<div id="backgroundPopup"></div>
</div>
</form>

Resources