Come creare una riga dinamica in una tabella usando Razor view in MVC4? - javascript, asp.net-mvc-4, razor, html-table

Ho una tabella nella vista del rasoio e questa tabella contiene alcuni controlli HTML come di seguito: -

  <table style="text-align: center; width: 680px; background-color: White;" rules="all" id="tableId">
<tr>
<td style="width: 20px;"></td>
<td>
<label>
Campaign Name</label>
</td>
<td>
<label>
Valid Date From</label>
</td>
<td>
<label>
Valid Date To</label>
</td>
<td>
<label>
Is Active</label>
</td>
<td>
<label>
ContractPDF</label>
</td>
<td>
<label>
Browse Contract</label>
</td>
</tr>
<tr>
<td>
@Html.HiddenFor(m => m.Customer_ID)
</td>
<td class="trBorder">
@Html.TextBoxFor(m => m.Customer_Name)
</td>
<td class="trBorder">
@Html.TextBoxFor(m => m.ValidFrom, new { @class = "datepicker" })
</td>
<td>
@Html.TextBoxFor(m => m.ValidTo, new { @class = "datepicker" })
</td>
<td>
@Html.CheckBox("gridChkCampaignIsActive", m => m.IsActive)
</td>
<td>
@Html.TextBoxFor(m => m.ContractDocumentPath)
</td>
<td>
@Html.ActionLink("Browse", "FileUpload")
</td>
</tr>
</table>

Aggiungi pulsante cliente

<input type="button" value="Add Customer" name="btnAddCustomer" id="btnAddCustomer" style="margin-left: 20px;"/>

Il mio problema è che voglio questa tabella come un controllo griglia e quando faccio clic su "Add Customer" pulsante, una riga vuota verrà aggiunta nel controllo griglia.

mi aiuti per favore!

Qualsiasi aiuto sarà apprezzato

risposte:

È troppo semplice assegnare a ciascun elemento un ID e valori di accesso e quindi popolare una tabella

piace

@Html.TextForFor(m=>m.name, new {@class="form-control", id="name"})
//then dynamically table to be populated via javascript
<table id="tbl">
<thead></thead>
<tbody></thead>
</table>
<input type="button" value="Add Customer" name="btnAddCustomer" id="btnAddCustomer" style="margin-left: 20px;"/>
//assume that u have assign id to text boxes like a, b, c, and ,so on..
<script>
$.(#btnAddCustomer).click(function () {
var pc = $("#pcode").val();
var p = $("#a").val();
var q = $("#b").val();
var e = $("#c").val();
var rows = "";
rows += "<tr>"
rows += "<td>" + p + "</td>"
rows += "<td>" + q + "</td>"
rows += "<td>" + r + "</td>"
rows += "</tr>";
$("#tbl tbody").append(rows);

})
</script>