DNN MVC Modul keine Datei zurückstellen

Question

Ich baue ein kleines DNN MVC-Modul, wobei ich einen Benutzer brauche, um eine Datei hochzuladen, die serverseitig verarbeitet wird.

Wenn das Formular zurückgebucht wird, wird das Ansichtsmodell zurückgebucht, aber die Datei ist nie. Request.Files ist immer 0.

Ich habe es sogar vereinfacht, also war alles, was ich auf dem Modul hatte, eine einfache Dateieingabe und Übergabeschaltfläche, aber das scheiterte auch.

Ich würde es hassen, zurück zu .ascx Kontrollen, um dies zum Laufen zu bringen.

Ich teste dies als nicht registrierter Benutzer, daher gibt es keine Authentifizierungsprüfung in der Steuerung.

Siehe Code unten:

Ansicht

@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<NM.Modules.FlexEventsCreate.Models.FlexEventViewModel> 
@using DotNetNuke.Web.Mvc.Helpers 

<input type="file" id="fileUp"/> 
<input type="submit" id="btnSubmit" /> 

-Controller

[DnnHandleError] 
public class ItemController : DnnController 
{ 
    [HttpPost] 
    public ActionResult ShowForm(FlexEventViewModel flexEvent) 
    { 
     if (ModelState.IsValid) 
     { 
      var file = Request.Files; 

      if (file.Count != 0) 
      { 
       //do something 
      } 

      //return RedirectToDefaultRoute(); 
     } 

     return View(flexEvent); 
    } 
} 

Das gerenderte DNN HTML sieht wie folgt aus (ich habe es vereinfacht)

<form method="post" action="/Test" id="Form" enctype="multipart/form-data"> 

    <!-- Begin Content areas --> 
    <div> 
     <div class="row"> 
      <div class="medium-9 columns"> 
       <div id="dnn_LeftPane"> 
        <div class="DnnModule DnnModule-DnnModule-747"> 
         <a name="747"></a> 

         <div class="DnnF_Title_h1 SpacingBottom"> 
          <h1><span id="dnn_ctr747_dnnTITLE_titleLabel" class="TitleH1"></span> 

    </h1> 
          <div id="dnn_ctr747_ContentPane"> 
           <!-- Start_Module_747 --> 
           <div id="dnn_ctr747_ModuleContent"> 
            <div id="dnn_ctr747_ShowForm_Prog" class="RadAjax RadAjax_Default" style="display:none;"> 
             <div class="raDiv"> 

             </div> 
             <div class="raColor raTransp"> 

             </div> 
            </div> 
            <div class="RadAjaxPanel" id="dnn_ctr747_dnn_ctr747_ShowForm_UPPanel"> 
             <div id="dnn_ctr747_ShowForm_UP"> 
              <!-- 2013.2.717.40 --> 
              <div id="mvcContainer-747"> 

               <input type="file" id="fileUp"> 
               <input type="submit" id="btnSubmit"> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

</form> 

Answer 1

Ich habe einen Upload in ein MVC-Modul mit der dropzone jquery component - das kann Ihnen helfen. Siehe mein Beispiel Restaurant Menu project auf GitHub.

Zunächst sind das Dropzone Skript und CSS:

@using DotNetNuke.Web.Client.ClientResourceManagement 
@{ 
    ClientResourceManager.RegisterStyleSheet(Dnn.DnnPage, "~/DesktopModules/MVC/DotNetNuclear/RestaurantMenu/Resources/dropzone/css/dropzone.css"); 
    ClientResourceManager.RegisterScript(Dnn.DnnPage, "~/DesktopModules/MVC/DotNetNuclear/RestaurantMenu/Resources/dropzone/js/dropzone.min.js", 100); 
} 

Dann ein div-Container für die Komponente Upload platzieren:

<div id="dZUpload" class="uploadform dropzone no-margin dz-clickable"> 
     <div class="dz-default dz-message"></div> 
</div> 

die Komponente initialisieren und es sagen, welche Art und wie viele Dateien können hochgeladen werden:

$("#dZUpload").dropzone({ 
    acceptedFiles: "image/jpeg,image/png,image/gif", 
    url: '@Url.Action("Upload", "Menu")', 
    maxFiles: 1, // Number of files at a time 
    maxFilesize: 1, //in MB 
    addRemoveLinks: true, 
    maxfilesexceeded: function (file) { 
     alert('You have uploaded more than 1 Image. Only the first file will be uploaded!'); 
    }, 
    success: function (response) { 

    } 
}); 

Ändern Sie die acceptedFiles in die Mimetypen Sie sind restr icing ("Anwendung/pdf" usw.). Ändern Sie die maxFiles, um zu begrenzen, wie viele Dateien gleichzeitig hochgeladen werden können.

Schreiben Sie eine MVC-Controller-Aktion, um auf die Upload-URL der Dropzone-Datei zu reagieren. Sie können sehen, es erwartet eine Aktion Methode "Upload" auf dem Controller "Menü" (MenuController.Upload):

public JsonResult Upload() 
{ 
    string imageUrl = string.Empty; 
    string imgPath = Server.MapPath("~/Portals/0/Restaurant/"); 
    if (!Directory.Exists(imgPath)) 
    { 
     Directory.CreateDirectory(imgPath); 
    } 

    foreach (string s in Request.Files) 
    { 
     var file = Request.Files[s]; 
     if (file.ContentLength > 0) 
     { 
      string fileName = Path.GetFileName(file.FileName); 
      var path = Path.Combine(imgPath, fileName); 
      file.SaveAs(path); 
      imageUrl = string.Format("/Portals/0/Restaurant/{0}", fileName); 
     } 
    } 

    return Json(new { img = imageUrl, thumb = imageUrl }); 
}