We Keep Coding

Create a customized alert box in c# asp.net

I want to create a alert box with asp controls, is it possible?
For example, a simple script alert would be like,
Response.Write("<script>alert('Alert Box');</script>");
On the alert box there are default buttons "Ok" and "Cancel" with the text "Alert Box"
Now all i want to do is call a function written in the respective Demo.aspx.cs page on the click of Ok button of alert.
Or
Is it possible to place a asp:Button control in that alert box to call that function?
Thanks if any of you could help! :)

You can't use asp:Button in JavaScript alert, The best way to make an alert or modal dialog box in asp.net is to create your own and make it hidden or in-active in master page and call it when you need it.
You can get a ready made modal or alert in GetBootstrap
Update:
Here some Idea how to use bootstrap modal.
This is how I use GetBootstrap Modal for asp.net webforms, you can use it if you want.
The following code is use to create a customize alert or modal box with proper asp.net button controls that you can use in back-end. "you can place this in master page to prevent repetitive"
<asp:Panel ID="pnlAlertBox" runat="server" style="position:absolute;top:0;> //You can make is visible or hidden -- you need to customize the style of panel
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">This is customize alertbox</h4>
</div>
<div class="modal-body">
This is the messages...
</div>
<div class="modal-footer">
<asp:Button ID="btnCancel" runat="server" CssClass="btn btn-default" Text="Cancel" />
<asp:Button ID="btnOk" runat="server" CssClass="btn btn-primary" Text="Ok" />
</div>
</div>
</div>
</asp:Panel>
But of course you need to include the getboostrap .js and .css files in master page to show the design.
Place this in header:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
Place this after form:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

This is a fixed version of Abrar Jahin's answer. Calling e.preventDefault() prevents the default action being taken, which is to submit the form.
The following displays the alert on click, and then submits the form: -
$("#alert_button").click( function(e)
{
alert('This is a custom alert box', 'Alert Dialog');
});
EDIT:
If you want to call a specific function in your webpage, you have a few options: -
A PageMethod or HttpHandler
in your client-side code, call the ASP.NET-generated __doPostback function, and pass parameters indicating what to do to your server-side code

without redirect page alert code
ScriptManager.RegisterStartupScript(this, this.GetType(), "showalert", "alert('Demo');", true);
with redirect page
ScriptManager.RegisterStartupScript(this, this.GetType(), "err_msg", "alert('Demo');window.location='Demo.aspx';", true);

You can use javascript inside OnClientClick event handler for the button
<asp:Button ID="Button1" runat="server" Text="Delete User"
OnClientClick="return confirm('Are you sure you want to delete this user?');" />

Can I add HTML button triggers to update panel

Is it possible to add HTML input buttons to asp.net triggers, as I have a message box it works perfectly for a gridview which is in update panel,
but when I go to a different page of gridview, message box displays but buttons stops working, I don't know how to debug it, please help.
this is the button,
<input type="button" id="Button2" value="Cancel" cssclass="rightButton" />
and can I add it to,
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
OR should I not ?

with runat server tag you use html controls in c# script.
i.e
<input type="button" id="Button2" value="Cancel" cssclass="rightButton" />
should be
<input type="button" id="Button2" value="Cancel" cssclass="rightButton" runat="server" />
and the when you double click on it(assuming VS as IDE), it will make a new click event in c# snippet. Besides its good practice to use direct html tags when complex functions are not needed, it saves time to display the page, as an asp component first translates itself in the html and then goes to browser; while this approach saves time of translation.
Regards

Yes you can! to see errors ,first remove UpdatePanel from your code and then test elements without it,in this status if any error occurs will be shown, after test you can add it again.

File downloading on postback

I have an anchor tag, an AsyncFileUpload control, and a span. The anchor tag's InnerText is set when a file exists in the database, if not, it is hidden. It also has a ServerClick event which downloads the file.
The span tag's InnerText displays the filename of the file uploaded using the AsyncFileUpload OnUploadedComplete.
When I click on the anchor, the file downloads (which is good.) But when I change the file (using the AsyncFileUpload) it posts back and the ServerClick method of the anchor tag is fired again therefore downloading the file again.
<a id="lnkDownloadFile" runat="server"></a>
<span id="spnFilename" runat="server"></span>
<input type="button" id="btnReplaceFile" value="Replace File" runat="server" />
<div>
<ajaxToolkit:AsyncFileUpload ID="fuFile" runat="server" OnUploadedComplete="UploadComplete" OnClientUploadError="UploadError" />
</div>
Is there any way around this?
Thank you.

I am not sure why this is happening but one of the work-around could be to use hidden field to confirm if post-back has happened due to click on download link. For example,
<input type="hidden" id="downloadFile" runat="server" />
<asp:LinkButton id="lnkDownloadFile" runat="server" OnClientClick="return setDownloadFile();" />
<script type="text/java-script" >
function setDownloadFile() {
document.getElementById('<%= downloadFile.ClientID>').value = 'true';
return true;
}
</script>
You can check downloadFile value in the link button click to decide whether to download file or not. Note that I have used LinkButton because I am sure about its client click attribute - you can try use click attribute with html anchor (what I am not 100% sure if it would interfare with ServerClick event handler).

Relay click to Button to trigger ASP.NET File Upload

In a ASP.NET C# website I have an input that uploads a file to my server. To overcome the issue of not being able to style an input of the type=file I have created a styled div that looks like the input but actually just relays the message to the actual input which has display: none to be invisible.
My Problem: Relaying the message isn't working, ie, when I relay the click message to the actual input the file is never uploaded(nothing happens). I know the button works because if I click the actual input it uploads the file sucessfully.
Is there some ASP.NET security stopping me from being able to do this? Whats going wrong? How can I acheive what I am trying to do:
Have a style input where type=file(not a boring browse button) & relay the click to the actual input?
My actual input which works:
<input id="fileUpload" type="file" Runat="server" NAME="fileUpload"/>
<asp:button id="btnSave" OnClick="bt1Clicked"
runat="server" Text="Upload File"></asp:button>
<asp:label id="lblMessage" runat="server"></asp:label>
My styled button:
<a onclick="$(\'btnSave\').click(); return false;" href="#">test</a>

Not sure what your aiming at but this should work
<a onclick="$('<%= btnSave.ClientID %>').click(); return false;"
href="#">test</a>
Why? Because by default, asp.net gives controls its own id, which is defined by ClientIdMode. See also System.Web.UI.Control.ClientID
In my humble opinion, this would be a neater solution:
<a id="btnRelay" href="#">test</a>
Hook it up with JQuery separately, so your code isn't mangled with your html.
$('btnRelay').click(function(event){
event.preventDefault();
$('<%= btnSave.ClientID %>').click()
}

Scroll down to the specific part of page when a linkbutton is clicked using MaintainScrollPositionOnPostBack

I have a lengthy asp.net page. An HTML table in the page has a link with <a>. when the link is clicked the page shows the textbox using javascript and takes me to the top part of the page. Instead, i want to see the part of the page that has the link and textbox. It should automatically scroll down to that part once the page refreshes. How is that possible?
I have tried using Linkbutton instead of but have issues with javascript.
Here is the code.
<script type="text/javascript">
$(document).ready(
function()
{
$("#aChangeDefault").click
(
function()
{
alert('hi');
//$("#<%=trChangeLoc.ClientID %>").fadeIn(1000);
$("#<%=rowChangeLoc.ClientID %>").fadeIn(1000);
}
)
$("#btnClose").click
(
function()
{
$("#<%=rowChangeLoc.ClientID %>").fadeOut(1000);
if(document.getElementById("<%=divSearchResult.ClientID %>").style.display != "none")
{
$("#<%=divSearchResult.ClientID %>").fadeOut(1000);
}
//$("#<%=trChangeLoc.ClientID %>").fadeOut(10);
}
)
}
);
The Linkbutton is here :
<asp:LinkButton id="aChangeDefault" runat="server" style="font-size: 12px;font-family:Arial;vertical-align:bottom;" ToolTip = "Click here to set your town as default location" Text ="Change Location" > </asp:LinkButton>
And the portion that shows up when the link is clicked is here:
<input id="btnClose" type="button" class="closeButton2" language="javascript" onclick="return btnClose_onclick()" />
<div style="display: inline-block;">
<span class="searchheadder" style="color: #000000; padding-right: 8px; padding-top: 4px;">
LOCATION: </span>
<asp:TextBox ID="txtChangedLocation" onkeyup="doCapitalize();" runat="server" Height="19px"
Width="200px" CssClass="textBox" Style="margin-right: 10px;"></asp:TextBox>
<cc1:AutoCompleteExtender ID="ACE1" runat="server" TargetControlID="txtChangedLocation" ServicePath="../AutoComplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="2" CompletionSetCount="10" EnableCaching="true" CompletionInterval="0" ></cc1:AutoCompleteExtender>
<asp:Button ID="btnGetNewList" BorderWidth="0" CssClass="searchButton" runat="server" OnClick="btnGetNewList_Click" /> </div>
Appreciate all your help. Thank you!

MaintainScrollPositionOnPostBack only affects the position of the page in your browser when a PostBack occurs, and if you're using JavaScript you don't want a PostBack to happen. If you're doing everything in JavaScript, it sounds like the problem is that when you click a link, the browser's default behavior is to follow the link, even if it's to a location on the same page. In some browsers, for the click event to register on an <a> tag, the href property must have a value, so it's common practice to use a blank anchor name as the href:
<a onClick="MyJavaScriptFunction()" href="#">Click here</a>
What this is actually telling the browser to do is to call your function MyJavaScriptFunction() and unless that function evaluates to false, it will then follow the anchor to the top of the page, which is where href="#" takes you. You can either finish your onClick with return false; or else change your JavaScript function to always return false, either way it will keep the browser from following the link:
<a onClick="MyJavaScriptFunction();return false;" href="#">Click here</a>

I'm not sure I understand what you're trying to do, but if the page is reloading perhaps you can use a named anchor to have the browser go to the section of the page you want automatically.