asp.net-mvc - ASP.NET MVC 动态添加子记录

Question

使用实体数据框架，我定义了一个名为 Client 的模型，它只包含一个 id 和一个名称。然后，我与另一个名为 Appointment 的模型建立关联，其中包含 ID 和日期。

对于表单，我希望允许用户创建新客户并在同一表单上添加约会(在创建客户之前)。我已经部分工作(添加一个约会)。

在 Controller 中:

[HttpPost]
public ActionResult Create(Client client)
{
    var appointment = new Appointment();
    UpdateModel(appointment);
    client.Appointments.Add(appointment);
    db.AddToClients(client);
    db.SaveChanges();
    return RedirectToAction("Index");
}

在 View 中:

<div class="editor-label">
    <%= Html.LabelFor(model => model.Name) %>
</div>
<div class="editor-field">
    <%= Html.TextBoxFor(model => model.Name) %>
    <%= Html.ValidationMessageFor(model => model.Name) %>
</div>
<% Html.RenderPartial("Appointment", new Appointment()); %>

“部分” View :

<div class="editor-label">
    <%= Html.LabelFor(model => model.AppointmentDate) %>
</div>
<div class="editor-field">
    <%= Html.TextBoxFor(model => model.AppointmentDate) %>
    <%= Html.ValidationMessageFor(model => model.AppointmentDate) %>
</div>

但是，由于以下几个原因，这并不理想:

1. 只能添加一个约会
2. 如果存在任何名称冲突(例如 Client 和 Appointment 表中名为 Comments 的字段)，就会出现问题，因为没有前缀是在字段名称上完成的，这也可以防止添加多个约会

我可以做什么来允许添加多个约会，即当单击“新约会”时使用按钮在页面上呈现部分 View (可能使用 AJAX)以允许尽可能多的约会？我还希望这是一个共享 View ，可用于创建和编辑记录以及以同一表单添加/删除约会。

更新
使用 ViewModel 取得了一些进展:

public class ClientViewModel
{
    public Client Client { get; set; }
    public List<Appointment> Appointments { get; set; }
}

Controller :

public ActionResult Create()
{
    Client c = new Client();
    List<Appointment> appointments = new List<Appointment>();
    appointments.Add(new Appointment() { AppointmentDate = DateTime.Now });
    appointments.Add(new Appointment() { AppointmentDate = DateTime.Now.AddMonths(1) });

    var model = new ClientViewModel
    {
        Client = c,
        Appointments = appointments
    };
    return View(model);
}

[HttpPost]
public ActionResult Create(ClientViewModel m)
{
    try
    {
        foreach (var appointment in m.Appointments)
        {
            m.Client.Appointments.Add(appointment);
        }
        db.AddToClients(m.Client);

        db.SaveChanges();
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}

查看(对于约会，不适用于 foreach 循环，因为每个约会都以 Appointment_ 为前缀，而不是 Appointment[0]_):

<%= Html.EditorFor(model => Model.Client) %>
<% for (int i = 0; i < Model.Appointments.Count(); i++) { %>
    <%= Html.EditorFor(model => Model.Appointments[i])%>
<% } %>

这对于为新客户创建约会来说很好，但是编辑它们以及添加新约会而不发回表单怎么样？对于添加，在现有预约表单下显示一个新预约表单的链接，以及另一个要删除的链接(从 View 中隐藏并设置隐藏字段值)。

更新2
让它工作，在第一次创建客户时添加约会。但是，我不确定如何更新现有约会(而不只是将其全部删除并再次添加)。

在 Controller 中:

[HttpPost]
public PartialViewResult AddAppointment(Appointment appointment, int index)
{
    List<Appointment> appointments = new List<Appointment>();
    for (int i = 0; i < index; i++)
    {
        appointments.Add(null);
    }
    appointments.Add(new Appointment() { AppointmentDate = DateTime.Now });
    ViewData["index"] = index;
    var model = new ClientViewModel
    {
        Appointments = appointments
    };
    return PartialView("Appointment", model);
}

查看:

<%= Html.EditorFor(model => Model.Client) %>
<div id="appointments">
<% for (int i = 0; i < Model.Appointments.Count(); i++) { %>
    <%= Html.EditorFor(model => Model.Appointments[i]) %>
<% } %>
</div>
<a href="javascript:;" id="addappointment">Add Appointment</a>
<script type="text/javascript">
    var appIndex = <%= Model.Appointments.Count() %>;
    $("#addappointment").click(function () {
        $.post(
            "/Client/AddAppointment",
            {"index" : appIndex}, 
            function (result) {
                $("#appointments").append(result);
                // increase index by 1
                appIndex++;
            }
        );
});

Answer 1

只是提出一些想法..

如果让约会部分 View 包含一个表单怎么样？

使用 jQuery/AJAX 处理表单的提交:

$.post(
   "/SomeController/AddAppointment",
        appointment, // grab this from the form
        function (result) { 
           $("#target").html(result); // this will be the div which contains the partial
        }
     );

这会将强类型约会发送到以下操作方法:

[HttpPost]
public PartialViewResult AddAppointment(Appointment appointment)
{
   // code to persist entity
   // code to add errors to model (if necessary)
   return PartialView("Appointment");
}

基本上，您使用 AJAX 提交表单，然后将结果重新渲染回部分。结果类似于 AJAX UpdatePanel(因 WebForms 而闻名)。

因此，您需要填写详细信息，点击“提交”，详细信息将发布到 Controller (使用 AJAX)，然后表单将再次变为空白，以便您可以继续添加约会。

这行得通吗？