Wie erstellt man eine dynamische Zeile in einer Tabelle mit der Razor-Ansicht in MVC4? - Javascript, asp.net-mvc-4, Rasierer, HTML-Tabelle

Ich habe eine Tabelle in der Rasiermesser-Ansicht und diese Tabelle enthält einige HTML-Steuerelemente wie folgt: -

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

Schaltfläche Kunden hinzufügen

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

Mein Problem ist, dass ich diese Tabelle wie ein Rastersteuerelement haben möchte und wenn ich auf klicken "Add Customer" Schaltfläche wird eine leere Zeile im Rastersteuerelement hinzugefügt.

Bitte hilf mir!

Jede Hilfe wird geschätzt

Antworten:

Es ist zu einfach, jedem Element eine ID und Zugriffswerte zuzuweisen und dann eine Tabelle zu füllen

mögen

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