Показывать модальные файлы при загрузке

Question

У меня есть приложение MVC C#, которое я создаю, и мне интересно, как отображать модальный, содержащий ожидающее сообщение, пока файлы загружаются.

Я искал Goggle и этот сайт много, но я мог бы использовать более прямую обратную связь.

Я создал modal в моем index.cshtml, но не уверен, как отображать его во время процесса загрузки. Я попытался использовать что-то вроде этого в моей кнопке отправки, но затем не публикует форму.

data-toggle="modal" data-target="#myModal" 

Это мой код.

Index.cshtml

<h4>Please fill out the form below and select at least one file to upload.</h4> 

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{ 
    <div class="row"> 
     <div class="col-md-2"> 
      <h5>Your Name:</h5> 
     </div> 
     <div class="col-md-4"> 
      <input type="text" name="uname" class="form-control" required placeholder="John Smith"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-2"> 
      <h5>Your Email:</h5> 
     </div> 
     <div class="col-md-4"> 
      <input type="email" name="email" class="form-control" required placeholder="test@test.com"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-2"> 
      <h5>Your Company:</h5> 
     </div> 
     <div class="col-md-4"> 
      <input type="text" name="company" class="form-control" required placeholder="Test Company, Inc"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-2"> 
      <h5>Choose file(s) to upload (Max 500MB):</h5> 
     </div> 
     <div class="col-md-4"> 
      <input name="files" type="file" id="files" multiple="multiple" class="form-control" required /> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-2"> 
      <h5></h5> 
     </div> 
     <div class="col-md-4"> 
      <input type="submit" name="submit" value="Upload" class="btn btn-primary" /> 
     </div> 
    </div> 
} 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       Please wait while we are uploading your files 
       <div class="progress"> 
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Тогда вот мой контроллер

using System; 
using System.Collections.Generic; 
using System.IO; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using System.Net.Mail; 

namespace vidup.Controllers 
{ 
    public class HomeController : Controller 
    { 
     public ActionResult Index() 
     { 

      return View(); 
     } 

     [HttpPost] 
     public ActionResult Index(List<HttpPostedFileBase> files) 
     { 
      var userName = Request["uname"].ToString(); 
      var userEmail = Request["email"].ToString(); 
      var userCompany = Request["company"].ToString(); 
      ViewBag.Username = userName; 
      ViewBag.UserCompany = userCompany; 
      ViewBag.UserEmail = userEmail; 
      int i = 0; 

      var path = Path.Combine(Server.MapPath("~/Uploads"), userCompany, userName, DateTime.Now.ToString("MM-dd-yyyy h-mm-tt")); 
      if (!Directory.Exists(path)) 
      { 
       DirectoryInfo di = Directory.CreateDirectory(path); 
      } 

      foreach (HttpPostedFileBase item in files) 
      { 
       i++; 
       if (item != null && item.ContentLength > 0) 
       { 
        var fileName = Path.GetFileName(item.FileName); 
        var fullPath = Path.Combine(path, fileName); 
        ViewBag.Message3 = fileName; 
        ViewBag.Message4 = fullPath; 
        try 
        { 
         item.SaveAs(fullPath); 
         var fileCount = i + " File(s) uploaded successfully"; 
         ViewBag.Message = fileCount; 
        } 
        catch (Exception e) 
        { 
         ViewBag.Message = e; 
        } 
       } 
       else 
       { 
        ViewBag.Message = "No File selected"; 
       } 
      } 




      return View("Status"); 
     } 
    } 
} 

наконец status.cshtml

<h2>Upload Status</h2> 

<h4>Thank you, @ViewBag.UserName from @ViewBag.UserCompany</h4> 
<P>Your file upload returned a status of: @ViewBag.Message</P> 
<p>An Email has been sent to @ViewBag.UserEmail with the status of this upload.</p> 
<br/> 
<a href="@Url.Action("Index")" class="btn btn-primary">Click here to upload again</a> 

Answer 1

Причина вашей кнопка отправки не отправляет форму больше является потому что атрибуты, которые вы вставляете в него, переопределяют поведение по умолчанию - вам нужно будет добавить oncli ck обработчик к нему, чтобы также запустить форму submit в дополнение к модальному показу. Дайте кнопку отправки идентификатор и дать вашей форме идентификатор .. после этого его непосредственного OnClick метода

$('buttonid').on('click', function() 
{ 
    $('#formid').submit(); 
}); 

Это говорит своей кнопке, чтобы отправить форму, когда он щелкнул