![](/img/trans.png)
[英]How do I get id of server removed/update collection items at client side?
[英]How do I do a list of items in Jquery and get it on server side?
我正在嘗試列出項目列表(例如客戶的電話和家屬),例如,用戶可以包括一些數字電話並刪除其他電話(如果可能的話,可以對其進行編輯),例如客戶記錄中的列表。
我想知道如何在客戶端執行此操作並在服務器端獲取列表? 是否有jquery插件或最佳實踐呢?
PS:我正在使用ASP.Net MVC 2。
將數據序列化為JSON之類的格式,然后將其作為字符串發送到服務器。
當我必須學習它時,這些帖子非常有用。
http://encosia.com/2008/05/29/using-jquery-to-direct-call-aspnet-ajax-page-methods/ http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/
您可以將javascript數組序列化為ASP.Net可以反序列化的字符串。
有一個稱為JSON的標准,它很不錯,因為它幾乎不會對實際數據造成任何干擾(就像xml一樣,使很多要傳輸的數據量增加)。
然后,您可以使用$.ajax
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:
<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 = true)]公共字符串SaveJson(string FormData){}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.