[英]How do I do a list of items in Jquery and get it on server side?
I'm trying to make a list of items (telephones and dependents for a customer), for example, the user could include some number phones and remove others (maybe edit them if it is possible), like a list inside the record of customer. 我正在尝试列出项目列表(例如客户的电话和家属),例如,用户可以包括一些数字电话并删除其他电话(如果可能的话,可以对其进行编辑),例如客户记录中的列表。
I'd like to know how can I do it on client side and get the list in server side ? 我想知道如何在客户端执行此操作并在服务器端获取列表? Is there a jquery plugin or a best pratice to do it?
是否有jquery插件或最佳实践呢?
PS: I'm using ASP.Net MVC 2. PS:我正在使用ASP.Net MVC 2。
将数据序列化为JSON之类的格式,然后将其作为字符串发送到服务器。
When I had to learn it, these posts were extremely useful. 当我必须学习它时,这些帖子非常有用。
http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/ 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/
http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/
You can serialise a javascript array into a string that ASP.Net can deserialise. 您可以将javascript数组序列化为ASP.Net可以反序列化的字符串。
There is a standard called JSON which is good, as it adds nearly no noise on the actual data (like xml does, incrementing a LOT the amount of data to transfer). 有一个称为JSON的标准,它很不错,因为它几乎不会对实际数据造成任何干扰(就像xml一样,使很多要传输的数据量增加)。
You can then use the $.ajax
jquery method to send this data to a WebMethod you created (see links) and get an understandable response back. 然后,您可以使用
$.ajax
jquery方法将此数据发送到您创建的WebMethod(请参阅链接),并获得可理解的响应。
EDIT : If you were already inside this stuff, you can simply use the JSON.stringify()
method, passing the object/array to serialise in it. 编辑 :如果您已经在其中,可以简单地使用
JSON.stringify()
方法,将对象/数组传递给它进行序列化。
I keep this example around to get me started, just put the proper stuff in the proper files and edit it to match what you are doing: 我将继续这个示例,以便将我入门,只需将适当的内容放入适当的文件中,然后对其进行编辑以匹配您的工作:
/* in this case I am using */ / *在这种情况下,我正在使用* /
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 */ / * 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 of the form data: / / 表单数据的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>
/* form layout snip */ / *表单布局代码* /
<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" />
signature of the web service method: Web服务方法的签名:
[WebMethod(EnableSession = true)] public string SaveJson(string FormData) { } [WebMethod(EnableSession = true)]公共字符串SaveJson(string FormData){}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.