2012-02-09 29 views
5

Đối với câu hỏi này, tôi đang sử dụng ASP.NET Web Forms trong C#, một dịch vụ web và jQuery. I read this post về việc sử dụng một mảng để chuyển một loạt các tham số đến một phương thức web bằng cách sử dụng jQuery AJAX. Tôi tự hỏi nếu nó có thể làm điều tương tự mà không sử dụng các chỉ số. Vấn đề với các chỉ số là vấn đề trật tự và thực hiện cập nhật là một rắc rối vì nó liên quan đến việc cập nhật các đối số của máy khách và kịch bản lệnh của phương thức web. Tôi hiện đang sử dụng các đối số được đặt tên, nhưng điều này rất tẻ nhạt. Phương pháp web lớn nhất của tôi có 20 đối số! Kinh quá! Tôi đang tìm một phím tắt ở đây mà không cần phải quan tâm đến trật tự. Điều này có thể không?Rút ngắn số lượng đối số trong một phương pháp web bằng cách sử dụng jQuery 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:

Nhờ tất cả những ai đã trả lời. Sử dụng câu trả lời của bạn và một số câu hỏi khác của Stack, cuối cùng tôi đã có thể ghép nối một bản demo làm việc. Tôi đang dán bằng chứng về mã khái niệm của mình ở đây để bất kỳ ai bị kẹt cùng một vấn đề đều có thể xem cách thực hiện.

<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

Nếu bạn chỉ muốn rút ngắn thời phương pháp chữ ký, bạn có thể chuyển sang sử dụng một kiểu tùy chỉnh bạn xác định trên máy chủ. Sau đó bạn có thể tạo một đối tượng JS phù hợp mà bạn có thể chuyển tới máy chủ. Điều này sẽ không làm giảm công việc của việc phải duy trì đối tượng trên máy khách và máy chủ, vì bạn vẫn phải cập nhật đối tượng trên máy khách và máy chủ. – Zachary

Trả lời

2

LƯU Ý: ví dụ này sẽ không hoàn toàn ngăn bạn thực hiện công việc, nhưng bạn chỉ phải thay đổi một vài địa điểm nếu có điều gì đó thay đổi. Thay đổi lớp C# và thay đổi phương thức lưu (và bố cục có lẽ).

Tạo một lớp "địa chỉ" trong C# với tất cả các phần tử, tạo một dãy địa chỉ, sau đó xử lý danh sách địa chỉ đó (tham số đơn) trong phương thức web. Ví dụ của tôi được hiểu một chút nhưng nên cung cấp cho bạn một vị trí bắt đầu. Tôi đã không thử nghiệm đầy đủ nhưng nó phải được đóng lại.

[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; } 
} 

Với cách bố trí này:

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

Dưới đây là một số mã khách hàng để tiết kiệm:

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

CHÚ Ý điều này sử dụng JSON.stringify, nếu cần, có thể tìm thấy ở đây: http://www.json.org/json2.js (nó nằm trong một số trình duyệt) –

1

Bạn không cần phải sử dụng các mảng - mảng là đặc biệt để lưu trữ một danh sách các dữ liệu liên quan - tức là một danh sách các nước hoặc xe hơi vv

Sử dụng một json blob nặc danh để xác định các thông số của bạn:

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

sau đó, bạn chỉ có thể vượt qua trong các đối tượng json như sau:

$.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 được lovely :)

Các vấn đề liên quan