Какова лучшая стратегия для извлечения данных формы? клиентский AJAX / сервер

Question

Недавно я познакомился с обработкой данных форм Ajax, включая использование jTemplates для обеспечения некоторой повторяемости и jQuery, отличную библиотеку.

Но я немного растерялся. При взаимодействии пользователя с формой я использую Ajax-вызовы и работаю с чистой HTML-разметкой. Так что если я хочу связать данные формы при загрузке формы, мне нужно сделать это с помощью Ajax с помощью jQuery / JS. Это не кажется мне хорошим. Мне кажется, что инициализация onLoad должна происходить только на сервере . Однако тогда мне нужно найти способ раскрыть разметку формы, чтобы последующие взаимодействия Ajax были простыми.

Например, если я хочу привязать какой-либо список на сервере, какой элемент управления может обработать это таким образом, чтобы позже я мог добавлять / удалять элементы с помощью Ajax?

Я надеюсь, что я ясно изложил свою точку зрения. Спасибо за помощь!

Answer 1

Самый простой способ добиться этого - использовать панель обновления.

Если вы поместите свой ретранслятор в панель обновлений, когда ваш пост удаления будет удален, панель обновлений обновит только то, что когда-либо было внутри этой панели обновлений.

Итак, создайте свою строку, используя свой ретранслятор, добавьте кнопку удаления, которая затем удалит эту строку из базы данных.

Если вы работаете без ajax (отправка всей страницы), а затем добавляете панель обновления, она «должна» работать прямо из коробки.

Для примера рассмотрим http://www.asp.net/ajax/documentation/live/Tutorials/CreatingPageUpdatePanel.aspx.

Привет

Gavin

Answer 2

@ Rex способ сделать ваш пример прост. сделать некоторые повторители управления

                                <table id="suppliers" >
                                <tbody>
                            <asp:Repeater ID = "rptSuppliers" runat = "server">
                                <ItemTemplate>
                                    <tr style = "padding:10px;" class = "supplier" tag = '<%# Eval("ID") %>' id = 'supplier_<%# Eval("ID") %>'>
                                        <td style = "width:200px;">ספק:&nbsp;<%# Eval("Supplier.Group.GroupName") %></td>
                                        <td style = "width:200px;">איש קשר:&nbsp;<%# Eval("Supplier.Profile.ProfileData.FullName")%></td>
                                        <td>מחיר:&nbsp;
                                        <%--כדי שהולדיאציה תבוצע כיאות לשדה צריך להיות שם ומזהה זהים אבל ייחודיים--%>
                                        <input class = "required price" name ="price<%# Eval("Supplier.ID") %>" id = "price<%# Eval("Supplier.ID") %>"  type="text" value = '<%# Eval("Price","{0:n2}") %>' min ="0"  style ="width:60px;"/>
                                        <input class ="supplier_id" type ="hidden" value = '<%# Eval("Supplier.ID") %>' />
                                        </td>
                                        <td style = "padding-right:10px;">
                                        <img src ="../../Images/remove40_32x32.gif" height ="16" width = "16" title = 'הסר' style = "float:right;" id = "sremove"
                                        onclick = "removeClick(this)"
                                        onmouseout = "removeOut(this)"
                                         onmouseover = "removeOver(this)" />
                                         </td>
                                    </tr>
                                </ItemTemplate>
                            </asp:Repeater>

                                                    </tbody>
                            </table>

просто связать при загрузке некоторые данные

        rptSuppliers.DataSource = product.Suppliers;
    rptSuppliers.DataBind();

и самое главное это клиентская сторона. вы можете создать тамплет, идентичный содержимому повторителя, который тамплет генерирует с помощью плагина mTamplate jquery.

    <script type="text/html" id="suppliers_tmpl">   
<tr style = "padding:10px;" class = "supplier" tag = '<#= ID #>' id = 'supplier_<#= ID #>'>
    <td style = "width:200px;">ספק:&nbsp;<#= Supplier #></td>
    <td style = "width:200px;">איש קשר:&nbsp;<#= Contact #></td>
    <td>מחיר:&nbsp;
    <input class = "required price" name ="price<#= SupplierID #>" id = "price<#= SupplierID #>" type="text" value = '<#= Price #>' min ="0" style ="width:60px;"/>
    <input class ="supplier_id"  type ="hidden" value = '<#= SupplierID #>'  />
    </td>
    <td style = "padding-right:10px;"><img src ="../../Images/remove40_32x32.gif" height ="16" width = "16" title = 'הסר' style = "float:right;" id = "sremove"
        onclick = "removeClick(this)"
        onmouseout = "removeOut(this)"
        onmouseover = "removeOver(this)" />
    </td>
</tr>
</script>

и затем, если вы хотите добавить этот шаблон к вашему столу

function UpdatesupplierItem(supplier) {
// Retrieve the Item template
var template = $("#suppliers_tmpl").html();
// Parse the template and merge stock data into it
var html = parseTemplate(template, supplier);
// Create jQuery object from gen'd html
var newItem = $(html);

var item_id = "supplier_" + supplier.SupplierID;
//נוסיף פריט רק במידה ואיננו קיים
var origItem = $("#" + item_id);
if (origItem.length < 1)
    newItem.appendTo("#suppliers tbody");
else
    origItem.after(newItem).remove();
return newItem;

}

сделать ваши html-элементы доступными для jquery (по id или классу). и пойти на это.

подробнее западный ветер там вы можете получить некоторые ссылки на источник, и у вас есть широкие примеры ..