what is the best strategy to retrieve form data? client ajax / server

Question

Recently I introduced to Ajax base form including the use of jTemplates to guarantee some repeat .. and other jQuery great library.

But for now I'm a little confused. With the form - user interaction I use Ajax call and deal with pure HTML markup. So if I want to bind form data on load I need to do that with the Ajax way by jQuery/JS. This doesn't seem good to me. I feel that onLoad initializing should occur on the server but then I need to find some way to put the markup, so that later with Ajax interaction it will be easy.

For example, if I want to bind some list on the server, what control can handle this in a way that later I can add/delete items with Ajax?

I hope that I made my point clear. Thanks for the help!

Answer 1

@Rex the way to do your example is simple. make some repeater control

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

just bind onload some data

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

and the most important is the client side. you can make some identical content tamplaete to the repeater the tamplate is ganerated by mTamplate jquery plugin.

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

and then if you want to append this tamplate to your table

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;

}

make your html elements accessible for jquery (by id or class). and go for it.

more info west-wind there you can get some links to the source and you have wide examples..

Answer 2

The easiest way for you to achieve this is to use an Update Panel.

If you put your repeater inside an update panel, when your delete post back is fired, the update panel will only refresh what ever is inside that Update Panel.

So, construct your row using your repeater, add the delete button which then deletes that row from the database.

If you get it working without ajax (whole page post back) and then add the Update Panel, it "should" work straight out of the box.

Take a look at http://www.asp.net/ajax/documentation/live/Tutorials/CreatingPageUpdatePanel.aspx for an example.

Regards

Gavin