ASP.NET MVC使用jQuery表單插件Ajax文件上傳？

Question

我使用Jquery Ajax Form Plugin來上傳文件。代碼：

AuthorViewModel

public class AuthorViewModel 
{ 
    public int Id { get; set; } 

    [Required(ErrorMessage = "{0} alanı boş bırakılmamalıdır!")] 
    [Display(Name = "Yazar Adı")] 
    public string Name { get; set; } 

    [Display(Name = "Kısa Özgeçmiş")] 
    public string Description { get; set; } 

    [Display(Name = "E-Posta")] 
    public string Email { get; set; } 

    public string OrginalImageUrl { get; set; } 

    public string SmallImageUrl { get; set; } 
} 

形式

@using (Html.BeginForm("_AddAuthor", "Authors", FormMethod.Post, new { id = "form_author", enctype = "multipart/form-data" })) 
{ 
    <div class="editor-label"> 
     <input type="file" name="file" id="file" /> 
    </div> 
    <div class="editor-label"> 
     @Html.LabelFor(model => model.Name) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.Name) 
    </div> 
    <div class="editor-field"> 
     @Html.ValidationMessageFor(model => model.Name) 
    </div> 

    ... 

    <div class="submit-field"> 
     <input type="submit" value="Ekle" class="button_gray" /> 
    </div> 
} 

腳本

<script> 
$(function() { 
    $('#form_author').ajaxForm({ 
     beforeSubmit: ShowRequest, 
     success: SubmitSuccesful, 
     error: AjaxError 
    }); 
}); 

function ShowRequest(formData, jqForm, options) { 
    $(".loading_container img").show(); 
} 

function AjaxError() { 
    alert("An AJAX error occured."); 
} 

function SubmitSuccesful(result, statusText) { 
    // Veritabanı işlemleri başarılı ise Index sayfasına 
    // geri dön, değilse partial-view sayfasını yenile 
    if (result.url) { 
     window.location.href = result.url; 
    } else { 
     $(".authors_content_container").html(result); 
    } 
} 
</script> 

控制器

[HttpPost] 
public ActionResult _AddAuthor(AuthorViewModel viewModel, HttpPostedFileBase file) 
{ 
    ... 
    viewModel.OrginalImageUrl = file.FileName; 
    ... 
} 

上面的代碼做工精細

問題

正如你看到的，我從後視圖模型文件獨立。有沒有辦法將HttpPostedFileBase file屬性添加到ViewModel並將其綁定到視圖中的viewModel，並將其發佈到ViewModel中的控制器？

我希望我能解釋一下。

編輯：

此代碼工作正常。我不希望post，viewModel和HttpPostedFile分開。我想是這樣的：（如果可能）。

型號

public class AuthorViewModel 
{ 
    public int Id { get; set; } 

    [Required(ErrorMessage = "{0} alanı boş bırakılmamalıdır!")] 
    [Display(Name = "Yazar Adı")] 

    HttpPostedFileBase file{ get; set; } 
    ... 
} 

控制器

[HttpPost] 
public ActionResult _AddAuthor(AuthorViewModel viewModel) 
{ 
    var file = viewModel.file; 
    ... 
}  

感謝。

Answer 1

是的，你可以添加AliRızaAdıyahşi。

這裏是財產做到這一點：

public HttpPostedFileBase File { get; set; } 

現在你形成你應該添加enctype作爲周小川馬雲說：

@using (Html.BeginForm("_AddAuthor", "Authors", FormMethod.Post, new { id = "form_author", enctype="multipart/form-data" })) 
{ 
    <div class="editor-label"> 
     <input type="file" name="file" id="file" /> 
    </div> 
    <div class="editor-label"> 
     @Html.LabelFor(model => model.Name) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.Name) 
    </div> 
    <div class="editor-field"> 
     @Html.ValidationMessageFor(model => model.Name) 
    </div> 

    ... 

    <div class="submit-field"> 
     <input type="submit" value="Ekle" class="button_gray" /> 
    </div> 
} 

關於你的控制器動作：

[HttpPost] 
public ActionResult _AddAuthor(AuthorViewModel viewModel, HttpPostedFileBase file) 
{ 
    if(file!=null) 
    { 
     viewModel.File=file; //Binding your file to viewModel property 
    } 
    //Now you can check for model state is valid or not. 
    if(ModelState.IsValid) 
    { 
     //do something 
    } 
    else 
    { 
     return View(viewModel); 
    } 
} 

希望它有幫助。這是你需要的嗎？

---

編輯

沒有什麼額外的事情。它自動綁定到viewModel。

[HttpPost] 
public ActionResult _AddAuthor(AuthorViewModel viewModel) 
{ 
     var uploadedfile = viewModel.File;// Here you can get the uploaded file. 
     //Now you can check for model state is valid or not. 
    if(ModelState.IsValid) 
    { 
     //do something 
    } 
    else 
    { 
     return View(viewModel); 
    } 
} 

這對我有效！

Answer 2

是的，您可以將HttpPostedFileBase添加到您的ViewModel中，並將enctype = "multipart/form-data"添加到您的From in HTML中。

檢查此鏈接： MVC. HttpPostedFileBase is always null