How can I add a new Table with a Button click event MVC?

Question

I have a table with text box asking for Name and Address for reference. If need be, I would like the user to have the ability to add more and not be restricted to just one. How would I add a new table to a form by clicking on my "getMore" button?

<table style="width:50%;">
            <tr>
                <th colspan="2">Reference</th>
            </tr>
            <tr>
                <td>Name</td>
                <td><input id="txtRefName" type="text" /></td>
            </tr>
            <tr>
                <td>Address</td>
                <td><input id="txtRefAddress" type="text" /></td>
            </tr>
            <tr>
                <td>City</td>
                <td><input id="txtRefCity" type="text" /></td>
            </tr>
            <tr>
                <td>State</td>
                <td><input id="txtRefState" type="text" /></td>
            </tr>
            <tr>
                <td>Zip</td>
                <td><input id="txtRefZip" type="text" /></td>
            </tr>            
            <tr>
                <td>Phone</td>
                <td>(H)<input id="txtOtherHPhone" type="text" /><br />
                    (W)<input id="txtOtherWPhone" type="text" />
                </td>
            </tr>
        </table>
        <br />
    <asp:Label ID="Label1" runat="server" Width="30%"></asp:Label>
    <input  type="button" name="getPrev" value="Prev" onclick="history.back(-1)" />
    <asp:Label ID="Label2" runat="server" Width="10%"></asp:Label>  
    <input type="submit" name="getMore" value="More..." />
    <asp:Label ID="Label3" runat="server" Width="10%"></asp:Label>

Answer 1

Hey,

One way is to setup your action method to accept the posted controls, submit the data to the database, and recreate the view with the added table (similar to postbacks in web forms). The postback can be wrapped in an AJAXForm to help make it a rich ui.

You can also create the table programmatically with javascript by using the DOM to create a table, row, cell, and control elements.

Lastly, JQuery can stream a partial view to the client via AJAX. You could setup the table as a partial view, stream it to the client when the link is clicked.

Any of these options appeal to you? I can give you more details then.

EDIT: To use JQUery, you can add an action method to a controller like:

public class TestController {
public ActionResult GetAsync()
{
     return PartialView("MyView");
}
}

In the view, using jquery, you can do this:

$.get("/Test/GetAsync", function(data) {
    //Data is html so we just need to clear the previous result (if needed)
    //And add the new data

    $("#paneltoshow").html(data);
    //or use an alternate approach like:
    $("<div/>").html(data).appendTo("#paneltoappendto");
});

Check out JQuery.com, documentation tab for more information (manipulation tab, don't have the link handy, sorry).

Answer 2

Just check this article. You can bind to a list of references without any pain. All you need now is to modify your controller a bit and to add another table to html using javascript and update the identifier on a click on the button. And it's very easy to do using jQuery.