如何在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()方法，傳遞對象/數組中它連載。