如何在Jquery中完成项目列表并在服务器端获取它？

Question

我正在尝试制作一个项目列表（客户的电话和家属），例如，用户可以包含一些号码电话并删除其他人（如果可能，可以编辑它们），如记录中的列表的客户。

我想知道如何在客户端做到这一点，并得到服务器端的列表？ 有没有一个jquery插件或最好的实践呢？

P.S：我使用ASP.Net MVC 2

Answer 1

我把这个例子身边让我开始，只是把正确的东西在正确的文件和编辑它来搭配你在做什么：

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

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形式的数据：/

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

web服务方法的签名：

[的WebMethod（EnableSession =真）] 公共字符串SaveJson（字符串FormData） { }

Answer 2

连载的数据到像JSON格式，然后将其发送到服务器作为字符串。

Answer 3

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

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可以deserialise。

有一个称为JSON的标准很好，因为它在实际数据上几乎没有噪音（如xml，增加了很多数据传输量）。

然后，您可以使用jQuery的$.ajax将这些数据发送到您创建的WebMethod（请参阅链接）并获得可理解的响应。

编辑： 如果您已经是这个里面的东西，你可以简单地使用JSON.stringify()方法，传递对象/数组中它连载。