2016-11-22 15 views
0

ファイルとhtmlデータとジオコードを取得する関数を含むフォームを投稿していますが、コントローラーはajax投稿からデータを取得するだけですが、ファイルはありません 事実とボタンの投稿を行うには何かが、私はわからないんだけど、ajaxはコントローラmvcにファイルを投稿しません

@using (Html.BeginForm("Create", "lecture", FormMethod.Post, new { enctype = "multipart/form-data", id = "RestoForm" })) 
{ 
    //values has remove for clear 
    <div class="form-group"> 
     @Html.LabelFor(f => f.RImage) <i class="glyphicon glyphicon-folder-open"></i> 
     <input type="file" name="RImage" class="btn btn-default btn-sm btn-google btn-group-justified hvr-shadow " /> 
    </div> 

    <input type="button" class="btn btn-primary btn-lg" onclick="GetLocation()" value="Finish" /> 
} 

@section scripts 
{ 

    <script type="text/javascript"> 
     function GetLocation() { 
      var geocoder = new window.google.maps.Geocoder(); 

      var Street = document.getElementById('txtAddress').value; 
      var City = document.getElementById('txtCity').value; 
      var address = City + Street; 
      console.log(address); 
      var labelLat = document.getElementById('Latitude'); 
      var labellong = document.getElementById('longitude'); 

      geocoder.geocode({ 'address': address }, 
       function (results, status) { 
        if (status == window.google.maps.GeocoderStatus.OK) { 
         var latitude = results[0].geometry.location.lat(); 
         var longitude = results[0].geometry.location.lng(); 
       console.log("Latitude: " + latitude + "\nLongitude: " + longitude); //Ok. 

         labelLat.value = latitude; //Ok. 
         labellong.value = longitude; 
         $.ajax({ 
          url: 'Create', 
          type: 'POST', 
          data: $('#RestoForm').serialize(), 
          datetype: "html", 
          success: function (data) { 
           $('#RestoForm').html(data); 
          } 
         }); 

         error: function e(xhr, ajaxOptions, thrownError) { 
          alert(xhr.status); 
          alert(thrownError); 
         } 
        } 
       }); 
     }; 
    </script> 

がcontrolle `

[Authorize, HttpPost, ValidateAntiForgeryToken] 
     public ActionResult Create(LectureFormViewModel viewModel) // RImage =Null 
     {` 
+0

「datetype」は間違いですか? 'datatype'でなければなりません。 FormDataは 'serialize'だけでなく、' serialize'だけでなく、 'serialize'だけでなく、 –

+0

Uncaught TypeError:$(...)。FormDataは関数(...)データではありません:FormData()、 datatype:" html " –

+0

LectureFormViewModelを表示できますか? –

答えて

1

あなたはAJAXを使用してアクションにファイルを送信するためにFormDataを使用することができます。

var fm = new FormData(); 
fm.append("Name", $("#Name").val()); 
fm.append("RImage", $("#RImage").val()); 

$.ajax({ 
    url: 'Create', 
    type: 'POST', 
    data: fm, 
    datatype: "html", 
    contentType: false, // Not to set any content header 
    processData: false, // Not to process data 
    success: function (data) { 
     $('#RestoForm').html(data); 
    } 
}); 
+0

これは、jqueryで500エラーを出しました:xhr.send(options.hasContent && options.data || null); –

+0

500はHTTPエラーです。 JavaScriptとは関係ありません。 AJAXに応答するサーバーがエラーを出しました。理由を調べるには、サーバー側のコードを調べる必要があります。 –

+0

モデルのすべてのプロパティをフォームデータに追加する必要があります。喜んでそれをチェックしてください。 –

関連する問題