如何在Asp.Net中使用jQuery AJAX调用用户控件方法

acsx页面。

我有两个下拉在引导模式(State和City)。

根据状态选择，City下拉菜单应该填充选项。

我在代码后面为州FillStatedata()和城市getCitydata()创建了两个方法。

我需要调用getCitydata()方法上的状态选择改变使用jQuery AJAX，然后绑定城市数据与城市下拉。

我在状态变化上获得Statename，但无法使用statename作为参数执行getCitydata()方法。

为什么?

<%@ 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>

<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>

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()