Dynamically Adding ASP.NET Repeater Item on Client-Side using JQuery

Question

I have the following repeater:

<asp:Repeater ID="_List" runat="server" DataSource="<%# GetList() %>">
    <HeaderTemplate>
<table class="dataList">
    <tr>
        <th>Name</th>
    </tr>
    </HeaderTemplate>
    <ItemTemplate>
    <tbody class="list-item">
        <tr>
            <td runat="server">
                <asp:DropDownList ID="_Name" runat="server" DataSource='<%# GetEmployeeList() %>'
                    DataTextField="Name" DataValueField="Value" />        
            </td>
        </tr>
    </tbody>
    </ItemTemplate>
    <FooterTemplate>
    <tr>
        <td colspan="3"></td>
        <td>
            <a id="_Add">Add</a>
        </td>
    </tr>
</table>

I would like to add a new row dynamically on the client-side using JQuery when the user clicks "_Add" button.

I am able to use the JQuery clone() method successfully to do this. I have also successfully re-sync the IDs inside the repeater to be sequential after adding new items (such as name="$ctl01$_Name" and id="_Name_0" ...etc)

However, when the user Submit the form, ASP.NET does not recognize the dynamically added items from the client-side using JQuery.

i.e. The list initially has 2 items. I've added 3 more items. Instead of Repeater.Items.Count getting 5 items in total, I only get 2 items when it postback.

Any ideas what am I missing??

Thanks all in advance!

ASP.Net needs to match data from client to data from server. So, if you add new items on client side, but won't create new items on server side, then repeater on server side just ignore data from client side. — Sergey Litvinov
– Sergey Litvinov, Commented Dec 18, 2013 at 23:52
@SergeyLitvinov, thanks for the quick reply. How do I sync client and server repeaters to match? — user3117252
– user3117252, Commented Dec 18, 2013 at 23:53
It's a good question. Could you please show code that you use for repeater on server side? like do you use DataSource or you create them manuallty, etc — Sergey Litvinov
– Sergey Litvinov, Commented Dec 18, 2013 at 23:56
@SergeyLitvinov, it's nothing fancy; I just have a List<Participant> object returned when the repeater calls DataSource=<%# GetList() %>. The repeater binds to this method when this.DataBind() is called on Page_Load (if not IsPostback). — user3117252
– user3117252, Commented Dec 18, 2013 at 23:59

Sergey Litvinov · Accepted Answer · 2013-12-19 00:33:21Z

Well, it's not so easy to do it on client side with JQuery. Repeaters saves count of items in his ViewState, and then it recreates them. This number of rows is hard to update, but in that case it will validate controls. And for new controls it will throw exception, as they are not registered with page. The property that manage this validation is EnableEventValidation , but changing it to false isn't good practice....

You can do it on server side, then it should works. You can make Add button as LinkButton, and handle it on server side to create new item for GetList source, and then you can try call DataBind again, so it will display one more row for new item. It's not so good as each Add will do new request to server, but in case of repeater it's hard to achieve such things. The same problem will be with GridView, as it also stores information in ViewState.

Luiz Eduardo · Accepted Answer · 2013-12-19 04:12:56Z

1

In my opinion, if you're using asp:repeater , the best approach is to use asp:UpdatePanel and do what you want on the codebehind...

When I want to do what you need with jquery/js, I don't use asp:repeater, I use basic html with js and a HiddenField with js triggering a postback, or direct use a generic handler and manual AJAX

answered Dec 19, 2013 at 4:12

Luiz Eduardo

3804 silver badges13 bronze badges

1 Comment

sh1rts Over a year ago

If you need a quick and easy solution the UpdatePanel approach will work fine. If you want to spend more time on it you should investigate using a client-side model binding framework like knockout.js

Collectives™ on Stack Overflow

Dynamically Adding ASP.NET Repeater Item on Client-Side using JQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related