在一个视图上使用 2 个 ASP.NET MVC 表单保持表单状态

Question

所以我有一个表单，可以收集一些数据（包括来自所见即所得框的一些 HTML）并将其保存到数据库中...

我现在需要能够让用户从本地文件中获取所见即所得框的内容。在正确提交表单之前，用户需要能够看到所见即所得框中的内容。

我尝试添加第二个表单作为上传程序，并在控制器操作中抓取文件内容，将其添加到模型中，然后重定向回同一视图，但我不知道如何保留已保存的任何数据输入表格 1 的字段，以便...

<% using (Html.BeginForm()) {%>
    <%: Html.ValidationSummary(true) %>

    <fieldset>
        <legend>Create a New Mailing here:</legend>

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

       <div class="editor-field">
            <%: Html.TextAreaFor(model => model.Mailing.Body, new { @class = "body-editor", @id = "body-editor" })%>
            <%: Html.ValidationMessageFor(model => model.Mailing.Body)%>
        </div>
        <div class="editor-field">
            <%: Html.DropDownListFor(model => model.Mailing.Region, Model.Regions)%>
            <%: Html.ValidationMessageFor(model => model.Mailing.Region)%>
        </div>
        <p>
            <input type="submit" value="Create" id="submitMailing"/>
        </p>
    </fieldset>

<% } %>
<% using (Html.BeginForm("Upload", "Mail", FormMethod.Post, new { enctype = "multipart/form-data" }))
   {%>
    <%: Html.ValidationSummary(true) %>

    <fieldset>
        <legend>Load HTML from a file: </legend>
        <input type="file" id="htmlFile" name="htmlFile" class="upload" />
        <input type="submit" value="Engetenate" id="addContent"/>
    </fieldset>

<% } %>
<div>
    <%: Html.ActionLink("Back to List", "Index") %>
</div>

任何关于

[HttpPost]
        public ActionResult Upload(MailingViewModel m, HttpPostedFileBase htmlFile)
        {
            TryUpdateModel(m);
            var reader = new StreamReader(htmlFile.InputStream);
            m.Mailing.Body = reader.ReadToEnd();
            return View("CreateMailing",m);
        }

我所缺少的东西或更好的方法的建议都会很棒......

Answer 1

解决此问题的一种方法是在用户选择文件后立即在后台上传文件，并在上传到服务器后将其临时存储。然后你可以使用 AJAX 来显示预览。至于后台上传文件，你可以看看 jquery form 插件 通过生成隐藏的 iframe 支持 AJAX 文件上传。由于这种 AJAX 模拟上传，表单的其他字段不会被修改，页面也不会重新加载，因此用户输入的值将被保留。

您还可以查看jQuery 文件上传演示。