How do I call method from CodeFile using Bootstrap (C#, VS 2013) - javascript

I'm using VS 2013 to develop an aspx page with a C# CodeFile. If I've used Bootstrap on the aspx page how do I reference the CodeFile to call a function. On a button click, for example. This gets handled by a Button1_Click function in the CodeFile:
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
But how can I do the same using a Bootstrap button?
<button type="button" class="btn btn-default" id="Button1">Button1</button>

You cannot do this this as the callback requires a server-side control. If your goal is to style you <asp:Button> control, you can set the CssClass property to "btn btn-default" like in your HTML.
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" CssClass="btn btn-default" />
In you Page or Control definition, you will also need to set the class that contains your Button1_Click method as the Inherits property.

Related

How to add span tag to button in asp.net c#

I am trying to add spinner to the button. I searched and I found the simplest way is describe by Flion on this link. I dont know how add the suggested button code to my asp.net button.
Suggested code is
<button class="btn btn-lg btn-warning">
<span class="glyphicon glyphicon-refresh spinning"></span> Loading..</button>
and my code is
<asp:Button ID="LoginButton" runat="server" OnClick="Button1_Click" Text="Login" CssClass="btn btn-primary col-xs-12"/>
You can use the suggested code as it is. You just need to use the runat="server" to access that html button at code behind. Apart from this you also need to setup the onclick event like this
<button class="btn btn-lg btn-warning" runat="server" onclick="Button1_Click" id="LoginButton">
<span class="glyphicon glyphicon-refresh spinning"></span>Loading..
</button>
So in asp.net, the simple solution at least for now is
<asp:Button ID="LoginButton" runat="server" OnClick="Button1_Click" Text="Login" CssClass="btn btn-primary col-xs-12" UseSubmitBehavior="false" OnClientClick="this.value='Please wait...';"/>
this may help you
<button id="btn" runat="server" onserverclick="Button1-Click">
<span>Click</span></button>
try using this code if it helps...
Tell me if it helps...

Get the properties of an asp.button function in a javascript function

I would like to know how I can get the properties of an asp:Button from a javascript function.
Specifically I want to be able to test whether a specific aspx button is enabled or not in a javascript function.
Once you know the client ID of the <asp:Button /> you can use document.getElementById function to get the reference of it's DOM object and get other properties you are interested in.
An example:
Some where in aspx mark up:
<asp:Button id="button1" runat="server" Text="Click Me"/>
In javascript:
<script type="text/javascript">
//button1 is the ID of asp:Button
var objButton = document.getElementById('<%=button1.ClientID');
</script>
You do this like you would with a plain html button.
<asp:Button id="foo" runat="server" />
Turns into
<input type="button" id="foo" />
If youre using a new version of asp.net, you can add ClientIDMode="Static" so that the id doesnt change to something else.

Why does .NET render javascript for a button when there's a custom validator on the page?

I've got two questions - first of all, why does .net render a javascript onclick event for asp buttons when there's a custom validator on the same page, and secondly, how can I get rid of the javascript?
It works fine when javascript is turned off, so I don't know what the point of it is. Here's a mini example:
<form id="form1" runat="server">
<asp:Button ID="Button1" OnClick="Button1_Click" Text="test" runat="server" />
<asp:CustomValidator ID="CustomValidator1" runat="server"
OnServerValidate="Stuff_Validate" EnableClientScript="false">
</asp:CustomValidator>
</form>
This will generate the following html for the button:
<input type="submit" name="Button1" value="test" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Button1", "", true, "", "", false, false))" id="Button1" />
Without the custom validator, it's:
<input type="submit" name="Button1" value="test" id="Button1" />
Any ideas?
Thanks,
Annelie
If you look at what System.Web.UI.WebControls.Button does you can see why:
In GetPostBackOptions(), if you have any validators on the page (in the current validation group), then it will generate a script for the postback.
Then in AddAttributesToRender(), if any scripts are present, they are rendered out in the onclick event.
If you need to get around this, then you are going to have to build a custom Button
The javascript is added because the custom validation is done via javascript. It is meant to be there. How do you think the validation is done? If you got rid of the javascript the validation would not work.

<input type="button" runat="server" /> won't work in ASP.NET

Okay, this may seem silly, but on an ASP.NET .ascx control, I'm trying to use:
<input type="button" runat="server" />
instead of:
<asp:Button runat="server" />
And it's not working for me. This code:
<asp:Button id="btnBuyCat" runat="server" Text="Buy Cat"
ToolTip="Click to buy a cat" OnClick="btnBuyCat_Click" EnableViewState="false" />
renders the following HTML: (ignoring naming containers btw)
<input type="submit" id="btnBuyCat" name="btnBuyCat" value="Shopping Cart"
title="Click to buy a cat" />
That's mostly fine, except I want input type="button" not input type="submit".
I tried this code:
<input type="button" id="btnBuyCat" name="btnBuyCat" runat="server"
value="Buy Cat" title="Click to buy a cat" onclick="btnBuyCat_Click"
enableviewstate="False" />
and get this HTML:
<input type="button" id="btnBuyCat" name="btnBuyCat"" value="Buy Cat"
title="Click to buy a cat" onclick="btnBuyCat_Click" />
Unfortunately the rendered button does not work. Also, I even tried input type="submit" just to check, but unless I use the <asp:Button> I can't get it to work. I'm sure it has something to do with the JavaScript.
Is there a way to use the regular HTML button markup and a runat="server" in ASP.NET?
What you're missing is the UseSubmitBehavior attribute, e.g.,
<asp:Button id="btnBuyCat" runat="server" Text="Buy Cat"
UseSubmitBehavior="False" ToolTip="Click to buy a cat"
OnClick="btnBuyCat_Click" EnableViewState="false" />
This will give you a regular button, not a submit button.
To specify an input control runat=server, you must also specify an id. Also the error you get is probably because of js error. onclick event on a standard html control is assuming a script method define, whereas it seems like you wanted to do a postback type operation. Your option is to define a javascript function according to the method name you give to the onclick event, or use __doPostBack method to explicitly trigger postback
<input type="button" runat="server" id="btnTest" />
Have you tried:
<button type="button" id="btnBuyCat" name="btnBuyCat" value="Shopping Cart"
title="Click to buy a cat" onclick="btnBuyCat_Click">Click Me!</button>
You can use:
btnBuyCat.ServerClick += new EventHandler(btnBuyCat_ServerClick);

ClientID inside of ASCX file

I am trying to get CLientID inside the .ascx (user control mark-up) file.
While this
My id is: <%=this.ClientID%>
renders as
My id is: fracTemplateCtrl
This:
<asp:Button ID="btnSave" runat="server" Text="Save Template" onclick="btnSave_Click" OnClientClick="return confirmSave('<%=this.ClientID%>');" />
renders as (inside Source code):
<input type="submit" name="fracTemplateCtrl$btnSave" value="Save Template" onclick="return confirmSave('<%=this.ClientID%>');" id="fracTemplateCtrl_btnSave" />
Clearly, ClientId property does not get evaluated in the second case. How do I overcome this issue? (aside from hardcoding, which is not the answer, I would like to make the user control independent)
You could set the OnClientClick property's value server-side like this:
btnSave.OnClientClick = "return confirmSave('" + this.ClientID + "')";
Try this instead
<asp:Button ID="btnSave" runat="server" Text="Save Template" onclick="btnSave_Click" OnClientClick="return confirmSave(this.id);" />

Categories