PartialView Viewの投稿と返信の応答json

Question

My PartialViewがViewでレンダリングされると、このPartialViewはコントローラをポストし、レスポンスをキャッチして表示する必要があります。それはどうですか？

ビュー

<div class="row"> 
     <div id="partialViewContainer"></div> 
    </div> 

PartialView

@model foo 

@using (Html.BeginForm("UploadFile", "ManageFiles", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{ 
    //Some Html 
    <div id="ResponsePost"> 
    </div> 
} 

コントローラ

[HttpPost] 
public JsonResult UploadFile(UploadFileViewModel m) 
{   
      if (!ModelState.IsValid) 
      { 
       var errorList = (from item in ModelState 
          where item.Value.Errors.Any() 
          select item.Value.Errors[0].ErrorMessage).ToList(); 

        return Json(errorList); 
      } 

      //Some Logic    
      var foo = new { ... }; 
      return Json(foo); 
} 

Answer 1

私の意見でこれを行う最も簡単な方法はHtml.BeginFormの代わりにAjax.BeginFormの拡張子を使用することです。コードが少なく、読みやすい。

jquery.unobtrusive-ajax.jsとJqueryを含める必要があります。ここで

@using (Ajax.BeginForm("UploadFile","ManageFiles" , new AjaxOptions() { OnSuccess = "getResult" })) 

、getResultは成功したAjaxリクエストの後に発火するJavaScript関数を定義するために使用されます。

申し訳

function getResult(data){ 
    $('#ResponsePost').append('<p>' + data.message + '</p>'); 
} 

Answer 2

あなたはあなたのデータを提出するために、AJAXを使用する必要がありますし、あなたのアクションメソッドは、JSONのresposeを返し、UDPATE DOM必要に応じて。フォーム内のファイルおよびその他の入力フィールドを送信するには、FormDataを使用する必要があります。

あなたの部分図は、あなたのアクションメソッドは、StatusプロパティとJSON応答を返すと仮定

$("#replaceYourFormIdHere").submit(function(e) { 
    e.preventDefault(); 

    var formAction = $(this).attr("action"); 

    var fdata = new FormData(); 

    var fileInput = $('#Img')[0]; 
    var file = fileInput.files[0]; 
    fdata.append("Img", file); 

    // You can update the jquery selector to use a css class if you want 
    $("input[type='text'").each(function (x, y) { 
     fdata.append($(y).attr("name"), $(y).val()); 
    }); 

    $.ajax({ 
     url: formAction, 
     type: "POST", 
     data: fdata, 
     processData: false, 
     contentType: false, 
     success: function (data) { 
      var msg = "<ul>"; 
      if (data.status === "success") { 
       msg += '<li>' + data.message + '</li>';; 
      } else { 
       $.each(data.errorList, 
        function(a, b) { 
         msg+= '<li>' + b + '</li>'; 
        }); 
      } 
      msg += "</ul>"; 
      $("#ResponsePost").html(msg); 
     }, 
     error: function(x, y, z) { 
      alert('error al postear'); 
      return false; 
     } 
    }); 

}); 

イドImg

と入力ファイル要素を持つID replaceYourFormIdHereでフォームをレンダリング仮定します。あなたの UploadFileViewModelはタイプ HttpPostedFileBase

public HttpPostedFileBase Img { set; get; } 

のImg性質を持っていると仮定すると、

public ActionResult UploadFile(UploadFileViewModel model) 
{ 
    if (ModelState.IsValid) 
    { 
     //to do : Save model.Img 
     return Json(new {status = "success", message = "Success!"}); 
    } 
    else 
    { 
     var errorList = (from modelStateVal in ViewData.ModelState.Values from error 
          in modelStateVal.Errors select error.ErrorMessage).ToList(); 
     return Json(new { status = "error", errorList = errorList }); 
    } 
} 

は、あなたが部分図でスクリプトを入れていないことを確認してください。メインビューにスクリプトを含めることをお勧めします。