Как мне сделать список элементов в Jquery и получить его на стороне сервера?

Question

Я пытаюсь составить список элементов (телефонов и иждивенцев для клиента), например, пользователь может включить некоторые номера телефонов и удалить другие (возможно, отредактировать их, если это возможно), например, список внутри запись клиента.

Я хотел бы знать, как я могу сделать это на стороне клиента и получить список на стороне сервера? Есть ли плагин jquery или лучшая практика для этого?

П.С .: Я использую ASP.Net MVC 2.

Answer 1

Когда мне приходилось изучать это, эти посты были чрезвычайно полезны.

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/ http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/

Вы можете сериализовать массив javascript в строку, которую ASP.Net может десериализовать.

Существует стандарт под названием JSON , который хорош, так как практически не добавляет шума к фактическим данным (как это делает xml, увеличивая LOT объем передаваемых данных).

Затем можно использовать метод jquery $.ajax, чтобы отправить эти данные в созданный вами WebMethod (см. Ссылки) и получить понятный ответ.

EDIT : Если вы уже были внутри этого материала, вы можете просто использовать метод JSON.stringify(), передавая объект / массив для сериализации в нем.

Answer 2

Сериализуйте данные в формат, подобный JSON, а затем отправьте их на сервер в виде строки.

Answer 3

Я держу этот пример, чтобы начать, просто поместите нужные файлы в нужные файлы и отредактируйте их так, чтобы они соответствовали вашим действиям:

/ * в этом случае я использую * /

   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 data snip * /

{"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 данных формы: /

<FormData>
    <Control>
        <CustomerId>12345y6</CustomerId>
        <CustomerName>Joe Customer</CustomerName>
    </Control>
    <PhonesBlock>
        <Phone>
            <PhoneNumber>234-233-2322</PhoneNumber>
            <PhoneName>son harry</PhoneName>
        </Phone>
        <Phone>
            <PhoneNumber>234-233-2323</PhoneNumber>
            <PhoneName>son frank</PhoneName>
        </Phone>
        <Phone>
            <PhoneNumber>234-233-2321</PhoneNumber>
            <PhoneName>momk</PhoneName>
        </Phone>
    </PhonesBlock>
</FormData>

/ * вырезать макет формы * /

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

подпись метода веб-службы:

[WebMethod (EnableSession = true)] открытая строка SaveJson (строка FormData) { } * * Тысяча двадцать-один