这是我第一次使用列表，我的场景有点复杂。我想添加一个类型的对象Story有一个列表句子可以动态添加。句子与以下内容具有一对一的关系Image以及另一个一对一的关系Audio（可以选择添加）。我设法将句子列表与故事对象一起添加到数据库中。但我不知道从哪里开始处理其他两个实体。
以下是每个实体的模型：
public class Story
{
public int StoryId { get; set; }
public string Title { get; set; }
public string Type { get; set; }
public DateTime Date { get; set; }
public virtual IEnumerable<Sentence> Sentences { get; set; } // one to many Story-Sentence
}
句子类：
public class Sentence
{
public int Id { get; set; }
public string SentenceText { get; set; }
public virtual Audio Audio { get; set; } // one to one Sentence-Audio
public virtual Image Image { get; set; } // one to one Sentence-Image
}
图片类：
public class Image
{
[Key]
[ForeignKey("Sentence")]
public int Id { get; set; }
public string ImageSelected { get; set; }
public virtual Sentence Sentence { get; set; }
}
Audio 类与 Image 类完全相同。风景。
@model Story
<div id="editorRows">
@foreach (var item in Model.Sentences)
{
<partial name="_SentenceEditor" model="item" />
}
</div>
<a id="addItem" asp-action="BlankSentence" asp-controller="StoryTest">Add Sentence...</a> <br />
<input type="submit" value="Finished" />
局部视图
@model Sentence
<div class="editorRow">
@using (Html.BeginCollectionItem("sentences"))
{
<span>Name: </span> @Html.EditorFor(m => m.SentenceText);
}
@using (Html.BeginCollectionItem("sentences"))
{
<span>Image: </span> @Html.EditorFor(m => m.Image.ImageSelected);
}
<a href="#" class="deleteRow">delete</a>
</div>
我有一些动态添加和删除行的 JavaScript。
最后在控制器中我只是将模型保存在数据库中
[HttpPost]
public async Task<IActionResult> AddTwo(Story model/*IEnumerable<Sentence> sentence*/)
{
if (ModelState.IsValid)
{
_db.Story.Add(model);
await _db.SaveChangesAsync();
return RedirectToAction("Index");
}
return View(model);
}
简而言之，我想随句子添加图像和音频。并且还能够正确访问整行进行编辑。
我根据你的代码做了一个demo。您可以将数据存储在 formData 中，然后使用 ajax 将其传递给控制器操作。
主视图：
@model Story
<form asp-action="AddSentence" method="post">
<div id="editorRows">
<input type="hidden" name="" value="@Model.StoryId" />
@foreach (var item in Model.Sentences)
{
<partial name="_SentenceEditor" model="item" />
}
</div>
<a id="addItem" asp-action="BlankSentence" asp-controller="StoryTest">Add Sentence...</a>
<br />
<input type="submit" id="submit" value="Finished" />
</form>
@section scripts {
<script>
$("#submit").click(function (e) {
e.preventDefault();
var formData = new FormData();
$("input[name='Audio.AudioSelected']").each(function (i) {
var AudioSelected = $(this).val();
formData.append("Sentences[" + i + "].Audio.AudioSelected", AudioSelected);
});
$("input[name='Image.ImageSelected']").each(function (i) {
var ImageSelected = $(this).val();
formData.append("Sentences[" + i + "].Image.ImageSelected", ImageSelected);
});
$("input[name='SentenceText']").each(function (i) {
var SentenceText = $(this).val();
formData.append("Sentences[" + i + "].SentenceText", SentenceText);
});
$.ajax({
method: 'post',
url: "StoryTest/AddSentence",
data: formData,
processData: false,
contentType: false,
success: function () {
}
});
});
$("#addItem").click(function () {
$.ajax({
url: this.href,
cache: false,
success: function (html) { $("#editorRows").append(html); }
});
return false;
});
$("a.deleteRow").on("click", function () {
$(this).parents("div.editorRow:first").remove();
return false;
});
</script>
}
部分视图：
@model Sentence
<div class="editorRow">
<span>Name: </span> @Html.EditorFor(m => m.SentenceText)
<span>Audio: </span> @Html.EditorFor(m => m.Audio.AudioSelected)
<span>Image: </span> @Html.EditorFor(m => m.Image.ImageSelected)
<a href="#" class="deleteRow">delete</a>
</div>
控制器：
public IActionResult Index()
{
Story story = new Story
{
Sentences = new List<Sentence>
{
new Sentence { Id = 1, SentenceText = "AAA"
, Audio = new Audio{ AudioSelected = "True"}
, Image = new Image{ ImageSelected = "True"} },
new Sentence { Id = 2, SentenceText = "BBB"
, Audio = new Audio{ AudioSelected = "False"}
, Image = new Image{ ImageSelected = "False"}},
new Sentence { Id = 3, SentenceText = "CCC"
, Audio = new Audio{ AudioSelected = "True"}
, Image = new Image{ ImageSelected = "False"}}
}
};
return View(story);
}
[HttpPost]
public async Task<IActionResult> AddSentence(Story model)
{
if (ModelState.IsValid)
{
_db.Story.Add(model);
await _db.SaveChangesAsync();
return RedirectToAction("Index");
}
return View(model);
}
public IActionResult BlankSentence()
{
return PartialView("_SentenceEditor", new Sentence());
}
Result:
