Learn12 Learn12 - 7 months ago 95
Javascript Question

Calling a C# method on a input type submit button

I am having some trouble figuring out how to call a method I wrote in the .CS file that will update the user password in the database.

Here is my current form:

<form method="post" action="#" runat="server" name="edit_password_form">
<div id="edit_password_popup">
<table width="390" align="center" padding="10">
<tr>
<td><span class="error_field">*</span>Password:<br>
<input type="password" name="password_1" id="password_1" size="19" maxlength="30" autocapitalize="off" autocorrect="off" autocomplete="off">
</td>
<td><span class="error_field">*</span>Confirm Password:<br>
<input type="password" name="password_2" id="password_2" size="19" maxlength="30" autocapitalize="off" autocorrect="off" autocomplete="off">
</td>
</tr>

<tr>
<td><input type="submit" value="Add Password" id="add_pass" alt="Add Password" border="0"></td>
<td><input type="button" value="No Thanks" id="no_thanks" alt="No Thanks" border="0"></td>
</tr>
</table>
</div>
</form>


Should I maybe have the c# method in the .aspx file instead of the .aspx.cs?

I want the C# method to run when the add_pass button is clicked. Any ideas on how I can achieve that?

Answer

It seems like you are using ASP.NET Web Forms (since you have an actual ASPX file).

If that is the case, ASP.NET handles quite a bit of this for you and will actually perform a POST to itself, which allows its contents to be accessible in your code-behind.

You could consider replacing your existing submit button with an actual <asp:Button> that points to a specific method to hit in your code-behind when the form is posted :

<asp:Button ID="AddPassword" Text="Add Password" ... OnClick="AddPassword_Click"><asp:Button>

The OnClick event will handle mapping your Button being clicked to an event in your aspx.cs file that looks like :

protected void AddPassword_Click(object sender, EventArgs e)
{
        // This code will be executed when your AddPassword Button is clicked
}

If you replace your entire code with the related ASP.NET code, it would look something like the following section(s) :

YourPage.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="YourPage.aspx.cs" Inherits="YourProject.YourPage" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Password Checking</title>
</head>
<body>
<!-- This will post back to your YourPage.aspx.cs code-behind -->
<form id="form1" runat="server" name="edit_password_form">
<div id="edit_password_popup">
    <table width="390" align="center" padding="10">
        <tr>
            <td><span class="error_field">*</span>Password:<br />
                <!-- Replaced <input> elements with matching <asp:TextBox> controls -->
                <asp:TextBox ID="Password1" runat="server" TextMode="Password" size="19" maxlength="30" autocapitalize="off" autocorrect="off" autocomplete="off"></asp:TextBox>
            </td>
            <td><span class="error_field">*</span>Confirm Password:<br>
                <asp:TextBox ID="Password2" runat="server" TextMode="Password" size="19" maxlength="30" autocapitalize="off" autocorrect="off" autocomplete="off"></asp:TextBox>
            </td>
         </tr>
         <tr>
            <td>
                <!-- Updated submit button to proper <asp:Button> -->
                <asp:Button ID="AddPassword" runat="server" Text="Add Password" OnClick="AddPassword_Click" alt="Add Password" border="0"><asp:Button>
            </td>
            <td>
                <input type="reset" value="No Thanks" id="no_thanks" alt="No Thanks" border="0" />
            </td>
         </tr>
    </table>
</div>
</form>
</body>
</html>

YourPage.aspx.cs

public partial class YourPage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    // This will get called when your form is submitted
    protected void AddPassword_Click(object sender, EventArgs e)
    {
        // When your page is posted back, compare your passwords
        if(String.Equals(Password1.Text,Password2.Text))
        {
            // Your passwords are equal, do something here
        }
        else
        {
            // They aren't equal, do something else
        }
    }
}