[英]How to add a dropdown list to a dynamic row in MVC with Javascript and bind value to model
I would like to add a dropdown list to a row created in javascript and bind the id or text of the selected dropdown item with my model.我想在 javascript 中创建的行中添加一个下拉列表,并将所选下拉项的 id 或文本与我的 model 绑定。
Here is the table:这是表格:
<table id="LineItems" class="table table-bordered fixed">
<thead>
<tr>
<th width="10%" class="text-center">
@Html.Label("Qty")
</th>
<th width="40%" class="text-center">
@Html.Label("Description")
</th>
<th width="15%" class="text-center">
@Html.Label("Project Number")
</th>
<th width="10%" class="text-center">
@Html.Label("Unit Cost")
</th>
@if (Model.CanCreateCustSignOff == true)
{
<th width="10%" class="text-center">
@Html.Label("Custom Sign off")
</th>
<th width="20%" class="text-center">
@Html.Label("Approver")
</th>
}
<th width="10%" class="text-center">
@Html.Label("Action")
</th>
</tr>
</thead>
<tbody id="lineItems">
</tbody>
</table>
<div>
<input type="button" value="Add Line Item" class="btn btn-primary" onclick="addLineItem()" />
</div>
View Model - The Select List item is populated by the controller and consists of text = usernames and the value being the Guid.查看 Model - Select 列表项由 controller 填充,由文本 = 用户名和 Guid 值组成。 This data is from the database and I will not know how many users will be added.
这些数据来自数据库,我不知道会添加多少用户。
public List<string> Approvers { get; set; }
public class LineItems
{
public int Qty { get; set; }
public string Description { get; set; }
public decimal UnitCost { get; set; }
public decimal LineItemCost { get; set; }
public string ProjectNumber { get; set; }
public bool CustSignOff { get; set; }
public string ApproverId { get; set; }
public Guid? ProjectId { get; set; }
}
Javascript - I've been able to successfully bind the entries of all rows created with my model by using the below. Javascript - 我已经能够使用下面的方法成功绑定使用我的 model 创建的所有行的条目。
function addLineItem() {
@{ Model.LineEntry.Add(new PurchaseAuth.ViewModel.NewPurchAuthViewModel.LineItems());}
//Generate Index
var index = counter;
var reqLineItemSignOff = "";
var selectApprover = "";
//Data Cells
var qtyCell = "<td align='center' width='10%'><input id='LineEntry_" + index + "__QTY' name='LineEntry[" + index + "].Qty' type='number' value='0' min='0' step='1' class='qtyField form-control' /></td>";
var descCell = "<td align='center' width='40%'><input id='LineEntry_" + index + "__Description' name='LineEntry[" + index + "].Description' type='textarea' value='' class='descField form-control' /></td>";
var projNumberCell = "<td align='center' width='15%'><input id='LineEntry_" + index + "__ProjNumber' name='LineEntry[" + index + "].ProjectNumber' type='text' value='' class='projNumField form-control' /></td>";
var unitCostCell = "<td align='center' width='10%'><input id='LineEntry_" + index + "__UnitCost' name='LineEntry[" + index + "].UnitCost' type='number' value='0.00' min='0.00' step='.01' class='unitCostField form-control' /></td>";
//If User has override access
if (override == "True") {
reqLineItemSignOff = "<td align='center' width='10%'> <input id='LineEntry_" + index + "__CustSignOff' name='LineEntry[" + index + "].CustSignOff' type='checkbox' value='true' class='form-control chkLineItemSignOff' /></td>"
var approverList = JSON.parse('@Html.Raw(Json.Encode(@Model.Approvers))');
selectApprover = "<td align='center' width='10%'><select id='LineEntry_" + index + "_ApproverId' name='LineEntry[" + index + "].ApproverId' /></td>";
$(approverList).each(function () {
var option = $("<option />");
option.text(this);
option.val(this);
});
}
//Index Cell prevents delete button from removing all items up to entry
var indexCell = "<td style='display:none'> <input name='LineEntry.Index' type='hidden' value='" + index + "' /></td>";
//Button For Removal
var removeCell = "<td align='center' width='10%'><input id='btnDelLine'" + index + "type='button' value='Remove' onclick=\"removeRow('" + index + "')\" class='btn btn-primary remBtn' /></td>";
//Create New Row
var newRow = "<tr id='trLineItem" + index + "'>" + indexCell + qtyCell + descCell + projNumberCell + unitCostCell + reqLineItemSignOff + selectApprover + removeCell + "</tr>";
//Add Row to Table
$("#lineItems").append(newRow);
//Increase counter
counter++;
}
Update1: Guid isn't needed I can lookup by name.更新 1:不需要 Guid 我可以按名称查找。 Update2: Made some progress just need to figure out how to add options.
Update2:取得了一些进展,只需要弄清楚如何添加选项。
I was able to solve this by creating the row then adding the options to the ID using:我可以通过创建行然后将选项添加到 ID 来解决这个问题:
approverList = JSON.parse('@Html.Raw(Json.Encode(@Model.Approvers))');
var ddlId = document.getElementById(ddlApproverId);
for (index in approverList) {
ddlId.options[ddlId.options.length] = new Option(approverList[index], index.value);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.