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);
}

EDIT1：这就是我试图做的事情

<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" />

最后处理Submit按钮的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>

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

enter image description here

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的链接：

在表单提交时向表格添加表单值

2 个答案: