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.

Answer 1

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>

Answer 2

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.