How to call user control method using jQuery AJAX in Asp.Net

Question

Here is the acsx page.

I have two drop down in Bootstrap modal ( State and City ).

Based on the state selection, City dropdown should populate option.

I have created two methods in code behind for state FillStatedata() and for city getCitydata() .

I need to call getCitydata() method on state selection change using jQuery AJAX and then bind the city data with city drop down.

I am getting Statename on state change but not able to executive getCitydata() method using statename as parameter.

Why?

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Registeration.ascx.cs" Inherits="WebApplication1.UserControl.Registeration" %>
<%@ Import Namespace = "System.Web.Security" %>
<script src="~/scripts/jquery-1.10.2.js"></script>
<script src="~/scripts/jquery-1.10.2.min.js"></script>

<!--jquery start here-->
<script> 
    $(document).ready(function () {

        var getSelState;
        $("#State").change(function () {

            $.ajax({

                type: "POST", //HTTP method
                url: "UserControl/Registeration.ascx/getCitydata", //page/method name
                data: alert("{'Statename':'" + $('#State').val() + "'}"), //json to represent argument
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,

                success: function (msg) { //handle the callback to handle response 

                    //request was successful. so Retrieve the values in the response.



                }
            })
        });
    });



</script> 
<input type="hidden" id="myhiddenField" name="myhiddenField" value="" ClientIDMode="Static" runat="server" />
 <div class="form-horizontal" role="form" runat="server">
 <a href="#myModal" data-toggle="modal" data-target="#myModal">New User?</a>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Register</h4>
      </div>
      <div class="modal-body">

          <div class="form-group">
            <label for="full-name" class="col-sm-2 control-label">FullName:</label>
             <div class="col-sm-10"> 
            <input type="text" class="form-control" id="full-name">

          </div>
            </div>

          <div class="form-group">
            <label for="User-Name" class="col-sm-2 control-label">Username:</label>
              <div class="col-sm-10"> 
            <input type="text" class="form-control" id="User-Name">
          </div>
              </div>
          <div class="form-group">
            <label for="Create-Password" class="col-sm-2 control-label">Create Password:</label>
              <div class="col-sm-10"> 
            <input type="text" class="form-control" id="Create-Password">
          </div>
              </div>
          <div class="form-group">
            <label for="confirm-Password" class="col-sm-2 control-label">Confirm Password:</label>
              <div class="col-sm-10"> 
            <input type="text" class="form-control" id="Confirm-Password">
          </div>
              </div>
           <div class="form-group">
            <label for="Mobile-Number" class="col-sm-2 control-label">Mobile No:</label>
               <div class="col-sm-10"> 
            <input type="text" class="form-control" id="Mobile-Number">
          </div>
               </div>
          <div class="form-group">
            <label for="State" class="col-sm-2 control-label">State:</label>
              <div class="col-sm-10">
            <select class="form-control" id="State" runat="server" ClientIDMode="Static">

            </select>
          </div>
            </div>
          <div class="form-group">
            <label for="City" class="col-sm-2 control-label">City:</label>
             <div class="col-lg-10">
            <select class="form-control" id="City" runat="server" DataTextField="Cityname"
                  DataValueField="Cityname"></select>
          </div>
             </div>
          <div class="form-group">
            <div class="col-lg-10">
            <button type="button" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-primary">Cancel</button>

          </div>
             </div>


        </div>


      </div>
      <div class="modal-footer">

      </div>
    </div>

     </div>
    </div>

Answer 1

First things first.

1. just use one library either min for prod or non min for dev.
2. data:{} should have to be an object or string value.

use one of it:

<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script>
  $(document).ready(function() {
    var getSelState;
    $("#State").change(function() {
      $.ajax({
        type: "POST", //HTTP method
        url: "UserControl/Registeration.ascx/getCitydata", //page/method name
        data: "{'Statename':'" + this.value + "'}", //json to represent argument
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: true,
        success: function(msg) { //handle the callback to handle response 
          console.log(msg);
        }
      });
    });
  });
</script>

Answer 2

function getCitydata()(obj) {
        var ddlcity = document.getElementById('<%= ddlcity.ClientID  %>');
        ddlcity.innerHTML = '';
        $.support.cors = true;
        var serviceUrl = '/ashx/map/Address.ashx';

        if (serviceUrl.indexOf('?') > -1)
            serviceUrl += '&jsonp='
        else
            serviceUrl += '?jsonp='

        serviceUrl += '?&type=1&StateId=';
        serviceUrl += document.getElementById('<%= ddlState.ClientID%>').value;

        $.ajax({
            type: 'GET',
            crossDomain: true,
            async: false,
            contentType: 'application/json; charset = utf-8',
            url: serviceUrl,
            data: '{}',
            dataType: 'jsonp',
            success: function (data) {
                if (data != null && data.length > 0) {
                    $.map(data, function (item, index) {
                        var newListItem = document.createElement('option');
                        newListItem.text = item.City;
                        newListItem.value = item.CityId;
                        ddlcity.options.add(newListItem);
                    });
                }
            },
            error: function (error) {
                alert('error ' + error);
            }
        });
    } // getCitydata()

To use this function you have to create one ashx file eg. Address.ashx file which consist method for getting the data from database