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

Question

這裏是acsx頁面。

我有兩個自舉模式下拉（State和City）。

根據狀態選擇，City下拉框應填充選項。

我在代碼後面爲狀態FillStatedata()和城市getCitydata()創建了兩種方法。

我需要調用getCitydata()關於使用jQuery AJAX進行狀態選擇更改的方法，然後將城市數據與城市下拉列表綁定。

我得到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. 只使用一個圖書館要麼min爲督促或non min dev的。
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文件包含從數據庫獲取數據的方法