我一直在研究我的第一个.net MVC网站。
我有一个包含标题和详细信息项的Viewmodel。作为我的标题的一部分，用户需要选择一个公司/数据库来工作，基于此我做一个ajax回调到服务器，以检索其余标题的相关列表数据。
现在在我的详细信息中，用户需要能够随意添加和删除行，并且客户端需要内联编辑。这些行还包含将从我的ajax请求中填充的下拉列表，而不是调用每个行的服务器获取列表数据我想在选择数据库后执行此操作，只需更新选择列表并将其发送到每一行。
标题视图模型
public long PrId { get; set; }
public string PrNumber { get; set; }
public int CompanyID { get; set; }
public int SupplierID { get; set; }
public string Justification { get; set; }
public string ExpenseCompany { get; set; }
public string RequestedBy { get; set; }
public bool BookOrder { get; set; }
public DateTime ExpectedDeliveryDate { get; set; }
public string DeliveryAdress { get; set; }
public string Priority { get; set; }
public string CreatedBy { get; set; }
public DateTime CreatedDate { get; set; }
public int Status { get; set; }
public decimal DiscountValue { get; set; }
public decimal DicountPercentage { get; set; }
public decimal TotalExcl { get; set; }
public decimal Vat { get; set; }
public decimal TotalIncl { get; set; }
public string CurrentUser { get; set; }
public string PrevUser { get; set; }
public string EvoPoNum { get; set; }
public List<SelectListItem> Companies { get; set; }
public List<IFormFile> SupportingDocs { get; set; }
public List<IFormFile> DeliveryDocs { get; set; }
public List<PRLinesVM> Lines { get; set; }
public List<SelectListItem> Priorties { get; set; }
public List<SelectListItem> RequestbyUsers { get; set; }
public List<SelectListItem> ExpenseCopanies { get; set; }
public List<SelectListItem> Suppliers { get; set; }
public List<SelectListItem> DeliveryAddresses { get; set; }
public IEnumerable<SelectListItem> TaxTypes { get; set; }
public IEnumerable<SelectListItem> PRProjects { get; set; }
public IEnumerable<SelectListItem> PRDepartments { get; set; }
public IEnumerable<SelectListItem> PRCosts { get; set; }
详情视图模型
public int LineId { get; set; }
public string PRCost { get; set; }
public string PRDepartment { get; set; }
public string PRProject { get; set; }
public string Description { get; set; }
public decimal Quantity { get; set; }
public decimal PriceExcl { get; set; }
public decimal PriceIncl { get; set; }
public decimal DiscountPerc { get; set; }
public int TaxType { get; set; }
public IEnumerable<SelectListItem> TaxTypes { get; set; }
public IEnumerable<SelectListItem> PRProjects { get; set; }
public IEnumerable<SelectListItem> PRDepartments { get; set; }
public IEnumerable<SelectListItem> PRCosts { get; set; }
public long PrId { get; set; }
主视图
@model PRHeaderVM
<form asp-action="SubmitPR" role="form" id="WorkgflowForm" style="width: 100%;top:0;right:0;left: 10px; bottom:10px">
<div class="form-horizontal">
<div class="row">
<div class="col-lg-3">
<div class="form-group">
<div style="padding-bottom: 40px;">
<label class="col-lg-4 control-label">Company</label>
<div class="col-lg-8">
<select id="DbDropdown" asp-for="CompanyID" asp-items="@Model.Companies" class="form-control">
<option>Please select</option>
</select>
</div>
</div>
<div style="padding-bottom: 20px;">
<label class="col-lg-4 control-label">Supplier</label>
<div class="col-lg-8">
<select id="SuppDropdown" asp-for="SupplierID" asp-items="@Model.Suppliers" class="form-control">
<option>Please select</option>
</select>
</div>
</div>
<label class="col-lg-4 control-label">Jutification</label>
<br />
<div class="col-lg-8">
<textarea id="Jutification" asp-for="Justification" class="form-control" rows="4">
</textarea>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<div style="padding-bottom: 40px;">
<label class="col-lg-4 control-label">Expense Company</label>
<div class="col-lg-8">
<select id="expComp" asp-for="ExpenseCompany" asp-items="@Model.ExpenseCopanies" class="form-control">
<option>Please select</option>
</select>
</div>
</div>
<div style="padding-bottom: 20px;">
<label class="col-lg-4 control-label">Requested By</label>
<div class="col-lg-8">
<select id="Reqby" asp-for="RequestedBy" asp-items="@Model.RequestbyUsers" class="form-control">
<option>Please select</option>
</select>
</div>
</div>
<div style="padding-bottom: 20px;">
<label class="col-lg-4 control-label">
Book order
</label>
<div class="col-lg-8">
<input type="checkbox" id="Bookord" asp-for="BookOrder" class="from-control" style="width:100%;height:30px" />
</div>
</div>
<div style="padding-bottom: 20px;">
<label class="col-lg-4 control-label">
Price Incl
</label>
<div class="col-lg-8">
<input type="checkbox" id="priceincl" class="from-control" style="width:100%;height:30px" />
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<div style="padding-bottom: 40px;">
<label class="col-lg-4 control-label">Expected Delivery Date</label>
<div class="col-lg-8">
<div class="input-group date" data-provide="datepicker">
<input id="datetimepickercustom" type="text" asp-for="ExpectedDeliveryDate" class="form-control" data-date-format="mm/dd/yyyy">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
<div style="padding-bottom: 20px;">
<label class="col-lg-4 control-label">Delivery Address</label>
<div class="col-lg-8">
<select id="DelivDropdown" asp-for="DeliveryAdress" asp-items="@Model.DeliveryAddresses" class="form-control">
<option>Please select</option>
</select>
</div>
</div>
<label class="col-lg-4 control-label">Priority</label>
<br />
<div class="col-lg-8">
<select id="PrioDropdown" asp-for="Priority" asp-items="@Model.Priorties" class="form-control">
<option>Please select</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="btn-group">
<a id="btnaddval" class="btn btn-primary" onclick="addVal('');">
<i class="glyphicon glyphicon-plus"></i> Add Line
</a>
</div>
<table id="myTable" class="table table-bordered table-striped table-condensed" style="height : 450px">
<thead style="width: 100%;display: table-column;table-layout: fixed;">
<tr>
<td style="width:25px"></td>
<td>
PR Cost
</td>
<td>
PR Department
</td>
<td>
PR Project
</td>
<td>
Description
</td>
<td>
Quantity
</td>
<td>
Price(Excl)
</td>
<td>
Discount %
</td>
<td>
Tax Type
</td>
<td>
Price(Incl)
</td>
<td>
.......
</td>
</tr>
</thead>
<tbody id="tbLines" style="height : 400px;position:fixed; overflow-y: scroll;width: 92%;">
@if (Model.PRCosts != null && Model.PRDepartments != null && Model.PRProjects != null)
{
foreach (var item in Model.Lines)
{
item.PRCosts = Model.PRCosts;
item.PRDepartments = Model.PRDepartments;
item.PRProjects = Model.PRProjects;
Html.RenderPartial("_PRDetails", item);
}
}
</tbody>
</table>
</div>
</div>
</form>
</section>
调用Ajax
function getFieldList() {
var url = "List";
var opt = document.createElement("option");
$.ajax({
data: $("#DbDropdown").serialize(),
type: 'GET',
cache: false,
dataType: 'json',
url: url,
success: function (result) {
$.each(result, function (i, item) {
console.log(item);
//How do i assign values to the SelectList in my model and not the HTML element
});
},
error: function (ex) {
alert(ex);
}
});
有关详细信息的部分视图
@model PRLinesVM
@using (Html.BeginCollectionItem("lines"))
<tr>
<td>
<Label name='Lines.LineId' style="width:15px">@Model.LineId</Label>
</td>
<td>
@Html.DropDownListFor(x => x.PRCost, new SelectList(Model.PRCosts, "Value", "Text"), "-Select Cost-", new { @class = "form-control" })
</td>
<td>
@Html.DropDownListFor(x => x.PRDepartment, new SelectList(Model.PRDepartments, "Value", "Text"), "-Select Department-", new { @class = "form-control" })
</td>
<td>
@Html.DropDownListFor(x => x.PRProject, new SelectList(Model.PRProjects, "Value", "Text"), "-Select Project-", new { @class = "form-control" })
</td>
<td>
@Html.TextBoxFor(x => x.Description, new { @class = "form-control" })
</td>
<td>
@Html.TextBoxFor(x => x.Quantity, new { @class = "form-control", @type = "number", @min = "0" })
</td>
<td>
@Html.TextBoxFor(x => x.PriceExcl, new { @class = "form-control", @type = "number", @min = "0" })
</td>
<td>
@Html.TextBoxFor(x => x.DiscountPerc, new { @class = "form-control", @type = "number", @min = "0" })
</td>
<td>
@Html.DropDownListFor(x => x.TaxType, new SelectList(Model.TaxTypes, "Value", "Text"), "-Select Tax Type-", new { @class = "form-control" })
</td>
<td>
@Html.TextBoxFor(x => x.PriceIncl, new { @class = "form-control", @type = "number", @min = "0" })
</td>
<td>
<a id="btnAddVal" onclick='removeRow(@Model.LineId);' class="btn btn-danger">
<i class="glyphicon glyphicon-trash"></i> Remove
</a>
</td>
</tr>
答案 0 :(得分：0)
我自己解决了这个问题，只是在公司被选中后才渲染页面的其余部分。
关于网格线，我使用局部视图添加线条并填充每一行的下拉列表。