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

Question

So I've got a form that gathers some data (including some HTML from a WYSIWYG box) and saves it to a database...

I now need to be able to let the user grab content for the WYSIWYG box from a local file. The user needs to be able to see the content in the WYSIWYG box before submitting the form proper.

I've tried adding a second form that acts as an uploader and in the controller action grabbing the file content, adding it to the model and then redirecting back to the same view but I don't know how to keep any data that has been entered in the fields of form 1 so...

<% 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>

and

[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);
        }

Any advice on what I'm missing or a better way to do it would be brilliant...

Answer 1

One way to tackle this problem would be to upload the file in the background as soon as the user selects it and once uploaded on the server store it temporarily. Then you could use AJAX to show the preview. As far as uploading the file in the background is concerned, well, you may take a look at the jquery form plugin which supports AJAX file uploads by generating a hidden iframe. And because of this AJAX simulated upload the other fields of the form won't be modified nor the page reloaded so values entered by the user will be preserved.

You may also take a look at this jQuery File Upload Demo .