Как я могу добавить новую таблицу с событием нажатия кнопки MVC?

Question

У меня есть таблица с текстовым полем с просьбой указать имя и адрес для справки. Если нужно, я бы хотел, чтобы у пользователя была возможность добавлять больше, а не ограничиваться одним. Как добавить новую таблицу в форму, нажав на кнопку «getMore»?

<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

Просто отметьте эту статью . Вы можете привязать к списку ссылок без какой-либо боли. Все, что вам нужно сейчас, это немного изменить ваш контроллер и добавить другую таблицу в html, используя javascript и обновить идентификатор, нажав на кнопку. И это очень легко сделать с помощью jQuery.

Answer 2

Один из способов - настроить метод действия так, чтобы он принимал опубликованные элементы управления, отправлял данные в базу данных и заново создавал представление с добавленной таблицей (аналогично обратной передаче в веб-формах). Постбэк может быть обёрнут в AJAXForm, чтобы сделать его богатым пользовательским интерфейсом.

Вы также можете создать таблицу программно с помощью JavaScript, используя DOM для создания таблицы, строки, ячейки и элементов управления.

Наконец, JQuery может передавать частичное представление клиенту через AJAX. Вы можете настроить таблицу как частичное представление, передавать ее клиенту при нажатии на ссылку.

Какой из этих вариантов вам нравится? Тогда я могу дать вам более подробную информацию.

РЕДАКТИРОВАТЬ: Чтобы использовать JQUery, вы можете добавить метод действия к контроллеру, как:

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

В представлении, используя jquery, вы можете сделать это:

$.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");
});

Проверьте JQuery.com, вкладку документации для получения дополнительной информации (вкладка манипуляции, ссылка не нужна, извините).