我一直在努力思考如何制作这样的页面。我的模型包含一个对象列表,其中包含不同语言的文本字段。视图中有一个点需要动态更改以显示与下拉列表中选择的语言相关联的文本字段。文本字段还需要可编辑,以便在提交父表单时,文本字段需要在部分视图/模型中编辑后正确保存在父模型中。我在另一个页面中被暗示,部分视图是我应该尝试做的,也许是关于以编程方式为列表中的每种语言生成部分视图,并根据下拉菜单中的选择来更新/呈现正确的部分视图列表...?
我最初的尝试使我尝试使用对控制器的 ajax 调用来根据下拉菜单的值返回正确的局部视图,但我无法将其绑定到模型,因此无法更新/保存它提交主视图表单。到目前为止,这是我一直在使用的:
模型:
public class EditModel
{
public List<TextField> TextFieldList;
public List<string> DisplayList
{
get
{
List<string> tempList = new List<string>();
foreach (TextField a in TextFieldList)
{
tempList.Add(a.Language.ToString() + "/" + a.Currency.ToString());
}
return tempList;
}
}
}
控制器:
public ActionResult EditTextFields(int adId, int index)
{
Ad ad = this.Repository.GetById(adId);
return PartialView("EditTextFields", ad.TextFieldsList[index]);
}
主视图:
@model Models.EditModel
<script type="text/javascript">
$(function () {
$(href('DisplayList').change(function () {
var value = $(this).find(':selected').val();
var adId = GetId();
$.get('/Controllers/EditTextFields', "{\"adId\": " + String(adId) + ", \"index\":\"" + value + "\"}", function (data) {
$('#TextFieldDiv').html(data);
});
}));
});
</script>
@using (Html.BeginForm("Edit", "Widget", FormMethod.Post, new { id = "WidgetEditForm", enctype = "multipart/form-data" }))
{
<div>
@Html.DisplayFor(m => m.DisplayList)
</div>
<div id="TextFieldDiv">
@{Html.RenderPartial("EditTextFields", (TextField)@Model.TextFieldList[0]);}
</div>
}
局部视图:
@model Objects.TextField
@using (Html.BeginForm())
{
<table>
<tr>
<td class="fieldName" style="vertical-align: top;">
Headline Text:
</td>
<td>
@Html.EditorFor(m => m.Headline)
@Html.ValidationMessageFor(m => m.Headline)
</td>
</tr>
<tr>
<td class="fieldName">
Sub-Headline Text:
</td>
<td>
@Html.EditorFor(m => m.SubHeadline)
@Html.ValidationMessageFor(m => m.SubHeadline)
</td>
</tr>
</table>
}
有什么想法可以为我指明一个好的方向吗?