I'm new to web programming with .NET.
I am developing a web page with webforms, and I want at a certain moment to programmatically show a modal window, for the user to accept or cancel, according to a question. Exactly what does the "confirm" function of JavaScript.
I tried to get it calling a JavaScript function:
Page.ClientScript.RegisterStartupScript (this.GetType (), "CallMyFunction", "MyFunction()", true);
But I need to do it without reloading the page, and I also need to control if the user has accepted or canceled and I do not know how to do it.
I've also tried getting it using the ModExPopupExtender control from DevExpress.
Can someone tell me a simple way to get what I want?
I can not understand how something so usual in web programming, and that PHP + javascript would not pose any problem can be so complicated.
All start in a one-button event on the code behind:
protected void btn1_Click(object sender, EventArgs e)
{
//I make a series of checks
//If certain conditions I want to show the confirm
//According to the user has chosen ok or cancel will perform a certain action
}
Onclientclick does not help me because before launching the "confirm" I have to do some checks on the server side.
Thank you very much.
You can use OnClientClick which is a property on most web controls.
I like to just bring up a simple confirm() dialog which executes the server code if the user clicks OK and does nothing if the user cancels the action:
<asp:Button runat="server" ID="btnSave" Click="btnSave_Click" Text="Save"
OnClientClick="return confirm('Are you sure you want to do this thing?');" />
You can do other things with it as well, but the key thing to remember is that anything you do in OnClientClick will happen before the page gets posted back to the server.
This is also perfectly valid:
<asp:Button runat="server" ID="btnSave"
OnClientClick="showModalConfirm('some message goes here');" ... />
<script>
function showModalConfirm(msg)
{
$(".modal .message").innerHtml(msg);
$(".modal").Show();
}
</script>
You can set the action that OnClientClick should perform in your codebehind in exactly the same way:
protected void Page_Load(object sender, EventArgs e)
{
btnSave.OnClientClick = "return confirm('Are you sure you want to do this thing?');";
}
You can use below code in c# to call javascript function. Below code will execute afterpostback() javascript function:
ClientScript.RegisterStartupScript(GetType(), Javascript, "javascript:afterpostback();", true);
And you can write code in javascript function to display any div or popup:
<script language="javascript" type="text/javascript">
function afterpostback() {
//Here you can write javascript to display div/modal
}
</script>
One way I've handled this previously was to have 2 buttons on the page. The first would be initially visible and labeled "Submit". The second would be initially hidden and labeled "Confirm". The "Submit" button would postback upon click and perform your server side checks/validation. If those checks failed, an appropriate error message would be displayed. If those checks passed, an appropriate "Please confirm your submission"-type message would be displayed, the "Submit" button would become hidden, and the second "Confirm" button would become visible. When that Confirm button was clicked, it would postback again and fully submit.
EDIT: I forgot to mention, there's a bit more to this that occurred to me after I initially posted. You'll have to protect the fields from being edited in the event the server-side verification is successful as you obviously don't want the user changing values and then clicking the Confirm button. That means disabling all the input controls - which could be a pain if you have a lot. You also have to give them a way to (intentionally) Edit in case the server side verification passes, you display the Confirmation, and they change their minds - so basically you'd need a third "Cancel/Edit"-type button that would put the form back in edit mode and show your initial Submit button.
Related
I have got a checkbox and want to display the confirmation message when it is clicked
I added the event binding in Code Behind file as below.
chkSMTLock.Attributes.Add("onclick", "return ConfirmSMTLock();");
The following is my HTML code for chkSMTLock
<asp:CheckBox ID="chkSMTLock" runat="server" AutoPostBack="true" OnCheckedChanged="chkSMTLock_CheckedChanged" Text="SMT Lock" />
Here is my javascript:
function ConfirmSMTLock() {
var r = confirm('Are you sure that you want to SMT lock/unlock this account?');
console.log(r);
return r;
}
When I run it, I can see the confirmation values (true/ false) in the browser console logs, but, it's not calling any server side code.
My server side code is very simple with logging...
protected void chkSMTLock_CheckedChanged(object sender, EventArgs e)
{
Utils.Debug("chkSMTLock_CheckedChanged");
}
When I remove javascript event binding for the checkbox, it executes the ServerSide event successfully. But When I put it back, it stops working.
How can I use the confirmation message box to control it?
Your validation is too far down the chain. As you've got AutoPostBack=true, you're basically submitting a form when clicking the checkbox, your validation wants to be at the form level.
Form.Attributes.Add("onclick", "return ConfirmSMTLock();");
And in ConfirmSMTLock() check the status of the checkbox to see if you need to fire the confirm dialogue. That's the simplest way I can think of.
On a side note: if you do this:
chkSMTLock.Attributes.Add("onclick", "return false;");
The checkbox becomes untickable
I have found out an answer. Since AutoPostBack = true, it will automatically send a post back to the server. So, first you need to delete that attribute from the html code.
<asp:CheckBox ID="chkSMTLock" runat="server" OnCheckedChanged="chkSMTLock_CheckedChanged" Text="SMT Lock" />
Then implement the PostBack behaviour by using the __doPostBack function of ASP.Net.
function ConfirmSMTLock() {
var r = confirm('Are you sure that you want to SMT lock/unlock this account?');
if (r == true)
{
__doPostBack("chkSMTLock", '');
return true;
}
return false;
}
Open Sasame!!!
In my asp.net web page, there are a few of buttons and checkboxs. They all can cause postback.
Can I detect which control is clicked? Because I will add code for if clicked a button then do something.
I saw that some examples are done with Jquery.
Can we just do it in C#?
Thanks.
Why are you not just using the click behavior of the button:
ASPX
<asp:Button id="Button1"
Text="Click here for greeting..."
OnClick="GreetingBtn_Click"
runat="server"/>
CS
void GreetingBtn_Click(Object sender,EventArgs e)
{
}
reference here
You could check Request.Form["_EVENTTARGET"] for the control that generated the postback
well if each of the buttons submit a key value to the post or get parameters, and theyre all different it should be pretty easy! :)
localhost/home.html?button=clicked&link=selected
the above is an example of a get parameter url, you can use jquery to get those, or if its a post you would have access to them in a similar way...the previous page would have to have been a form though.
You could eventually do it by checking Request.Form["_EVENTTARGET"] but that is highly unusual and certainly not necessary.
Whatever you need to do, you can do it in the Click event handler of the given control.
You can set a server hidden control specifying the action (checkbox/textbox/button clicked) using javascript & retrieve that server control in page load to check its action & add your code for that action
Hi everyone I have a web form in which I am having a button on clicking which data back up is being taken, I used the following javascript :
<script language="javascript" type="text/javascript">
function showPleaseWait() {
document.getElementById('PleaseWait').style.display = 'block';
}
</script>
<asp:Button ID="btnTakebackup" runat="server" Text="Take Backup" Enabled="true"
onMouseDown="showPleaseWait()" CausesValidation="false" />
<div id="PleaseWait" style="display: none;">"Please Wait Backup in Progress.."</div>
Hi I am using a button to take a back up.
Now I want to show a message in btnTakebackup_Click() event, whether Back up was successful or not.
I used Response.Write("<script>alert('abcd');</script>"); in btnTakebackup_Click() event.
But the problem is that I want to show the page also, which is not showing instead white background is showing.
Thanks in advance...
To show a message box alert should be able to write out a new script to the response stream:
var script =
"<script type=\"javascript\">" +
"alert(\"Backup in progress, don't go!\");" +
"</script>"
Response.Write(script);
However much this is distasteful, I suppose it is sometimes "necessary".
You can add client side event handlers to ASP controls:
How to: Add Client Script Events to ASP.NET Web Server Controls
Cheers.
Do you really want it to be an alert? (You should know that they lock up the whole browser not just the tab your page is on), do your users really need to acknowledge the backup success by clicking ok or just be informed of it?...
I suggest you have a div on the page that says "Backup successful". The visibility of which can be set by a boolean property BackUpSuccess which you can set to true in the code behind you mention.
<div id="backUpSuccess" <%=BackUpSuccess ? "" : "style='display:none;'"%>>
Backup was successfull
</div>
...you can style the div as you like in your .css file to get attention.
If you really do want an alert you could run some JavaScript on page load to check the content of a hidden input that you set server side in similar fashion...but running javascript on page load is tricky...unless your using jQuery and then you will know it's very easy.
From your question, I understood that after clicking on the button, the data back up is happening, but the alert is not displaying as soon as you clicked the button.This is because you are calling the JavaScript in the button click event which will be fired only after all the code in the button click is executed.I suggest you to add a JavaScript function in the .aspx source page it self and call the JavaScript function as shown below:
<script ...>
function xyz()
{
alert('Please Wait');
}
</script>
and in button declaration
<asp:button id='btn_submit' runat="server" OnClientClick="return xyz();" />
I am trying to display a "Yes / No" messagebox from codebehind in C#. I want to call an "AddRecord" procedure if the user clicks "Yes", and do nothing if the user clicks "No".
Ideally, I want to use the code below, but from codebehind:
OnClientClick = "return confirm('Are you sure you want to delete?');"
I search on SO and google, but was not able to find anything helpful.
on your Add Record button, just do the following:
<asp:button ID="AddRecordbutton" runat="server" Text="Add Record"
onclick="AddRecordButton_Click" onclientclick="return confirm('add record?');" />
In your code behind, just put the add record code in your AddRecordButton_Click event handler. It will only be called if they click Yes on the popup.
Alternatively, you could have your codebehind assign the onclientclick code when the button is initially rendered.
For example:
protected void Page_Load(object sender, EventArgs e) {
AddRecordButton.OnClientClick = #"return confirm('Add Record?');";
}
No, you don't.
You seem to be misunderstanding that basic concept of webpage.
An ASPX page is a short program, which starts-up, generates seem HTML, and then terminates. The HTML is then sent across the Internet to the users browser. EVERYTHING you do in a codebehind must be complete before the user ever sees any of it.
You really want a javascript dialog box. (Actually, from what you describe, you could just create a messagebox-looking div in HTML with a standard HTML form on it.)
To display an actual messagebox you will need javascript as it is done on the client-side. For whatever reason, if you cannot use javascript, you could do what AEMLoviji has suggested and "fake" it with some cleverness.
Note that you do not need jQuery to display a messagebox, simple javascript will suffice.
If you use the Ajax Control Toolkit Modal Popup Extender on a Panel with your two buttons this will fire an event on the server which can be handled and execute whichever method/functions you wish
See here for an example
Use RegisterStartupScript
ScriptManager.RegisterStartupScript(this, GetType(), "unique_key",
"element.onclick = function(){ return confirm('Are you sure you want to delete?'); };",
true);
To show yes/no
<script>
function AlertFunction() {
if (confirm('Are you sure you want to save this thing into the database?')) {
$('#ConfirmMessageResponse').val('Yes');
} else {
$('#ConfirmMessageResponse').val('No');
}
}
</script>
to handle it from .net side:
string confirmValue = ConfirmMessageResponse.Value;
if (confirmValue == "Yes")
{...}
I have an ASP.NET page with two radio buttons. The buttons use an auto-postback to run server side logic. If you select the second button, the page posts back and correctly displays a message that the second button is selected. If the browser back button is now clicked, the state of button 2 stays checked while the message reverts to saying that button one is checked. This results in a situation that is obviously undesirable because the state of the radio buttons and message are now out of sync. I know this is a caching issue but I find it odd that the browser remembers the previous state of the label but not the previous state of the radio button.
What is the best way to handle this situation? It's undesirable in this situation to disable cache or the use of the back button.
The following code example exhibits this behavior:
[Form:]
<asp:RadioButton ID="rb1" runat="server" AutoPostBack="true" Text="Button1" OnCheckedChanged="rb_CheckedChanged"
GroupName="rbgroup" Checked="true" />
<br />
<asp:RadioButton ID="rb2" runat="server" AutoPostBack="true" Text="Button2" OnCheckedChanged="rb_CheckedChanged"
GroupName="rbgroup" />
<br />
<hr />
<asp:Label ID="lbl1" runat="server">Button 1</asp:Label>
[Code Behind:]
protected void rb_CheckedChanged(object sender, EventArgs e)
{
if (rb1.Checked == true)
lbl1.Text = "Button 1";
else
lbl1.Text = "Button 2";
}
WYour issue is very simple.
In your markup you can use the checked="false" or whatever asp.net equivalent....
On page load make sure that you use the if(!IsPostBack){ //set your group value. } to set the radio button's values from a data source or default values the first time the page loads. Every subsequent time will be excluded.
So here is an example:
if(!IsPostBack)
{
rb1.Checked = false;
rb2.Checked = false;
//or alternatively set the value from server data
}
In the case of hitting the back button the browser has already cached the page. Since neither of the check boxes are flagged as checked="false" in your markup or in your code, the browser will load the state of the page as it has it from cache.
If you want to change which radio button is selected, use #2 to set the value of the group since PageLoad event executes before pre-render and render.
Hmm - that is funny.
I can reproduce this. And what surprises me is that the source (view source of browser) shows the correct radio button checked (Button 1). The browser (I tested IE and FF) does not seem to render the source correctly (or not redraw the radio button; or is not showing the correct source).
Now the thing with the back button is a bit tricky. Mainly because there is not much you can do about it... HTTP is and will stay stateless and the back button on the client is "far away" from your web server. You cannot control it.
As an article about a similar topic you could read A Thorough Examination of "Disabling the Back Button".
What I am trying to say is that although I do not understand why the browser seems to be rendering something different from what the source tells it, I fear you are fighting a losing battle here.
The only thing I can currently think of would be to find some smart JavaScript that I am unable to provide that "does something" to make the browser redraw the screen after the user clicked the back button.
You can try this.
<script type="text/javascript">
$(document).ready(function () {
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward") {
location.reload(true);
}
});
</script>