在提交表单添加表单值表

我有我的看法如下形式：在提交表单添加表单值表

@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> 
}

来源

2014-02-06 Cybercop

是在同一个页面产生的这两种成分？ –

你能告诉我们你的控制器行为代码吗？ – ramiramilu

@AndreiV是的，它是同一页面，你的想法是将人们添加到你的约会中，每次用户添加到他的约会时，他可以看到他添加在他旁边的人的列表。 – Cybercop

这里去多了一个答案通过使用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 protected]"; 

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

现在，当你运行应用程序，并点击提交按钮，您将看到值获得附加表如下 -

enter image description here

来源

2014-02-06 09:29:02 ramiramilu

所以我的Ajax形式保持原样？我必须添加您提到的js代码？ – Cybercop

@ Biplov13，是的，应该够了。 – ramiramilu

会给它一个镜头然后让你知道会发生什么 – Cybercop

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

来源

2014-02-06 08:35:30

抱歉，在表中添加的值在哪里？ – Cybercop

@ Biplov13你是对的，我误解了你的问题。将尽快更新 –

@ Biplov13更新了我的答案。希望现在有帮助。 –

在提交表单添加表单值表

回答

相关问题