私は</p> <p>...だから私は（WYSIWYGボックスからいくつかのHTMLを含む）いくつかのデータを収集し、それをデータベースに保存し、フォームを持っている一つのビュー

Question

に2つのASP.NET MVCのフォームでフォームの状態を維持ユーザーがローカルファイルからWYSIWYGボックスのコンテンツを取得できるようにする必要があります。適切なフォームを送信する前に、WYSIWYGボックス内のコンテンツを見ることができる必要があります。

アップロード者として機能する2番目のフォームを追加しようとしましたが、コントローラのアクションでファイルのコンテンツを取得してモデルに追加してから、同じビューにリダイレクトしましたが、そのフォーム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

この問題に取り組む1つの方法は、ユーザーがファイルを選択し、一旦サーバーにアップロードすると一時的にファイルをバックグラウンドでアップロードすることです。次に、AJAXを使ってプレビューを表示することができます。バックグラウンドでファイルをアップロードすることについては、jquery form pluginを参照してください。AJAX file uploadsをサポートする場合は、非表示のiframeを生成してください。こののAJAXシミュレーションのアップロードのため、フォームの他のフィールドは変更されず、ページがリロードされ、ユーザーが入力した値は保持されます。

このjQuery File Upload Demoをご覧ください。