Javascript 如何在Jquery中创建项目列表并在服务器端获取它？_Javascript_Jquery_Asp.net Mvc_Usability

Javascript 如何在Jquery中创建项目列表并在服务器端获取它？

javascript jquery asp.net-mvc

Javascript 如何在Jquery中创建项目列表并在服务器端获取它？,javascript,jquery,asp.net-mvc,usability,Javascript,Jquery,Asp.net Mvc,Usability,我正在尝试创建一个项目列表（客户的电话和家属），例如，用户可以包括一些电话号码，删除其他电话号码（如果可能的话，可以编辑它们），就像客户记录中的列表一样我想知道如何在客户端完成这项工作，并在服务器端获取列表？有没有jquery插件或最佳实践来实现它注：我正在使用ASP.Net MVC 2。将数据序列化为JSON格式，然后将其作为字符串发送到服务器。将数据序列化为JSON格式，然后将其作为字符串发送到服务器。当我必须学习时，这些帖子非常有用您可以将javascript数组序列化为ASP

我正在尝试创建一个项目列表（客户的电话和家属），例如，用户可以包括一些电话号码，删除其他电话号码（如果可能的话，可以编辑它们），就像客户记录中的列表一样

我想知道如何在客户端完成这项工作，并在服务器端获取列表？有没有jquery插件或最佳实践来实现它

注：我正在使用ASP.Net MVC 2。

将数据序列化为JSON格式，然后将其作为字符串发送到服务器。

当我必须学习时，这些帖子非常有用

您可以将javascript数组序列化为ASP.Net可以反序列化的字符串

有一个标准叫做whichis good，因为它几乎不会对实际数据添加任何干扰（就像xml一样，增加了要传输的数据量）

然后，您可以使用jquery方法将此数据发送到您创建的WebMethod（请参见链接），并获得可理解的响应

编辑：

如果您已经了解了这些内容，那么只需使用

JSON.stringify（）

方法，将对象/数组传递到其中进行序列化。

当我必须学习它时，这些帖子非常有用

您可以将javascript数组序列化为ASP.Net可以反序列化的字符串

有一个标准叫做whichis good，因为它几乎不会对实际数据添加任何干扰（就像xml一样，增加了要传输的数据量）

然后，您可以使用jquery方法将此数据发送到您创建的WebMethod（请参见链接），并获得可理解的响应

编辑：

如果您已经了解了这些内容，只需使用

JSON.stringify（）

方法，将对象/数组传递到其中进行序列化即可。

我保留了这个示例以开始学习，只需将适当的内容放在适当的文件中，并对其进行编辑，以匹配您正在执行的操作：

/*在这种情况下，我使用*/

   available at: http://www.json.org/js.html

function jsonObject()
{
};
var phoneListObject = new jsonObject();

function SaveJsonObject()
{
    phoneListObject.Control = new jsonObject();
    phoneListObject.Control.CustomerId = $("#CustomerId").val();
    phoneListObject.Control.CustomerName = $("#CustomerName").val();
    phoneListObject.ListBody.PhonesBlock = new jsonObject();
    phoneListObject.ListBody.PhonesBlock.Phone = new Array();
    $('#PhonesBlock .Phone').each(function(myindex)
    {
        phoneListObject.ListBody.PhonesBlock.Phone[myindex].PhoneNumber = $(".PhoneNumber input", this).val();
        phoneListObject.ListBody.PhonesBlock.Phone[myindex].PhoneName = $(".PhoneName input", this).val();
     });
 };

 $(function()
{
    function SaveCurrentList()
    {
        SaveJsonObject();
        var currentSet = phoneListObject;
        var formData = { FormData: currentSet };
        phoneListJSON = JSON.stringify(formData);
        var FormData = "{ FormData:" + JSON.stringify(phoneListJSON) + "}";
        SavePhoneListData(FormData);
    };
    function SavePhoneListData(phonesData)
    {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: phonesData,
            dataFilter: function(data)
            {
                var msg;
                if ((typeof (JSON) !== 'undefined') &&
        (typeof (JSON.parse) === 'function'))
                    msg = JSON.parse(data);
                else
                    msg = eval('(' + data + ')');
                if (msg.hasOwnProperty('d'))
                    return msg.d;
                else
                    return msg;
            },
            url: "../../WebServices/ManagePhones.asmx/SaveJson",
            success: function(msg)
            {
                SaveSuccess(msg);
            },
            complete: function(xhr, textresponse)
            {
                var err = eval("(" + xhr.responseText + ")");
            },
            error: function(msg)
            {
            },
            failure: function(msg)
            {
            }
        });
    };
    $('#btnSave').click(function()
    {
        SaveCurrentList();
    });
});

/*json数据剪报*/

{"FormData":{"Control":{"CustomerId":"12345y6","CustomerName":"Joe Customer"},"PhonesBlock":{"Phone":[{"PhoneNumber":"234-233-2322","PhoneName":"son harry"},{"PhoneNumber":"234-233-2323","PhoneName":"son frank"},{"PhoneNumber":"234-233-2320","PhoneName":"momk"}]}}}

/表单数据的XML格式：/


12345y6
乔顾客
234-233-2322
儿子哈里
234-233-2323
儿子弗兰克
234-233-2321
妈妈

/*表单布局剪报*/

<div class="control">
    <div class="customer">
        <input typeof="text" id="CutomerId" />
        <input typeof="text" id="CutomerName" />
    </div>
    <div class="phoneslist" id="PhonesBlock">
        <div class="Phone">
            <input typeof="text" class="PhoneNumber" />
            <input typeof="text" class="PhoneName" />
        </div>
        <div class="Phone">
            <input typeof="text" class="PhoneNumber" />
            <input typeof="text" class="PhoneName" />
        </div>
        <div class="Phone">
            <input typeof="text" class="PhoneNumber" />
            <input typeof="text" class="PhoneName" />
        </div>
    </div>
</div>
<input id="buttonSave" class="myButton" type="button" value="Save" />

web服务方法的签名：

[WebMethod（EnableSession=true）] 公共字符串SaveJson（字符串FormData） {

}

我保留了这个示例以开始学习，只需将适当的内容放入适当的文件中，并对其进行编辑以匹配您正在做的工作：