CODEWITHSUNDEEP
jqueryasp.netwebformsrepeater
user3117252
user3117252

Reputation: 399

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

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!

Upvotes: 0

Views: 4101

Answers (2)

Luiz Eduardo
Luiz Eduardo

Reputation: 380

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

Upvotes: 1

Sergey Litvinov
Sergey Litvinov

Reputation: 7458

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.

Upvotes: 1

Related Questions