Asp.Net MVC - 如果“保存”如何重新加载表单数据数据在包含多个表单的视图中失败

Question

我有一个页面，允许用户编辑联系人的详细信息。它显示基本详细信息（姓名、地址等）、已知电子邮件地址列表和电话号码列表，并允许他们添加/编辑电子邮件和电话详细信息。我的视图具有三种形式，一种用于基本详细信息，一种用于电子邮件详细信息，一种用于电话详细信息 - 每一种都发布到不同的控制器操作（SaveDetails、SaveEmail、SaveTelephone）。问题是，如果用户要添加新电子邮件并且 ModelState 无效，那么一旦我返回到主要详细信息 (HttpGet) 控制器方法以显示页面和模型状态错误，那么我就会丢失用户输入的数据进入电子邮件表格。

我真的不想有一个包含所有详细信息的大表单，并且我想避免使用 TempData 将表单输入存储/传递回主页 - 有人对如何实现这一目标有任何建议吗？

这是我的视图模型 ContactDetailsViewModel，其中包含 EmailDetailsViewModel 和 TelephoneFaxDetailsViewModel：

public class ContactDetailsViewModel : MasterViewModel
{
    public int ContactId { get; set; }
    public int? EmailId { get; set; }
    public int? TelephoneFaxId { get; set; }

    [DisplayName("First Name")]
    [StringLength(30, ErrorMessage = "First Name cannot be more than 30 characters")]
    public string FirstName { get; set; }

    [DisplayName("Last Name")]
    [StringLength(30, ErrorMessage = "Last Name cannot be more than 30 characters")]
    public string LastName { get; set; }

    public IList<EmailSummary> EmailSummaries { get; set; }
    public IList<TelephoneFaxSummary> TelephoneFaxSummaries { get; set; }

    public EmailDetailsViewModel EmailDetails { get; set; }
    public TelephoneFaxDetailsViewModel TelFaxDetails { get; set; }
}

以及我的视图，其中包含 3 个单独的表单，并且强类型化为 ContactDetailsViewModel：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<SPP.Portal.ViewModels.Contacts.ContactDetailsViewModel>" %>
<% using (Html.BeginForm("Details","Contact", FormMethod.Post))
   {%>
        <%: Html.ValidationSummary() %>
<fieldset>
    <%: Html.HiddenFor(m => m.EmailId) %>
    <%: Html.HiddenFor(m => m.TelephoneFaxId) %>

    <div class="editor-field">
        <div  class="left">
            <%: Html.LabelFor(model => model.FirstName) %>
            <%: Html.TextBoxFor(model => model.FirstName)%>
            <%: Html.ValidationMessageFor(model => model.FirstName)%>
        </div>
        <div class="right">
            <%: Html.LabelFor(model => model.LastName) %>
            <%: Html.TextBoxFor(model => model.LastName)%>
            <%: Html.ValidationMessageFor(model => model.LastName)%>
        </div>
    </div>

    <p>
        <input type="button" onclick="addEmail();" id="email" value="Add New Email" />
        <input type="button" onclick="addTelephoneFax();" id="telFax" value="Add New Telephone/Fax" />
        <input name="button" id="Save"type="submit" value="Save" />
        <input name="button" id="Return" type="submit" value="Return" />
    </p>

    <%
        } %>
    <fieldset>
        <legend>All Email Details</legend>
        <table>
            <tr>
                <th>Edit</th>
                <th>Email Address</th>
                <th>Email Type</th>
                <th>Delete</th>
            </tr>
            <% foreach (var emailSummary in Model.EmailSummaries)
               { %>
            <tr>
                <%: Html.Hidden(emailSummary.EmailId.ToString()) %>
                <td>
                   <a href="<%: ResolveUrl(emailSummary.EditUrl.OriginalString) %>">Edit</a>
                </td>
                <td>
                    <%: emailSummary.EmailAddress %>
                </td>
                <td>
                    <%: emailSummary.EmailType %>
                </td>
                <td>
                 <a href="<%: ResolveUrl(emailSummary.DeleteUrl.OriginalString) %>" class="confirmDelete">Delete</a>
                </td>
            </tr>
            <% } %>
        </table>
    </fieldset>

    <% using (Html.BeginForm("EmailDetails", "Contact", FormMethod.Post))
     {%>
    <div id="EmailDetails">
    <fieldset>
        <legend>Email</legend>

        <%: Html.HiddenFor(m => m.EmailDetails.Id)%>
        <%: Html.HiddenFor(m => m.EmailDetails.ContactId)%>
        <div class="editor-field">
            <div class="right">
                <%: Html.LabelFor(m => m.EmailDetails.EmailAddress)%>
                <%: Html.TextBoxFor(m => m.EmailDetails.EmailAddress)%>
                <%: Html.ValidationMessageFor(model => model.EmailDetails.EmailAddress)%>
            </div>
        </div>
        <div class="editor-field">
            <div class="left">
                <%: Html.LabelFor(m => m.EmailDetails.EmailType)%>
                <%: Html.DropDownListFor(m => m.EmailDetails.EmailType, Model.EmailDetails.EmailTypeCodes)%>
                <%: Html.ValidationMessageFor(model => model.EmailDetails.EmailType)%>
            </div>
        <p>
            <input type="submit" id="EmailSave" value="Save" />
            <input type="submit" name="button" id="EmailCancel" value="Cancel" />
        </p>
        </fieldset> 
    <% } %> 
    </div>

    <fieldset>
        <legend>All Telephone/Fax Details</legend>
        <table>
            <tr>
                <th>Edit</th>
                <th>Dialing Code</th>
                <th>Telephone/Fax Number</th>
                <th>Delete</th>
            </tr>
            <% foreach (var telFaxSummary in Model.TelephoneFaxSummaries)
               { %>
            <tr>
                <%: Html.Hidden(telFaxSummary.TelephoneFaxId.ToString())%>
                <td>
                   <a href="<%:ResolveUrl(telFaxSummary.EditUrl.OriginalString)%>" >Edit</a>
                </td>
                <td>
                    <%: telFaxSummary.DialingCode%>
                </td>
                <td>
                    <%: telFaxSummary.TelephoneFaxNumber%>
                </td>
                <td>
                  <a href="<%:ResolveUrl(telFaxSummary.DeleteUrl.OriginalString)%>" class="confirmDelete">Delete</a>
                </td>
            </tr>
            <% } %>
        </table>
    </fieldset>

    <% using (Html.BeginForm("TelephoneFaxDetails", "Contact", FormMethod.Post))
       {%>
        <div id="TelephoneFaxDetails">
        <%: Html.HiddenFor(m => m.TelFaxDetails.TelephoneFaxId)%>
        <%: Html.HiddenFor(m => m.TelFaxDetails.ContactId)%>
        <fieldset>
                <legend>Telephone/Fax</legend>
        <div class="editor-field">
            <div id="left" class="left">
                <%: Html.LabelFor(m => m.TelFaxDetails.InternationalDialingCode)%>
                <%: Html.TextBoxFor(m => m.TelFaxDetails.InternationalDialingCode)%>
                <%: Html.ValidationMessageFor(model => model.TelFaxDetails.InternationalDialingCode)%>
            </div>
            <div id="middle" class="right">
                <%: Html.LabelFor(m => m.TelFaxDetails.TelephoneFaxNumber)%>
                <%: Html.TextBoxFor(m => m.TelFaxDetails.TelephoneFaxNumber)%>
                <%: Html.ValidationMessageFor(model => model.TelFaxDetails.TelephoneFaxNumber)%>
            </div>
        </div>
            <p>
                <input type="submit" id="TelephoneSave" value="Save" />
                <input type="submit" name="button" id="TelephoneCancel" value="Cancel" />
            </p>
        </fieldset> 
    <% } %>
    </div>

然后我的控制器方法添加新电子邮件：

    [HttpPost]
    public ActionResult EmailDetails(ContactDetailsViewModel contactViewModel)
    {
        var viewModel = contactViewModel.EmailDetails;

        if (ModelState.IsValid)
        {
            try
            {
                _viewModelService.UpdateEmail(User, viewModel);

                return RedirectToAction("Details");
            }
            catch (Exception ex)
            {
                ModelState.AddModelError("Exception", "The Email was not updated.");

                return RedirectToAction("Details");
            }
        }

        return View("Details", contactViewModel);
    }

所以想法是，如果我将整个 ContactViewModel 放入电子邮件帖子中，那么如果模型无效，那么我应该能够返回包含基本联系人的整个详细信息 ContactViewModel用户刚刚输入的详细信息和电子邮件详细信息，这样他们就不会丢失数据。电子邮件详细信息可以很好地传递到控制器，但是当传递到控制器时，所有基本联系数据均为空 - 有什么想法吗？

Answer 1

IMO，就您的情况而言，这是不可行的，我的意思是，当您发布第二个表格（电子邮件详细信息）时，您仅发布该表格，因此无论在其范围内，它都只会发送到服务器。

因此，在这种情况下，您可以选择 Ajax 来保存/验证单个字段集（电子邮件、所有电话/传真详细信息）或单个 ascx。

Answer 2

恐怕你的选择是有限的：

• 你要么必须发布一个大的
  形式，这是保留的唯一选择
  所有价值观。
• 或者你可以只拥有一个
  其中一次可编辑。但
  强制用户发帖三次
  可能不是你想要的。

一种可以让代码变得更好的方法是重新设计模型以具有三个属性。每个“表单”一个：

public class ContactDetailsViewModel
{
    public ContactDetails Basics { get; set; }
    public EmailDetails Email { get; set; }
    public PhoneDetails Phone { get; set; }
}

然后您可以为每个属性创建一个部分视图。或者自定义编辑器模板。这将使您的主要标记更加清晰。