CODEWITHSUNDEEP
asp.netjquery
Jeff
Jeff

Reputation: 1774

jquery.clone() and ASP.NET Forms

So I have a page where I would like to be able to add multiple, dynamic users to a record in a database. Here's the rough start page:

    <div id="records">
        <div id="userRecord">
            Name: <asp:TextBox runat="server" ID="objNameTextBox"></asp:TextBox> <br />
            Phone Number: <asp:TextBox runat="server" ID="objPhoneNumberTextBox"></asp:TextBox> <br />
        </div>
    </div>

And the jquery:

   $(function () {
   $(".button").button().click(function (event) { addnew(); event.preventDefault(); });
    })
    function addnew() {
        $('#userRecord').clone().appendTo('#records');
    }

So my question is what do I use within ASP.NET to be able to poll all of the data in the form and add a unique record for each #userRecord div within the #records div? Yes - I should change the userRecord to a class - I will deal with that. This is just simple testing here.

Should I look in JSON for this type of function? I'm not familiar with it but could figure it out if that is indeed my best option. Thanks for the guidance!

Upvotes: 1

Views: 1853

Answers (2)

Kenny Evitt
Kenny Evitt

Reputation: 9801

If you're trying to add new records during postback of the ASP.NET page, then ... good luck. I'm not sure you CAN add new 'items' to a list client-side. ASP.NET WebForms uses the view state (which is really just a big blob of information embedded directly in the HTML of the page that's returned to the user) to maintain the state of the page and I don't think you can easily (I'm sure it's theoretically possible) update the view state client-side (regardless of whether you're using jQuery or even JavaScript).

Maybe my own situation is similar enough. If I have a page with a list of items and I wish to allow the user to add new items, I'd add the appropriate input fields, as you've done, and add a special button for which I'd bind a JavaScript function (via jQuery) that makes an AJAX request to a web-service (another item in your Visual Studio project) and passes data back-and-forth using JSON (much simpler than using the default XML). That way the entire page doesn't need to be posted to the web server for the user to make changes to the backend data and you don't need to (somehow) parse the page data itself to determine what items need to be added to the database.

Upvotes: 0

Francisco Soto
Francisco Soto

Reputation: 10392

You cannot duplicate ASP.NET web forms controls with Javascript, because the runtime keeps tracks of the controls in your HTML, if you try to duplicate them with Javascript, you duplicate the HTML and they may look the same, but ASP.NET won't know anything about them.

You could do it using an UpdatePanel, and triggering a post back in it with your button and create the controls in your backend programmatically and appending them to said panel, that would mimic what you are trying to do.

Another way would be creating HTML inputs and submitting the things to a web service, or a web method and do the actual insertions to the database there, but normal ASP.NET methods won't work on said inputs, as they are not controls as far as ASP.NET is concerned.

Upvotes: 2

Related Questions