We Keep Coding

Is there a way to active a .cs function and a javascript function with the same button ( both onclick)?

Problem
I want to create a modal "Forgot Password" , in this modal there is a button "send code" and when you click on that button it should activate the .cs function (in this function it will create a random code and will mail the code to the user) and the button "Send code" should also activate the javascript function ( this function will close the current modal and go to the next modal) at the same time.
What I already tried
I tried:
To put the in the same onclick event ,
Put the cs function onserver click and the JS function onclick
Tried an a tag button
and an input button
Button
<asp:Button ID="SendCode" Text="Send code" runat="server" OnClick="VerzendCode;b();" CssClass="btn btn-default" Visible="true" />
CS function
public partial class Site1 : System.Web.UI.MasterPage
{ protected void VerzendCode(object sender, EventArgs e)
{
string code = generateCode();
MailMessage mail = new MailMessage("demert.deswert#gmail.com", TxtEmailWW.Text);
SmtpClient client = new SmtpClient();
client.UseDefaultCredentials = false;
client.DeliveryMethod = SmtpDeliveryMethod.Network;
client.Port = 587;
client.Host = "smtp.gmail.com";
client.EnableSsl = true;
client.Credentials = new System.Net.NetworkCredential("demert.deswert#gmail.com", "789632145");
mail.BodyEncoding = Encoding.UTF8;
mail.DeliveryNotificationOptions = DeliveryNotificationOptions.OnFailure;
mail.Subject = "Wachtwoord vergeten";
mail.Body = "Beste dit is de code om uw wachtwoord te resetten";
mail.Body += Environment.NewLine + code;
client.Send(mail);
}
}
JS function
$(function b() {
$("#BtnVerzendcode").click(function () {
$('#WWReset').modal('show');
$('#WWvergeten').modal('hide');
});
});
Expection
I expect that both functions active at the sime time and with the same button

You may want to use AJAX which stands for Asynchronous JavaScript and XML. Here is an example of what you might need:
$(function b() {
$("#BtnVerzendcode").click(function () {
$('#WWReset').modal('show');
$('#WWvergeten').modal('hide');
var url = "#Url.Action("VerzendCode","Site1")";
var dataToSend = { };
$.ajax({
url: url,
type:'GET',
success: function(result){
$('#WWReset').text(result);
}
});
});
});
This will send an asynchronous request to your controller action therefore the javascript and C# function will basically run at the same time.

So the point is to run front end logic, and then within the JavaScript call the back end logic.
HTML
<asp:Button ID="SendCode" runat="server" Visible="false" disabled OnClick="VerzendCode"/>
<button id="sendCodeBtn" class="btn btn-default" onclick="b();">Send Code</button>
JS/JQuery:
function b(){
$('#sendCodeBtn').attr("disabled", "disabled");
$('#SendCode').prop('disabled', false);
setTimeout(function () {//timeout is to help avoid double click
$('#SendCode').trigger('click');
}, 500);
}
C#
protected void VerzendCode(object sender, EventArgs e)
{
...
}

ASP.NET Executing JavaScript Confirm alert message in C# code behind only if condition is satisfied

I am using a confirmation window that will add a new value to database if the user clicks OK in the popup window. Also i have to verify a specific criteria before that. I have button and text box and the text box contains a required field validator. So if i click the button this validator fires first.
I will enter a number in this text box and press add, it will fetch a name value corresponding to this number from database and if name is found then it should ask a confirmation "Do you want to add this name?" and if name is not found then it should just popup a alert saying "name not found". If number value is less than 6 then it will show another popup saying "number not valid". I have done this as given below.
ASP.NET
<asp:TextBox ID="text_add" runat="server" MaxLength="6"></asp:TextBox>
<asp:RequiredFieldValidator ID="required_add_" ControlToValidate="text_add" ErrorMessage="Required" runat="server">Required</asp:RequiredFieldValidator>
<asp:Button ID="button_add" runat="server" Text="Add" OnClientClick="Confirm()" OnClick="button_add_Click" />
JavaScript
<script type = "text/javascript">
function Confirm() {
if (Page_ClientValidate()) {
var confirm_value = document.createElement("INPUT");
confirm_value.type = "hidden";
confirm_value.name = "confirm_value";
if (confirm("Do you confirm?")) {
confirm_value.value = "Yes";
} else {
confirm_value.value = "No";
}
document.forms[0].appendChild(confirm_value);
}
}
</script>
C#
protected void button_add_Click(object sender, EventArgs e)
{
if (text_add.Text.Length < 6)
{
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alertMessage", "alert('Number not valid!')", true);
}
else
{
//fetch name from DB
if (//name found)
{
string confirmValue = Request.Form["confirm_value"];
if (confirmValue == "Yes")
{
//add the name
}
}
else
{
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alertMessage", "alert('Name not found!')", true);
}
}
}
Here what happens is whenever i enter a number into text box and click the button, the Confirm() function is executed at first even if the number is less than 6 digits and in case i enter 6 digits and the name is not found in database same way the Confirm() function is executed. If i enter number less than 6 digits the confirm box comes first and after that the alert saying "number not valid" comes. How can i fire the confirm() function only if the conditions are met. I want to fire the confirm() function only if the button press event goes into the if (//name found) condition.
EDIT
I have removed the OnClientClick from the button and then changed the C# code to the following
protected void button_add_Click(object sender, EventArgs e)
{
if (text_add.Text.Length < 6)
{
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alertMessage", "alert('Number not valid!')", true);
}
else
{
//fetch name from DB
if (//name found)
{
ScriptManager.RegisterStartupScript(this, typeof(string), "confirm", "Confirm();", true);
string confirmValue = Request.Form["confirm_value"];
if (confirmValue == "Yes")
{
this.AddData(sender, e);
}
}
else
{
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alertMessage", "alert('Name not found!')", true);
}
}
}
protected void AddData(object sender, EventArgs e)
{
// add data
}
I have made a seperte function to add data. I have added the ScriptManager to open confirm box and removed the OnClientClick in button. Now when i press the button the confirm box opens only if all conditions are satisfied. But when i press OK in confirm box nothing happens. The AddData function is not executed.

Change your confirm function to this:
function Confirm() {
if (Page_ClientValidate() &&
document.getElementById('text_add').value.length >5) {
var confirm_value = document.createElement("INPUT");
confirm_value.type = "hidden";
confirm_value.name = "confirm_value";
if (confirm("Do you confirm?")) {
confirm_value.value = "Yes";
} else {
confirm_value.value = "No";
}
document.forms[0].appendChild(confirm_value);
}
else return false;
}
And change The
onClientClick=Confirm();
to this:
onClientClick= return Confirm()
to avoid submit under 6 length text.

You must have a hidden field between your post backs that shows it is in first post back or after confirmation:
<asp:HiddenField ID="isReadyForSave" runat="server" Value="false"/>
And change your code:
protected void button_add_Click(object sender, EventArgs e)
{
if(isReadyForSave.Value == "true" && Request.Form["confirm_value"] == "yes")
{
AddData();
isReadyForSave.Value = "false";
return;
}
if (text_add.Text.Length < 6)
{
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alertMessage", "alert('Number not valid!')", true);
}
else
{
//fetch name from DB
if (//name found)
{
ScriptManager.RegisterStartupScript(this, typeof(string), "confirm", "Confirm();", true);
isReadyForSave.Value = "true";
}
else
{
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alertMessage", "alert('Name not found!')", true);
}
}
}
And change you javascript confirm() function to this:
function Confirm() {
if (Page_ClientValidate() &&
document.getElementById('text_add').value.length >5) {
var confirm_value = document.createElement("INPUT");
confirm_value.type = "hidden";
confirm_value.name = "confirm_value";
if (confirm("Do you confirm?")) {
confirm_value.value = "Yes";
} else {
confirm_value.value = "No";
}
document.forms[0].appendChild(confirm_value);
return true;
}
else return false;
}

on buttonclick check if file exist then prompt message and revert

I have a scenario where I want to check if user adds data with same date and same region again, it should give him a prompt alert.
I tried this with code behind,like below:-
protected void btnSave_Click(object sender, EventArgs e)
{
DataTable dtExcel = new DataTable();
dtExcel.Clear();
string StrCount = String.Empty;
string connString = "";
HttpPostedFile File = FileUpload1.PostedFile;
string strFileType = Path.GetExtension(FileUpload1.FileName).ToLower();
string path = FileUpload1.PostedFile.FileName;
string Filename = path.Substring(path.LastIndexOf("\\") + 1, path.Length - path.LastIndexOf("\\") - 1);
path = Server.MapPath(#"~/Excels/" + "/" + Filename.ToString());
File.SaveAs(path);
if (strFileType.Trim() == ".xls")
{
connString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + path + ";Extended Properties=\"Excel 8.0;HDR=Yes;IMEX=2\"";
}
else if (strFileType.Trim() == ".xlsx")
{
connString = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + path + ";Extended Properties=\"Excel 12.0;HDR=Yes;IMEX=2\"";
}
string query = "SELECT * FROM [Sheet 1$]";
OleDbConnection conn = new OleDbConnection(connString);
conn.Close();
if (conn.State == ConnectionState.Closed)
conn.Open();
OleDbCommand cmd = new OleDbCommand(query, conn);
OleDbDataAdapter daExcel = new OleDbDataAdapter(cmd);
daExcel.Fill(dtExcel);
conn.Close();
DataTable DtMain = CF.ExecuteDT("select Tran_type, Order_Date, Region_Mkey from WMS_Future_Del_Order_Hdr where Tran_type = '" + CmbTypeOfAsn.SelectedValue + "' and Order_Date = convert(datetime,'" + TxtEdate.Value + "',103) and Region_Mkey = '" + ddlRegion.SelectedValue + "'"); // checks the duplicate records here
if (DtMain.Rows.Count > 0)
{
ClientScript.RegisterStartupScript(this.GetType(), "SuccessScript", "myTestFunction()", true);
}
Also see my function for prompting the alert for duplicate message
function myTestFunction() {
if (confirm('Are you sure you want to override the file ?')) {
return true;
}
else {
return false;
}
}
but what happens here is even after cancel click, the excel file is uploaded and gets saved. I dont know why

Although Abbas Kapasi's solution based on AJAX is good one (and you do not want to/can not use the solution based on CheckBox as I suggested in my other post codebhind-javascript-alert-for-yes-and-no-not-working-exactly), if you are not familiar with AJAX or don't want to use AJAX then you may achieve it using following approach. It may seem a bit odd but you may modify it according to your requirements:
I am splitting the code to upload and find existing file/record in one procedure and the code to write/overwrite the records in another sub-procedure.
Then I am using two LinkButtons, LinkButtonLoad and LinkButtonOverwrite.
LinkButtonLoad will be attached to the call the main procedure which uploads and finds existing file/record. LinkButtonOverwrite will call the procedure to write/overwrite the records. LinkButtonOverwrite will remain hidden from the user.
In the first procedure if the system finds existing file/record it will show a client side prompt to the user to overwrite or not. If the file/record does not exist it will call second sub-procedure to write the records.
On client side, if the prompt is displayed for existing file/record and the user selects Cancel/No the process will not proceed. If the user selects OK/Yes then I'll be calling the procedure linked to the LinkButton2 to overwrite the records.
Now putting it all together:
In aspx/front end
<asp:LinkButton ID="LinkButtonLoad" runat="server" Text="Load Records" CssClass="button" ... />
<asp:LinkButton ID="LinkButtonOverwrite" runat="server" Text="ow" CssClass="button hidden" ... />
I'm using hidden CSS class to hide the button .hidden {display: none;}. Do NOT use visible="false" attribute, it'll not be available on the client side.
JavaScript on client side:
function myTestFunction() {
if (confirm('Are you sure you want to override the file ?')) {
// get the action attribute of the hidden LinkButtonOverwrite here and call it on OK
// as an alternative you may also invoke the click event of this button
var defaultAction = $('#<%=LinkButtonOverwrite.ClientID %>').prop("href");
window.location.href = defaultAction;
}
else {
return false;
}
}
LinkButtonLoad in code behind:
protected void LinkButtonLoad_Click(object sender, EventArgs e)
{
//==============================================================
// YOUR CODE TO UPLOAD THE FILE, SAVE IT SO WE MAY USE IT AGAIN
//==============================================================
if (DtMain.Rows.Count > 0)
{
ClientScript.RegisterStartupScript(this.GetType(), "SuccessScript", "myTestFunction()", true);
}
else
{
MySubToOverwrite();
}
}
LinkButtonOverwrite in code behind:
protected void LinkButtonOverwrite_Click(object sender, EventArgs e)
{
//===========================================================
// AS THE FILE IS ALREADY UPLOADED IN LINKBUTTONUPLOAD_CLICK
// YOU MAY ACCESS IT AND PERFORM REQUIRED OPERATIONS
//===========================================================
MySubToOverwrite();
}
MySubToOverwrite() code in behind:
private void MySubToOverwrite()
{
//==========================================================
// OVERWRITE YOUR RECORDS HERE
// FROM THE FILE ALREADY UPLOADED IN LINKBUTTONUPLOAD_CLICK
//==========================================================
}

Detecting duplicate records
There are a few ways you can do this. Just going to touch on the big picture here, in order of my personal preference:
Easiest method: Don't check. Prompt first. Provide a checkbox up front.
Use 2 Ajax requests: one to check for existing record, and another to save the file (if user said "OK" or if file not yet exists). Challenge: multiuser environments.
Multi-step POST back. Server code injects a dynamic control (or shows a hidden static one) that prompts user to overwrite. Ugly, but does not require JS. You may remember this from the '90s.
Versioning: more advanced, more complex, but for Enterprise systems this is the way to go. Do not overwrite files with same identifier; store a different version of it. Then you get a nice history and audit trail of who changed it. Makes it easy to go back to fix mistakes, blame people, etc.
Canceling the PostBack (if using option 3 or other postback method)
You need to bind to the correct button, and to prevent POST to the server (AKA "postback") you must return false in either
the click event handler of the rendered input type="button"
or
the submit event handler if the form
You can accomplish this by embedding the return value to myTestFunction() in the asp:Button itself:
<asp:Button ID="btnSave" runat="server" Text="Save"
OnClientClick="if(!myTestFunction()){return false;}"
OnClick="btnSave_Click" />
<script>
function myTestFunction() {
return confirm('Override the file?');
}
</script>

use ajax function with webservice to check the same data and region
Submit button code
<asp:Button ID="btnupload" runat="server" OnClientClick="javascript return checkData()"
Text="Upload" OnClick="btnupload_Click"></asp:Button>
Javacript
<script>
function checkData() {
$.ajax({
type: "POST",
url: "demo.aspx/functionName1",
data: "{parameter1:'" + param1 "',parameter2:'" + param2 + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if(msg.d == 'Yes'){
if (confirm('Are you sure you want to override the file ?')) {
return true;
}
else {
return false;
}
}
else{
return true;
}
}
});
}
</script>
C# Code
using System.Web.Services; --- use this class
[WebMethod]
public static string functionName1(string parameter1, string parameter2)
{
------------------------------;
if(check Condition)
return "Yes";
else
return "No"
}

In reality, you just need the following to make it work. Use RegisterOnSubmitStatement instead of RegisterStartupScript. It would let you add script that executes in response to the button's onclick event. The script is executed before the button event is invoked, and gives you an opportunity to cancel the event.
Code-behind:
protected void Page_Load(object sender, EventArgs e)
{
// You can place this in any method where you want to do the validation.
String scriptText =
"return confirm('Are you sure you want to override the file ?')";
ClientScript.RegisterOnSubmitStatement(this.GetType(),
"ConfirmSubmit", scriptText);
}
protected void btnSave_Click(object sender, EventArgs e)
{
}
Markup :
<asp:Button id="ConfirmSubmit" runat="server" OnClick="btnSave_Click"/>

How to call a backend C# function from front end Javascript function in ASP.NET

I am currently doing an unpaid internship in C# and Asp.net. My employer has asked me to write out a javascript function so as to tell the user if they are sure if they want to delete a record from the database before deleting it.
After some research I was able to write out the Javascript function to tell the user if they are sure they want to delete this record before actually deleting it from the database.
The javascript function works. However now I have the problem of how do I call the backend C# function which will actually delete the record from the database from the front end javascript function which I have just written?
Here is my code:
Javascript function:
function watchdelete()
{
if (confirm("Are you Sure You want to delete this Manufacturer?") == true)
{
__doPostBack('btnDelete_Click','');//"PageMethods.btnDelete_Click();
}
else { }
}
Front end part which calls the javascript client side code attached to the delete button:
<asp:Button ID="btnDelete" runat="server" Text="Delete" OnClientClick=" return watchdelete()" OnClick="btnDelete_Click1" />
Back End C# function which I want to invoke in order to delete the record from the database:
(Please note I will be happy as long as I call this function and it executes, you need not worry
about its internal workings too much. Thank you)
protected void btnDelete_Click(object sender, EventArgs e)
{
String com, command, findmodel;
if (txtManufactureName.Text != "") // If the manufacturer name is not null
{
if (txtManufactureName.Text == grdManufact.SelectedRow.Cells[1].Text) // And the manufacturer name must not be
{ // Changed from selected one
string strConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString2"].ToString();
try
{
using (SqlConnection conn = new SqlConnection(strConnectionString))
{
conn.Open(); // Connect to database
String moderated = (checkBoxModerated.Checked) ? "true" : "false";
findmodel = "SELECT * From VehicleModels WHERE ManufacturerID = '" + txtManID.Text + "';";
com = "SELECT * From VehicleManufacturer WHERE ManufacturerName = '" + txtManufactureName.Text + "' AND Ismoderated ='" + moderated + "';";
command = "DELETE From VehicleManufacturer WHERE ManufacturerName = '" + txtManufactureName.Text + "' AND Ismoderated ='" + moderated + "';";
SqlDataAdapter finder = new SqlDataAdapter(findmodel, conn);
DataTable dat = new DataTable();
int nummods = finder.Fill(dat);
if (nummods == 0)
{
SqlDataAdapter adpt = new SqlDataAdapter(com, conn);
DataTable dt = new DataTable();
int number = adpt.Fill(dt); // try to find record to delete
if (number == 0) // If there is no such record to delete
{ // Indicate this to user with error message
txtMessage.Text = "Sorry, there is no such record to delete";
}
else
{ // Otherwise delete the record
using (SqlCommand sequelCommand = new SqlCommand(command, conn))
{
sequelCommand.ExecuteNonQuery();
txtMessage.Text = "Manufacturer Deleted Successfully";
txtManufactureName.Text = ""; // Reset manufacturer name
txtDescription.Text = ""; // Reset Description
checkBoxModerated.Checked = false; // clear moderated checkbox
}
}
}
else
{
txtMessage.Text = "Sorry. You must delete associated models first.";
}
conn.Close(); // Close the database connection. Disconnect.
}
BindGrid(); // Bind Manufacturer Grid again to redisplay new status.
}
catch (SystemException ex)
{
txtMessage.Text = string.Format("An error occurred: {0}", ex.Message);
}
}
else
{
txtMessage.Text = "Sorry. You cant change the manufacturer name before deleting";
}
}
else
{ // Otherwise give error message if manufacturer name missing
txtMessage.Text = "Please enter a manufacturer name to delete";
}
}
Any ideas will be appreciated.

Let's simplified your validation function to:
function confirmDelete(){
return confirm("Are you Sure You want to delete this Manufacturer?");
}
Then your button with OnClientClick attribute will be something like
OnClientClick=" return confirmDelete()"
As long as your validation function returns false .NET will not submit your code the server.

To give people an understanding of how to call backend functions from client side Javascript I would like to put the answer here in my own words -> Simple plain English:
Step
1. Write your Javascript function and place it on the client side and enable scripts whatever, not going into too much detail here. See the code snippet below for an example
<script type = "text/javascript" >
function watchdelete()
{
return confirm("Are you Sure You want to delete this Manufacturer?");
}
Write your button or control front end code and ensure that your OnClientClick = the name of the javascript function you want to call plus the word return in front of it as in the example asp
code shown in the original post.
Ensure you fire up the backend C# function as per usual for example by double clicking on the button or control in design view of Visual Studio 2012 or 2013 or whatever so as to automatically build its backend function in the code behind page and code your backend function for what you want it to do obviously.
When you have done step 3 correctly you should have OnClick= whatever your backend C# function was.
Test your application. Once your front end javascript returns true it should automatically fire up
your backend function as long as you have put a return statement as per the front end code shown in the original post or similar.
Life can be simple if only you want it to be. The choice is yours.

asp.net delete popup using javascript and c#

I am bit struggling to understand how it works when you want to delete something using server side. I know how to use MessageBox but it is not ideal. I am advised to use popup on server side.
What I am trying to do is that when you click the button, popup should display to ask you if you are sure you want to delete it. If yes, delete it based on C# delete events. If no, cancel it. How to work with both of javascript and C#?
I got problem When I click the button, popup happens, and when i click yes, delete it which is working BUT when I click no, still delete it. How to handle with yes and no in C# or javascrpit? No idea how to do this.
Your excample code means alot to me. I need to understand. Thanks!!
Javascript
<script type='text/javascript'>
var result = confirm("Do you Want to Delete?");
if (result)
{
//do ajax call and delete from database
return true;
}
else
{
return false;
}
ASP.NET
<asp:Button runat="server" OnClick="btnDelete_Click" OnClientClick = " return confirm();" />
C#
protected void btnDelete_Click(object sender, EventArgs e)
{
//Delete operation
}

Html markup:
<asp:Button runat="server" OnClick="btnDelete_Click"
OnClientClick = " return myConfirm();" />
Js
<script type='text/javascript'>
function myConfirm(){
var result = confirm("Do you Want to Delete?");
if (result==true)
{
//do ajax call and delete from database
return true;
}
else
{
return false;
}
}
</script>

If you have a server button with both client and server events. You can check the client side, and decide weather the server side should be executed or not. for example :
add a CSS class to your button.
$('.CssClassOfYourButton').click(function (evt) {
if (condition)
return false;
// Post Back will not happen
}
if (confirm('Are you sure? \nDoing this will ......... .')) {
return true;
// if user clicks yes ,Post Back will happen and server side delete event is executed.
}
});

client side:
function confirm() {
var confirm_value = document.createElement("INPUT");
confirm_value.type = "hidden";
confirm_value.name = "confirm_value";
if (confirm("Do you Want to Delete?")) {
confirm_value.value = "Yes";
} else {
confirm_value.value = "No";
return false;
}
document.forms[0].appendChild(confirm_value);
}
On server side:
protected void btnDelete_Click(object sender, EventArgs e)
{
string confirmValue = Request.Form["confirm_value"];
if (confirmValue == "Yes")
{
}
else
{
}
}