【发布时间】：2018-02-04 16:27:55
【问题描述】：
所以，我有一份工作申请的推荐表。现在，当求职者从公司下拉列表中选择公司时，我想仅显示该公司的求职信下拉列表（求职信已由候选人从另一个选项卡上传）。现在，为了获得 Microsoft 的推荐，一个人可能有 3 封求职信。
问题：
我想知道如何显示来自 ajax 调用的下拉菜单，并且仍然保持 Coverletter 下拉列表与模型紧密绑定。
以下是非 AJAX 强绑定：显示所有求职信，无论选择哪家公司）
查看：
@model Bridge.ViewModels.ReferralViewModel
@using (Html.BeginForm())
{
<div class="form-group">
@Html.LabelFor(model => model.CompanyId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(m => m.CompanyId, Model.Companies, new { @class = "form-control js-change", onchange = "companyChanged()" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.CoverLetterId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(m => m.CoverLetterId, new SelectList(Model.CoverLetters, "CoverLetterId", "CoverLetterName", Model.CoverLetters), new { @class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
型号：
public class ReferralViewModel
{
public int ReferralViewModelId { get; set; }
public int CompanyId { get; set; }
public IEnumerable<SelectListItem> Companies { get; set; }
public int CoverLetterId { get; set; }
public IEnumerable<CoverLetter> CoverLetters { get; set; }
}
控制器：
public ActionResult Create()
{
var viewModel = new ReferralViewModel
{
var candidateId = User.Identity.GetUserId();
Companies = _context.Companies.Select(x => new SelectListItem
{
Text = x.CompanyName,
Value = x.CompanyId.ToString()
}),
CoverLetters = _context.CoverLetters.Where(r => r.CandidateId == candidateId).ToList()
};
return View(viewModel);
}
现在 AJAX 尝试：
控制器动作
public JsonResult ListOfCoverLetterByCompanyId(int companyId)
{
var coverletters = _context.CoverLetters
.Where(c => c.CompanyId == companyId)
.ToList();
var dropdown = new List<SelectListItem>();
foreach (var cl in coverletters)
{
dropdown.Add(new SelectListItem { Text = cl.CoverLetterName, Value = cl.CoverLetterId.ToString() });
}
return Json(dropdown, JsonRequestBehavior.AllowGet);
}
新视图
@model Bridge.ViewModels.ReferralViewModel
@using (Html.BeginForm())
{
@Html.LabelFor(model => model.CompanyId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(m => m.CompanyId, Model.Companies, new { @class = "form-control js-change", onchange = "companyChanged()" })
</div>
</div>
@* Dropdown will appear here*@
<select id="CoverLetterId" name="CoverLetterId"></select>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
@section scripts{
<script>
function companyChanged() {
var companyId = $(".js-change").val();
$.ajax({
url: "/Referral/ListOfCoverLetterByCompanyId",
data: { companyId: companyId },
contentType: "application/json; charset-utf-8",
success: function (datas) {
$("#CoverLetterId").html("");
$.each(datas, function (i, data) {
$("#CoverLetterId ").append('<option value="' + data.Value + '">' + data.Text + '</option>');
});
},
error: function () {}
});
}
</script>
<script>
companyChanged();
</script>
}
新视图模型
public class ReferralViewModel
{
public int ReferralViewModelId { get; set; }
public int CompanyId { get; set; }
public IEnumerable<SelectListItem> Companies { get; set; }
public int CoverLetterId { get; set; }
}
我认为通过遵循当前代码，我失去了强绑定 Razor 视图的美感。下拉列表不绑定到任何属性。我可以以某种方式使其强绑定并使用 @Html.DropdownListFor
【问题讨论】：
-
您需要将第二个下拉列表绑定到
CoverLetterId，并且您的 veiw 模型需要一个属性public IEnumerable<SelectListItem> CoverLetters { get; set; }，该属性最初将设置为空集合 -
所以，首先，我将在 viewModel 中添加该属性，然后我可以添加这个问题的答案中给出的代码。我想你的意思是对的？
-
没问题.....
-
@StephenMuecke：另外，先生，如果您发现代码有任何其他改进，请告诉我。可以这么说，您（作为旁注）可以帮助像我这样的初学者了解更多信息。
标签： c# ajax asp.net-mvc razor asp.net-mvc-5