2012-02-09 11 views
5

この質問では、WebサービスとjQueryのC#でASP.NET Webフォームを使用しています。 I read this post jQuery AJAXを使用して、一連のパラメータをWebメソッドに渡す方法について説明します。私はインデックスを使わずに同じことをすることが可能かどうか疑問に思っています。インデックスの問題は、クライアントスクリプトとWebメソッドの引数を更新する必要があるため、注文の問題であり、更新の作成は面倒です。私は現在、名前付き引数を使用していますが、これは非常に面倒です。私の最大のWebメソッドには20の引数があります!ヤク!私は注文を気にすることなくここでショートカットを探しています。これは可能ですか?jQueryを使用したWebメソッドでの引数数の短縮AJAX

var obj = {}; 

// Iterate through each table row and add the editor field data to an object. 
$('.addressRow').each(function() 
{ 
    var row = $(this); 
    var addressField = row.find('.addressField'); 
    var attr = addressField.attr('addressFieldName'); 
    var val = addressField.val() 
    obj[attr] = val; 
}); 

$.ajax(
{ 
    type: 'POST', 
    url: '/WebServices/AddressService.asmx/SaveAddress', 
    data: JSON.stringify(obj), 
    contentType: 'application/json; charset=utf-8', 
    dataType: 'json', 
    success: function (response) 
    { 
     alert('address saved'); 
    }, 
    error: function (response) 
    { 
     alert('error'); 
    } 
}); 



[WebMethod] 
public void SaveAddress(string streetAddress1, string streetAddress2, string apartmentNumber, string city, strng state, string zipCode, string country) 
{ 
    // save address... 
} 

UPDATE:答えすべての人へ

感謝。あなたの答えとその他のスタックの質問を使用して、私はついにデモをまとめることができました。私はコンセプトコードの証拠をここに貼り付けています。 誰もが同じ問題を抱えていて、それがどのように行われているか見ることができます。配列は、関連するデータのリストを保存するために特別にしている - - あなたは配列を使用する必要はありません

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Web Service Demo</title> 
    <style type="text/css"> 
     * { font-family: "Segoe UI"; font-size: 12px; color: #444444; } 
     #result1 { padding: 10px 0px; } 
    </style> 
    <script type="text/javascript" src="Scripts/jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() 
     { 
      $('button').click(function() 
      { 
       // NOTE: When using JavaScript objects, the properties MUST match the C# properties EXACTLY (casing and seplling). 
       // I.e. in employee.FirstName, FirstName maps EXACTLY to the FirstName in the C# Employee object. 

       // Create a employee object using the assigning to properties method. 
       var employee1 = {}; 
       employee1.ID = 5416; 
       employee1.FirstName = 'Fred'; 
       employee1.LastName = 'Baker'; 
       employee1.BirthDate = '07/18/1982'; 
       employee1.StreetAddress = '947 River Street'; 
       employee1.City = 'Somnerville'; 
       employee1.State = 'AR'; 
       employee1.ZipCode = '41370'; 

       // A property has the ability to be a list or complex type. In this example, employee1 uses a list of access codes and employee2 does not. 
       employee1.AccessCodes = new Array(); 
       employee1.AccessCodes[0] = 512; 
       employee1.AccessCodes[1] = 887; 

       // Create a employee object using the associative array method. 
       var employee2 = 
       { 
        ID: 3316, 
        FirstName: 'Jason', 
        LastName: 'Masters', 
        BirthDate: '11/19/1980', 
        StreetAddress: '11 South Crane Avenue', 
        City: 'New York', 
        State: 'NY', 
        ZipCode: '01147' 

        // employee2 does no use any access codes. AccessCodes in the C# web method is a list and by excluding it from the JavaScript 
        // object, the C# code defaults the list to the null. 
       }; 

       // In order to pass a complex JavaScript object to a web method as a complex type, the JavaScript object needs to be JSONified. 
       // The name of the argument in the C# web method MUST be included here in single quotes EXACTLY (casing and spelling) the same way 
       // the argument is specified in the C# code. In this example, the web method is "public string GetEmployeeData(Employee employee)". The 
       // complex argument is 'employee'. IT IS VITALLY IMPORTANT that, when using the JSON.stringify() function, the name of the web method 
       // argument is included here exactly the same way as specified in the C# code. I know I'm being redundant by repeating myself, but 
       // it took me hours to figure out how to do this and the error message from doing this improperly is completely useless! 

       var data1 = JSON.stringify({ 'employee': employee1 }); // 'employee' is the web method argument and employee1 is the JavaScript object from above. 
       var data2 = JSON.stringify({ 'employee': employee2 }); // 'employee' is the web method argument and employee2 is the JavaScript object from above. 

       // Send employee1 to the web method. 
       $.ajax(
       { 
        type: 'POST', 
        url: '/WebServices/WebService1.asmx/GetEmployeeData', 
        data: data1, 
        contentType: 'application/json; charset=utf-8', 
        dataType: 'json', 
        success: function (response) 
        { 
         $('#result1').html(response.d); 
        }, 
        error: function (response) 
        { 
         $('#result1').html('web service call failure\n' + response.responseText); 
        } 
       }); 

       // Send employee2 to the web method. 
       $.ajax(
       { 
        type: 'POST', 
        url: '/WebServices/WebService1.asmx/GetEmployeeData', 
        data: data2, 
        contentType: 'application/json; charset=utf-8', 
        dataType: 'json', 
        success: function (response) 
        { 
         $('#result2').html(response.d); 
        }, 
        error: function (response) 
        { 
         $('#result2').html('web service call failure\n' + response.responseText); 
        } 
       }); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <p>This demo shows how to pass a complex JSON object to a web method and get a reponse back from the web method.</p> 
     <p>1) It creates two JavaScript objects.</p> 
     <p>2) The JavaScript objects are JSONified and sent to the web method.</p> 
     <p>3) The web method receives the complex objects and uses them to create response text.</p> 
     <p>4) When the callback function fires, it displays the text returned from the web service.</p> 
     <button type="button">Call Web Service</button> 
     <div id="result1"></div> 
     <div id="result2"></div>    
    </div> 
    </form> 
</body> 
</html> 

[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
[ToolboxItem(false)] 
[ScriptService] 
public class WebService1 : WebService 
{ 
    [WebMethod] 
    public string GetEmployeeData(Employee employee) 
    { 
     var output = string.Format("Employee #{0}: {1} {2} lives at {3} in {4}, {5} with a zip code of {6} and was born on {7}.", employee.ID, employee.FirstName, employee.LastName, employee.StreetAddress, employee.City, employee.State, employee.ZipCode, employee.BirthDate.ToShortDateString()); 

     if (employee.AccessCodes != null) 
     { 
      output += string.Format(" Employee #{0} has access codes: ", employee.ID); 

      foreach (var accessCode in employee.AccessCodes) 
      { 
       output += accessCode + " , "; 
      } 

      output = output.Substring(0, output.Length - 2); 
     } 
     else 
     { 
      output += string.Format(" Employee #{0} does not have any has access codes.", employee.ID); 
     } 

     return output; 
    } 
} 

public class Employee 
{ 
    public int ID { get; set; } 
    public string FirstName { get; set; } 
    public string LastName { get; set; } 
    public DateTime BirthDate { get; set; } 
    public string StreetAddress { get; set; } 
    public string City { get; set; } 
    public string State { get; set; } 
    public string ZipCode { get; set; } 
    public List<int> AccessCodes {get;set;} 
} 
+2

あなただけのメソッドシグネチャを短くしたい場合は、カスタム型の使用に切り替えることができますサーバー上で定義します。次に、サーバーに渡すことができる一致するJSオブジェクトを作成できます。これにより、クライアントとサーバーでオブジェクトを更新する必要があるため、クライアントとサーバーでオブジェクトを維持する必要がなくなります。 – Zachary

答えて

2

注:この例では作業を完全に続けることはできませんが、何かが変更された場合は、いくつかの場所を変更する必要があります。 c#クラスを変更して、保存メソッド(およびおそらくレイアウト)を変更します。

c#ですべての要素を含む「アドレス」クラスを作成し、アドレスの配列を作成してから、Webメソッドでそのアドレスのリスト(単一パラメータ)を処理します。私の例は幾分解釈されていますが、あなたに出発点を与えるべきです。私はこれを完全にはテストしていませんが、近いはずです。このレイアウトで

[WebMethod] 
public void SaveAddress(List<Address> Addresses) { 
// save em here 
} 

public class Address 
{ 
    public Address() 
    { 
     streetAddress1 = streetAddress2 = apartmentNumber = city = state = zipCode = country = String.Empty; 
    } 
    public String streetAddress1 { get; set; } 
    public String streetAddress2 { get; set; } 
    public String apartmentNumber { get; set; } 
    public String city { get; set; } 
    public String state { get; set; } 
    public String zipCode { get; set; } 
    public String country { get; set; } 
} 

:ここ

<div id='Address'> 
    <input class='streetAddress1' type='text'> 
    <input class='streetAddress2' type='text'> 
    <input class='apartmentNumber' type='text'> 
    <input class='city' type='text'> 
    <input class='state' type='text'> 
    <input class='zipCode' type='text'> 
    <input class='country' type='text'> 
</div> 
<div id='Address'> 
    <input class='streetAddress1' type='text'> 
    <input class='streetAddress2' type='text'> 
    <input class='apartmentNumber' type='text'> 
    <input class='city' type='text'> 
    <input class='state' type='text'> 
    <input class='zipCode' type='text'> 
    <input class='country' type='text'> 
</div> 
<button id='savedata'>SaveData</button> 

は、保存するために、いくつかのクライアントコードです:

function AddressRow(currentAddressRow) { 
    this.streetAddress1 = currentAddressRow.find('.streetAddress1').val(); 
    this.streetAddress2 = currentAddressRow.find('.streetAddress2').val(); 
    this.apartmentNumber = currentAddressRow.find('.apartmentNumber').val(); 
    this.city = currentAddressRow.find('.city').val(); 
    this.state = currentAddressRow.find('.state').val(); 
    this.zipCode = currentAddressRow.find('.zipCode').val(); 
    this.country = currentAddressRow.find('.country').val(); 
} 

function AddressRowSet() { 
    var addressRows = []; 
    var allAddressRows = $('.Address'); 
    var thisRow = null; 
    var currentRowCount = allAddressRows.length; 
    var i = 0; 
    for (i = 0; i < currentRowCount; i++) { 
     thisRow = allAddressRows.eq(i); 
     addressRows.push(new AddressRow(thisRow)); 
    } 
    this.AddressRows = addressRows; 
} 

function SaveCurrentAddresses() { 
    var AddressRecords = new AddressRowSet(); 
    var AddressesData = { 
     Addresses: AddressRecords.AddressRows 
    }; 
    SaveAddressData(JSON.stringify(AddressesData)); 
} 

function SaveAddressData(Addresses) { 
    $.ajax({ 
     type: 'POST', 
     data: Addresses, 
     contentType: 'application/json', 
     url: '/WebServices/AddressService.asmx/SaveAddress', 
     dataType: 'json', 
     success: function(response) { 
      alert('address saved'); 
     }, 
     error: function(response) { 
      alert('error'); 
     } 
    }); 
} 
$('#savedata').click(function() { 
    SaveCurrentAddresses(); 
}); 
+0

注:これはJSON.stringifyを使用しています。必要に応じてこちらをご覧ください:http://www.json.org/json2.js(一部のブラウザでは) –

1

国や車のリスト、つまりなど

あなたのパラメータを定義するために、匿名のJSON BLOBを使用します。次のように

var obj = { 
    param1: 'stringval1', 
    param2: 100, // int value, 
    param3: { 
     childobjparam1: 'this is a child object in json', 
     childobjparam2: true // boolean value 
    } 
}; 

次に、あなただけのJSONオブジェクトに渡すことができます。

$.ajax(
{ 
    type: 'POST', 
    url: '/WebServices/AddressService.asmx/SaveAddress', 
    data: obj, 
    contentType: 'application/json; charset=utf-8', 
    dataType: 'json', 
    success: function (response) 
    { 
     alert('address saved'); 
    }, 
    error: function (response) 
    { 
     alert('error'); 
    } 
}); 

JSONです素敵な:)

関連する問題