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?');" />
Related
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.
I am facing a problem with jquery modal Dialog box. I want the modal box to show only when my data is successful saved to database. I am using c# and asp.net, and on backend i am using Sql server 2008 R2. Currently my data is successfully entering and i am showing "the data is successfully saved on a label" after clicking on a button , but i want to show a modal box only when i click the button and my data is saved .
I have created this script
$("#Btndiag").click(function () { $("#myModal").modal(); });
and on content page body i have written this
<asp:Button ID="Btndiag" runat="server" Text="show dialog" onclick="Btndiag_Click1" />
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Settings</h3>
</div>
<div class="modal-body">
<p>Here settings can be configured...</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
To achieve what you want, you have to process the data in the back end, and then have the ASP.NET Framework execute a script for you.
To accomplish this, you use ClientScriptManager.RegisterClientScriptBlock during full page postbacks, or ScriptManager.RegisterClientScriptBlock if the controls are inside of an UpdatePanel.
C# code:
protected void Btndiag_Click1(object sender, EventArgs e)
{
// process database
// verify results
if (success)
{
ClientScriptManager.RegisterClientScriptBlock(this, "Btndiag_Click1", "$('#myModal').modal();", true);
}
}
Remember that if the button and the modal div are inside of an UpdatePanel, replace ClientScriptManager.RegisterClientScriptBlock with ScriptManager.RegisterClientScriptBlock.
Finally, just as a last informational note...your script ($("#Btndiag").click(...)) will not work because ASP.NET changes element Ids when rendered as HTML.
You'd have to work it in the following manner:
$("#<%= Btndiag.ClientID %>").click(function () { $("#myModal").modal(); });
Please note that you do not need to do anything with the button's click event. You want the framework to automatically run your scrip after the postback.
I am placing some ASP.NET html elements(that upload a file) inside a JQuery Dialog.
My Problem: When I click the button to upload the file, nothing happens. I create the query dialog dynamically AFTER the page has loaded. My solution is to place the HTML/ASP elements(for uploading a file) in a div at the bottom of the body of the page & set its display to none.
Then upon opening the dialog, I move the HTML/ASP elements into the JQuery dialog. But my problem is that when I click my ASP.NET button to upload the file from within the dialog, nothing happens?
Note if I click the button whilst its outside the JQuery dialog is sucessfully uploads the file.
Whats going wrong & how do I fix this? Is there an easier way to add ASP.NET code to a JQuery dialog AFTER the page has loaded?
This sits in the body
<div id="test">
<input class="ui-button ui-widget ui-state-default ui-corner-all
ui-button-text-only"
style="display: inline-block;" id="fileUpload" type="file" Runat="server"
NAME="fileUpload"/>
<asp:button id="btnSave" OnClick="bt1Clicked" style="display: inline;"
class="ui-button ui-widget ui-state-default ui-corner-all
ui-button-text-only"
runat="server" Text="Upload File" ></asp:button>
<asp:label id="lblMessage" runat="server" style="height:20px;width:390px;"
</asp:label>
</div>
Then on dialog open I grab the above HTML & move it into the dialog:
$(this.dialog).dialog('open' function()
{
var e = $("#test");
$(body).remove(e);
$(this).append(e);
});
jQuery UI dialog creates the dialog elements at the very end of the document, right before the closing </body> element. So when you open your dialog and move your content div#test into the dialog, it is outside the <form> and does not work anymore with asp.net which requires it.
Try to create your dialog and move it back inside the <form> element:
$("#myDialog").dialog({
...
}).parent().appendTo($("form"));
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.
I use an ajax ModalPopupExtender on many pages to display confirmation dialog.
So i would like to reuse same code on all pages by placing it in a use control.
But I'm not sure it it possible to access this user control from a javascript (I don't want server side operations).
This is the code that is responsible for popup display, that i want to place inside user control:
<script language="javascript" type="text/javascript">
var _source;
var _popup;
var _btn;
var _div;
function showConfirm(source, btnID, theDiv) {
this._source = source;
this._btn = btnID;
this._div = theDiv;
document.getElementById(btnID).click();
document.getElementById(theDiv).style.visibility = 'visible';
}
function okClick() {
document.getElementById(_div).style.visibility = 'hidden';
__doPostBack(this._source.name, '');
}
function cancelClick() {
document.getElementById(_div).style.visibility = 'hidden';
this._source = null;
}
</script>
<cc1:ModalPopupExtender ID="modal" runat="server"
TargetControlID="theButton" PopupControlID="div"
OkControlID="btnOk" OnOkScript="okClick();" CancelControlID="btnNo"
OnCancelScript="cancelClick();" BackgroundCssClass="modalBackground" />
<div id="div" runat="server" align="center" class="confirm" style="display: none">
<img align="absmiddle" src="../images/warning.jpg" />Are you sure you want to delete this item?
</br>
<asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" />
<asp:Button ID="btnNo" runat="server" Text="No" Width="50px" />
</div>
And on the "hosting" page, I want to assign JS to a buttons that will trigger the popup:
This is the code that i have now (and should be adopted to the user control):
string s = string.Format("showConfirm(this,'{0}','{1}');return false;", theButton.ClientID, div.ClientID);
btn.OnClientClick = s;
It's possible to call the modal popup extender from javascript as the modal popup control is just another DOM element. All you need to know is a selector which can select the item.
To "show" your modal popup extender from javascript all you will need to do is add some script to your master-page, user-control or page which displays the dom element which is the modal popup extender.
Alternatively you can use a javascript framework which has many other styles of modal dialog which are equally (if not more) useful than the ajax modal popup extender. This is probably more relevant to what you are trying to achieve considering your don't want to use ASP.NET's server side code capabilities.