在表单提交时将表单值添加到表中

Question

我认为有以下表格：

    @using(Ajax.BeginForm("AddAttendeeInternalAddressBook", "Attendee", new AjaxOptions { HttpMethod = "POST", OnSuccess = "doneInternalAddressBook" }))
    {
         @Html.HiddenFor(m=>m.SelectedAddressBookPerson.FirstName)
         @Html.HiddenFor(m=>m.SelectedAddressBookPerson.LastName)
         @Html.HiddenFor(m=>m.SelectedAddressBookPerson.AppointmentId)
         <div class="form-group">
              @Html.LabelFor(m => m.SelectedAddressBookPerson.Email, new { @class = "col-md-2 control-label" })
              <div class="col-md-8 input-group">
                   @Html.TextBoxFor(m => m.SelectedAddressBookPerson.Email, new { id = "SelectedAddressBookPerson", @class = "form-control", PlaceHolder = "Search in AddressBook..." }) 

                   <input type='submit' id="btnAddressBook" class="btn btn-default" value="Add>>">
              </div>
          </div>               
    }

还有这张桌子：

<table class="table table-striped table-hover" id="tableAttendees">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr>

    </tr>
</table>

每当提交表单时，我都想将表单中的值（名字、姓氏、电子邮件等）添加到表中。我应该怎么做才能做到这一点？

控制器方法

   [HttpPost]
    public void AddAttendeeInternalAddressBook(CreateAppointmentSelectPersons internalAddressbookPerson)
    {
        _attendeeRepository.AddInternalAddressBookAttendee(
            internalAddressbookPerson.SelectedAddressBookPerson.AppointmentId,
            internalAddressbookPerson.SelectedAddressBookPerson.FirstName,
            internalAddressbookPerson.SelectedAddressBookPerson.LastName,
            internalAddressbookPerson.SelectedAddressBookPerson.Email);

    }

我还可以添加一个函数，将表单值作为表的 json 数据返回，但这意味着要返回数据库并加载数据，每次用户提交表单或添加一些值时，表都应该更新到数据库可能是性能问题？我认为让 jquery 函数将表单值推送到表会更好，但是我对 jquery 了解不多（只是一个初学者）

public ActionResult AttendeeTableData(Guid appointmentId)
{
    var attendees = _attendeeRepository.GetAttendees(appointmentId);
    return Json(attendees);
}

编辑1： 这就是我试图做的

<script type="text/javascript">    
    $(function () {

        $("#SelectedAddressBookPerson").autocomplete({
            source: '/Appointment/AddressBookPerson',
            minLength: 1,
            select: function(event,ui) {
                $(@Html.IdFor((m=>m.SelectedAddressBookPerson.FirstName))).val(ui.item.FirstName);
                $(@Html.IdFor(m=>m.SelectedAddressBookPerson.LastName)).val(ui.item.LastName);
            },
        });

    });
    $(function () {
        $("#btnAddressBook").on('click', function () {
            $("#form2").submit(function () {
                var fields = $(":input");
                jquery.each(fields, function (i, field) {
                    $("#tableAttendees").find('tbody tr:last').append("<td>" + field.value + "</td>")
                });
            })
        })
    });

</script>

但这不起作用

编辑 2：

@using(Ajax.BeginForm("AddAttendeeInternalAddressBook", "Attendee", new AjaxOptions { HttpMethod = "POST", OnSuccess = "doneInternalAddressBook" }))
{
     @Html.HiddenFor(m=>m.SelectedAddressBookPerson.FirstName)
     @Html.HiddenFor(m=>m.SelectedAddressBookPerson.LastName)
     @Html.HiddenFor(m=>m.SelectedAddressBookPerson.AppointmentId)
     <div class="form-group">
          @Html.LabelFor(m => m.SelectedAddressBookPerson.Email, new { @class = "col-md-2 control-label" })
          <div class="col-md-8 input-group">
               @Html.TextBoxFor(m => m.SelectedAddressBookPerson.Email, new { id = "SelectedAddressBookPerson", @class = "form-control", PlaceHolder = "Search in AddressBook..." })                         
               <input type='submit' id="btnAddressBook" class="btn btn-default" value="Add>>">
          </div>
      </div>               
} 

<table class="table table-striped table-hover table-bordered" id="tableAttendees">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>       
@section Scripts{
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/Scripts/jquery-ui-1.10.4.min.js")
    @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
    @Scripts.Render("~/bundles/Kendo")
    @Scripts.Render("http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js")

    <script id ="personTmpl" type="text/x-jquery-tmpl">
        <tr>
            <th>${FirstName}</th>
            <th>${LastName}</th>
            <th>${Email}</th>
        </tr>
    </script>

    <script>
        $(function () {
            $("#btnAddressBook").click(function (e) {
                var model = new Object();

                model.FirstName = $(@Html.IdFor(m=>m.SelectedAddressBookPerson.FirstName)).val();
                model.LastName = $(@Html.IdFor(m=>m.SelectedAddressBookPerson.LastName)).val();
                model.Email = $(@Html.IdFor(m=>m.SelectedAddressBookPerson.Email)).val();

                $("#personTmpl").tmpl(model).appendTo("#tableAttendees");
            })
        })
    </script>
    <script type="text/javascript">    
        $(function () {

            $("#SelectedAddressBookPerson").autocomplete({
                source: '/Appointment/AddressBookPerson',
                minLength: 1,
                select: function(event,ui) {
                    $(@Html.IdFor((m=>m.SelectedAddressBookPerson.FirstName))).val(ui.item.FirstName);
                    $(@Html.IdFor(m=>m.SelectedAddressBookPerson.LastName)).val(ui.item.LastName);
                },
            });

        });   
    </script>
}

Answer 1

这里还有一个使用 JQuery 模板的答案 -

首先参考以下 JQuery 库 -

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script>

然后创建您要填写详细信息的模板 -

<script id="personsTmpl" type="text/x-jquery-tmpl">
    <tr>
        <th>${FirstName}</th>
        <th>${LastName}</th>
        <th>${Email}</th>
    </tr>
</script>

下一步在 html 中定义表格 -

<table class="table table-striped table-hover" id="tableAttendees">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr></tr>
</table>

在页面上有一个提交按钮 -

<input type="submit" value="click" id="click" />

最后处理提交按钮的JQuery Click事件——

<script>
    $(function () {
        $('#click').click(function (e) {
            var model = new Object();

            // Here you need to get the values using $('#id').val() and fill the model
            model.FirstName = "Rami";
            model.LastName = "Vemula";
            model.Email = "Email@E.com";

            $("#personsTmpl").tmpl(model).appendTo("#tableAttendees");
        });
    });
</script>

现在，当您运行应用程序并单击提交按钮时，您将看到附加到下表中的值，如下所示 -

Answer 2

现在我更好地理解了你的问题，所以更新我的答案:)

首先我们获取输入：

var fields = $( ":input" );

然后我们遍历它们并添加到表中。

jQuery.each( fields, function( i, field ) {     

    $("#tableAttendees").find('tbody tr:last') //this appends the data you want to the table
       .append("<td>" + field.value + "</td>");
});

总体而言，您会得到：

$("#form2").submit(function() {
     var fields = $( ":input" );
     jQuery.each( fields, function( i, field ) {             
            $("#tableAttendees")
             .find('tbody tr:last') //this appends the data you want   to the table
             .append("<td>" + field.value + "</td>");
     });
});

这里是 JS Fiddle 的链接：