jquery trigger c# function

Question

Below is my code, the code looks fine but fails to call my C# function after the input = '8'.

I have no idea what I did wrong. Please guide and help me, thanks so much.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication10._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <br />
    <div style="text-align: center">
        <br />
        <input autofocus="autofocus"  id="myinput1" />
        <br />
        <hr />
    </div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#myinput1").on('input', function () {
            if ($(this).val().length >= 8) {
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/fillfields",
                    contentType: "application/json; charset=utf-8",
                    data: '{input: "' + $("#myinput1").val() + '"}',
                    dataType: "json"
                });
                $('#myinput1').val("");
            }
        });
    });

    </script>
</asp:Content>

code:

using System;
using System.Web.UI;
using System.Data.SqlClient;
using System.Configuration;
namespace WebApplication10
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        [System.Web.Services.WebMethod]
        public static void fillfields(string input)
        {
            string constr = ConfigurationManager.ConnectionStrings["DbConnection"].ConnectionString;
            using (SqlConnection connection = new SqlConnection(constr))
            {
                connection.Open();
                using (SqlCommand command = new SqlCommand("TMS_INSERT", connection))
                {
                    command.CommandType = System.Data.CommandType.StoredProcedure;
                    command.Parameters.AddWithValue("@EMP_ID", input);
                    command.ExecuteNonQuery();
                }
                connection.Close();
            }
        }
    }
}

I've been stuck on this for few hours, tried to check browser console but it's blank, tried to put a breakpoint in my C# but it doesn't respond.

Akshey Bhat · Accepted Answer · 2016-10-13 06:39:02Z

2

Web Method should be static. Also there is no point using ExecuteReader since you are not reading anything from database. Instead use ExecuteNonQuery to execute the procedure.

        [System.Web.Services.WebMethod]
        public static void fillfields(string input)
        {
            string constr = ConfigurationManager.ConnectionStrings["DbConnection"].ConnectionString;
            using (SqlConnection connection = new SqlConnection(constr))
            {
                connection.Open();
                using (SqlCommand command = new SqlCommand("TMS_INSERT", connection))
                {
                    command.CommandType = System.Data.CommandType.StoredProcedure;
                    command.Parameters.AddWithValue("@EMP_ID", input);
                    command.ExecuteNonQuery();
                }
                //myinput1.Value = string.Empty;
                connection.Close();
            }
        }

Change your ajax function code as below:

     <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication10._Default" %>

    <asp:Content ID="headcontent" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {
            $("#myinput1").on('input', function () {
                if ($(this).val().length >= 8) {
                    $.ajax({
                        type: "POST",
                        url: "Default.aspx/fillfields",
                        contentType: "application/json; charset=utf-8",
                        data: '{input: "' + $("#myinput1").val() + '"}',
                        dataType: "json"
                    });
                    $('#myinput1').val("");
                }
            });
        });

    </script>
</asp:Content>

    <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <br />
        <div style="text-align: center">
            <br />
            <input autofocus="autofocus"  id="myinput1" />
            <br />
            <hr />
        </div>
    </asp:Content>

edited Oct 13, 2016 at 6:39

answered Oct 13, 2016 at 4:29

Akshey Bhat

8,6772 gold badges23 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

KyLim Over a year ago

not working : (, its fail to call c# the function too

KyLim Over a year ago

thought my database part got problem and replaced the fillfields function with alert string script = "<script type=\"text/javascript\">alert('" + input + "');</script>"; but not working too

Akshey Bhat Over a year ago

i have modified code of ajax function to fix some errors. Also check if there are any error in javascript by looking in your browser's console

KyLim Over a year ago

i checked the console,its blank,ajax part i replaced with urs,still not working,feel so weird

Akshey Bhat Over a year ago

try removing dataType property from ajax function since you are not expecting anything from server

|

Jon P · Accepted Answer · 2016-10-13 06:37:12Z

1

You have an issue with your event binding input is not a valid event name: https://api.jquery.com/category/events/

For testing purposes use:

$("#myinput1").on('blur', function() .... );

And tab out of the field. Better still be nice to your users and give them a button to click so they know what triggers the action.

answered Oct 13, 2016 at 6:37

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

2 Comments

KyLim Over a year ago

purpose i build this is ,employee id have 8 digit,everytime after they scan the id using tablet ,it will auto submit to database..

Jon P Over a year ago

That does not change the fact that you can't use input as an event name. You may need to do some experimentation to find what event works best for your scenario. Get the basics working with a button. Then refine for your scanning scenario.

Collectives™ on Stack Overflow

jquery trigger c# function

2 Answers 2

13 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related