个人中心
gpt4 book ai didi

c# - 使用 jQuery AJAX 缩短 Web 方法中的参数数量

转载 作者：太空狗 更新时间：2023-10-29 23:33:36 27 4
gpt4 key购买 nike

对于这个问题，我使用 C# 中的 ASP.NET Web 窗体、Web 服务和 jQuery。 I read this post关于使用数组将一堆参数传递给使用 jQuery AJAX 的 Web 方法。我想知道是否可以在不使用索引的情况下做同样的事情。索引的问题在于顺序很重要并且进行更新很麻烦，因为它涉及更新客户端脚本和网络方法的参数。我目前正在使用命名参数，但这非常乏味。我最大的 Web 方法有 20 个参数!呸!我在这里寻找捷径而不必关心顺序。这可能吗？

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

更新:

感谢所有回答的人。使用您的回答和其他一些 Stack 问题，我终于能够拼凑出一个有效的演示。我在这里粘贴我的概念验证代码遇到同样问题的任何人都可以看到它是如何完成的。

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

最佳答案

注意:这个例子不会完全阻止你工作，但如果有什么变化，你应该只需要改变几个地方。更改 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();
});

关于c# - 使用 jQuery AJAX 缩短 Web 方法中的参数数量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9220681/

27 4 0
文章推荐： c# - 如何在 C# 中制作选择工具
文章推荐： c++ - 在哪里释放在函数内部创建的动态数组的内存
文章推荐： c++ - 在 C++ 中实现深度优先搜索
文章推荐： c# - 响应类、ServiceStack 中的 IEnumerable 与列表
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com