На подчиненной формы добавления значения формы в таблицу

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> 

, но это не работает

Edit 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. Нажмите событие кнопки «Отправить» -

<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

Ok обновляя мой ответ сейчас, что я лучше понял ваш вопрос :)

Сначала мы берем входы:

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: