jquery AJAX和使用onchange进行下拉列表的Web服务

时间:2011-09-22 16:33:56

标签: c# asp.net ajax web-services

我有一个下拉列表,我使用jquery ajax来调用webmethod。我想要的解决方案是使用ajax基于下拉选择索引更新cuurent页面上的所有数据字段。

function getDBInfo()
{

   var mySelectedIndex = $("#<%=dblParameter.ClientID%>").val(); //id name for dropdown list
   $.ajax({
         type:"POST",
         url:"/Manage/Details.aspx?param=",
         data:{}
         contentType:application/json; charset=utf-8",
         dataType:"json"
         success: function(data)
         {
             //this is what I am trying to accomplish but not sure how I should handle the webservice method to do this or if I am even doing it right so far
             $("#<%=txtParameter.ClientID%>;").text(data.Parameter);
             $("#<%=txtName.ClientID%>;").text(data.Name);
             $("#<%=txtSSN.ClientID%>;").text(data.SSN);
             //etc....
         }
     });
 }

然后在我的代码后面我有我的页面方法

 protected void Page_Load(object sender, EventArgs e)
 {
    dblParameter.Attributes.Add("onchange","getDBInfo");
 }
 [WebMethod]
 public static DataRowView getDBInfo(string param)
 {                 
     ConnectionStringSettings conn = ConfiguationManager.ConnectionStrings["MasterDBConnectionString"];
     SQLDataSource Details = new SqlDataSource(conn.ConnectionString, "SELECT * FROM [tblInfo] WHERE ([ParamID] = "+param);
     DataRowView db = (DataRowView)Details.Select(DataSourceSelectArguments.Empty);
      return db;
  }

我做错了什么,因为在我的javascript中调用data.Name或data.Parameter无法正常工作。应该是数据[&#34;参数&#34;]而不是?或者我离开这里基地

EDIT1:

我在这里改变了很多我的代码就是我所拥有的,而且现在正在运作

$(document).ready(function(){ 
   $("#<%=dblParameter.ClientID%>").change(function(){
     var myparam= $("#<%=dblParameter.ClientID%>").val(); //id name for dropdown list
       $.ajax({
         type:"POST",
         url:"Details.aspx/getDBInfo",
         data:'{param:"'+myparam+'"}',
         contentType:application/json; charset=utf-8",
         success: function(data)
         {
             alert(data.d)
         }
     });
   });
 });

  protected void Page_Load(object sender, EventArgs e)
 {

 }
 [WebMethod]
 public static string getDBInfo(string param)
 {                 
     MyMainClass myInit = new MyMainClass();
     string target= myInit.GetInfo(param);
     return target;
 }

4 个答案:

答案 0 :(得分:1)

ASP.net将您的数据包装在“d”对象中。通过ASP.NET序列化的所有ASMX服务都是这种情况。即使您返回单个字符串值,它也将始终包含在“d”对象中。

您可以通过将Success回调更改为以下内容来解决您的问题:

$("#<%=txtParameter.ClientID%>;").text(data.d.Parameter);
$("#<%=txtName.ClientID%>;").text(data.d.Name);
$("#<%=txtSSN.ClientID%>;").text(data.d.SSN);

您可以在此处准备更多相关信息:A breaking change between versions of ASP.NET AJAX

答案 1 :(得分:1)

这是有用的:

  $(document).ready(function(){  
    $("#<%=dblParameter.ClientID%>").change(function(){ 
     var myparam= $("#<%=dblParameter.ClientID%>").val(); //id name for dropdown list       
     $.ajax({ 
      type:"POST",
      url:"Details.aspx/getDBInfo",
      data:'{param:"'+myparam+'"}',
      contentType:application/json; charset=utf-8",
      success: function(data)
      {       
       alert(data.d)
      } 
  }); 
 });
});  
protected void Page_Load(object sender, EventArgs e)  {
 } 
[WebMethod]
public static string getDBInfo(string param)  { 
     MyMainClass myInit = new MyMainClass();
     string target= myInit.GetInfo(param);
  return target;
} 

答案 2 :(得分:0)

我对json了解不多,但你可以用这种方式。 调试'结果'以查看其中的内容。

function getDBInfo()
{
// GET UR WEBMETHOD PARAM: SUPPOSE X

PageMethods.getDBInfo(X, OnSucceeded, OnFailed);
}

// Callback function invoked on successful completion of the page method.
function OnSucceeded(result, methodName) {
if (result != null && result != '')
   // do whatever
else
    //do whatever
}

// Callback function invoked on failure of the page method.
function OnFailed(error, methodName) {
if (error != null) {
    // do whatever
}
}

答案 3 :(得分:0)

你走了:

function getDBInfo() {
    var mySelectedIndex = $('#<%=dblParameter.ClientID%>').val();
    $.ajax({
        type: 'POST',
        url: '/Manage/Details.aspx',
        data: JSON.stringify({ param: mySelectedIndex }),
         contentType: 'application/json; charset=utf-8',
         success: function(data) {
             $('#<%=txtParameter.ClientID%>').text(data.d.Parameter);
             $('#<%=txtName.ClientID%>').text(data.d.Name);
             $('#<%=txtSSN.ClientID%>').text(data.d.SSN);
         }
    });
}

还要确保从页面方法返回的对象具有在成功回调中使用的参数,名称和SSN属性。您正在返回DataRowView,我怀疑它是否具有此类属性。在这种情况下定义并使用强类型类,它将从页面方法返回。

另请注意JSON.stringify方法用于发送JSON请求的用法。此方法是原生内置的现代浏览器,但如果您需要支持旧版浏览器,则还需要在页面中包含json2.js脚本。

您还会注意到我对您的代码所做的其他修改:

  • 在jQuery选择器中的服务器端表达式之后删除了不必要的;
  • 从AJAX调用中移除了dataType: 'json' =&gt;这是不必要的,jQuery足够聪明,可以从服务器Content-Type响应头中推断出它。
  • 正确引用了ajax调用中的contentType参数。
  • .d添加到传递给data回调的success参数中。这是一个ASP.NET内容,它用这个d属性包装整个JSON响应:{ d: ...... }

我还建议您阅读有关使用jQuery调用ASP.NET PageMethods / Script WebMethods的following article