如何在Asp.Net中使用jQuery AJAX調用用戶控制方法

Question

這是acsx頁面。

我在Bootstrap模態中有兩個下拉菜單（ State和City ）。

基於狀態選擇，“ City下拉列表應填充選項。

我已經在代碼后面為狀態FillStatedata()和city getCitydata()創建了兩個方法。

我需要使用jQuery AJAX在狀態選擇更改上調用getCitydata()方法，然后將城市數據與城市下拉列表綁定。

我越來越Statename狀態變化，但無法執行getCitydata()使用方法statename作為參數。

為什么？

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

首先是第一件事。

1. 只需使用一個庫（對於prod使用min或對dev使用non min 。
2. data:{}應該是一個對象或字符串值。

使用其中之一：

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

要使用此功能，您必須創建一個ashx文件，例如。 Address.ashx文件，該文件包含從數據庫獲取數據的方法