ASP.NET直放站就地编辑

介绍
最近，有人问如何使用ASP.NET Repeater控件增加新的项目的数据源，它必将​​在论坛。由于话语有时不传达足够的认识，我把这个范例显示如何在这种情况下，可以使用Repeater控件一起就地编辑。
此示例包含两个版本，一个服务器端导向的方法，和一个客户端导向的方法，使用AJAX。中继器与GridView的
当提供就地编辑和添加行，想到的第一件事通常是使用ASP.NET GridView控件。这篇文章是不是两个控件之间也不时/如何选择一个比其他的差异，但在快看差异显示了这一点:GridView的直放站默认情况下，表布局使用模板已选择/修改/删除命令必须手动添加内置寻呼机支持必须手动添加 列排序必须手动添加
虽然不是一个详尽的清单，它仿佛在GridView拥有明显的优势，通过提供更多内置功能。然而，所有这些功能是有代价的。 GridView是一个非常quot; heavyquot;控制上广泛使用的ViewState来正常工作，并在某些情况下增加了太多的开销到一个页面。这是一个ASP.NET Repeater控件时可以有优势。服务器端方法
在这第一种方法，我会依靠传统的编码使用回传和数据绑定事件提供功能服务器端。我包裹在Repeater控件和ASP.NET的UpdatePanel，减少页面刷新，但在其他方面也有只是一个客户端的代码涉及的几行。

<asp:UpdatePanel runat="server">

    <ContentTemplate>

        <asp:Repeater runat="server" ID="Repeater1" 

        OnItemCommand="OnItemCommand" OnItemDataBound="OnItemDataBound">

            <HeaderTemplate>

                <table border="0" cellpadding="0" cellspacing="0">

                    <tr>

                        <th></th>

                        <th>First Name</th>

                        <th>Last Name</th>

                    </tr>

            </HeaderTemplate>

            <ItemTemplate>

                <tr>

                    <td>

                        <asp:ImageButton ID="Edit" 

                        ImageUrl=" /Images/EditDocument.png" 

                        runat="server" CommandName="edit" />

                        <asp:ImageButton ID="Delete" 

                        ImageUrl=" /Images/Delete_black_32x32.png" runat="server"

                            CommandName="delete" />

                    </td>

                    <td>

                        <asp:Label runat="server" 

                        ID="firstName"><%# Eval

                        ("FirstName") %></asp:Label>

                        <asp:PlaceHolder runat="server" 

                        ID="firstNameEditPlaceholder" />

                        <input type="hidden" runat="

                        server" id="firstNameHidden" />

                    </td>

                    <td>

                        <asp:Label runat="server" ID="

                        lastName"><%# Eval("LastName") %></asp:Label>

                        <asp:PlaceHolder runat="server" 

                        ID="lastNameEditPlaceholder" />

                        <input type="hidden" runat="

                        server" id="lastNameHidden" />

                    </td>

                </tr>

            </ItemTemplate>

            <FooterTemplate>

                <tr>

                    <td>

                        <asp:ImageButton ID="Delete" 

                        ImageUrl=" /Images/112_Plus_Blue_32x32_72.png" runat="server"

                            OnClick="OnAddRecord" />

                    </td>

                    <td><asp:TextBox runat="server" 

                    ID="NewFirstName" /></td>

                    <td><asp:TextBox runat="server" 

                    ID="NewLastName" /></td>

                </tr>

                </table>

            </FooterTemplate>

        </asp:Repeater>

    </ContentTemplate>

</asp:UpdatePanel>    

public class Data

{

    public Data()

    {

    }



    public int NextId

    {

        get

        {

            int id = 0;

            if(Contacts.Count != 0)

            {

                id = Contacts.Max(c => c.ID) + 1;

            }

            return id;

        }

    }



    public List<contact /> Contacts

    {

        get

        {

            if(HttpContext.Current.Session["contacts"] == null)

            {

                HttpContext.Current.Session["contacts"] = new List<contact />();

            }

            return HttpContext.Current.Session["contacts"] as List<contact />;

        }

    }

}

function NewRow(tr)NewRow(tr)

{

    // If only one sibling then create a new row

    // otherwise just clone an existing one

    if(tr.siblings().length != 1)

    {

        var clone = tr.prev().clone();

        tr.before(clone);

    }

    else

    {

        var newRow = "<tr id=''>" +

            "<td>" +

                "<image id='edit' src='Images/EditDocument.png' class='imgButton' />" +

                "<image id='delete' 

			src='Images/Delete_black_32x32.png' class='imgButton'/>" +

            "</td>" +

            "<td>" +

                "<span ID='firstName'></span>" +



            "</td>" +

            "<td>" +

                "<span ID='lastName'></span>" +

            "</td>" +

        "</tr>";

        tr.before(newRow);

    }



    return tr.prev();

}