0

部分ビューをレンダリングできるように、ajax を介してフォームをコントローラーに投稿しようとしています。

これが私のAjaxコードです

 var formCollection = $('#some-form');
 $(function(){ $('#some-form').submit(function(){
      $.ajax({
           type: "POST",
           url: "/Trusk/Index",
           data: formCollection,
           dataType: "html",
           success: function (result) {
               $('#newView').html(result);
           },
           error: function (request, status, error) {
               alert('Oh no!');
           }
     });
});
});

私のフォームのコード、ID = newView で部分ビューをレンダリングする必要があります。部分ビューはコントローラーによって返されます

  <% using (Html.BeginForm(new { @id = "some-form" }))
           { %>
            <div id="TestDiv">
            <div id="Title">Test</div>                 
                <div id="CheckIn">Check-in:<br />
                <%:Html.TextBox("FromDate", "", new { @id = "DateFrom", @style =  "width:190px" })%></div>
                <div id="CheckOut">Check-out:<br />
                <%:Html.TextBox("ToDate", "", new { @id = "DateTo", @style =  "width:190px" })%><br /></div>
                <div id="newView">  
                </div>
                <input type="submit" value="Search" />        
        </div>
               </div>
        <% } %>

私のコントローラーコード

 public ActionResult Index(FormCollection post)
    {
        ITruckRepository hotelRep = new TruckRepository();

        IEnumerable<Truck> AvailableTrucks = hotelRep.getTrucks('2012,3,2', '2012,3,5');

       return PartialView("Search", AvailableTrucks );

    }

Ajax 経由でコントローラーに正しいパラメーターを渡しますか?

ありがとう

4

2 に答える 2

2

コードにはいくつかの問題があります。

  • Html.BeginFormメソッドの誤ったオーバーロードを使用しています。使用したオーバーロードでidは、HTML属性ではなくルート値です
  • .submitコールバック内では、falseを返すことでデフォルトのアクションをキャンセルしていないため、フォームが送信されたときに、ブラウザーがページからリダイレクトされる前にAJAX呼び出しを実行する時間はほとんどありません。
  • formCollectionAJAX呼び出しのデータパラメーターでは、データをシリアル化する必要があるときに呼び出されるフォームを表すjQueryオブジェクトを渡します。
  • マークアップが壊れています=>対応する開始要素がない終了divが1つあります。

それでは、最初にマークアップを修正することから始めましょう。

<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "some-form" })) { %>
    <div id="TestDiv">
        <div id="Title">Test</div>                 
        <div id="CheckIn">
            Check-in:<br />
            <%= Html.TextBox("FromDate", "", new { id = "DateFrom", style = "width:190px" }) %>
        </div>
        <div id="CheckOut">
            Check-out:<br />
            <%= Html.TextBox("ToDate", "", new { id = "DateTo", style = "width:190px" }) %>
            <br />
        </div>
        <div id="newView"></div>
        <input type="submit" value="Search" />        
    </div>
<% } %>

次に、フォームをAJAX化するスクリプト：

$(function () {
    $('#some-form').submit(function () {
        $.ajax({
            type: this.method,
            url: this.action,
            data: $(this).serialize(),
            success: function (result) {
                $('#newView').html(result);
            },
            error: function (request, status, error) {
                alert('Oh no!');
            }
        });
        return false;
    });
});

ここで、対応するPOSTコントローラーアクションが正常に呼び出され、パラメーターが正しく渡されたことを確認する必要があります。また、このコントローラーアクション内で、部分ビューのレンダリング中にエラーが発生しないことを確認してください。FireBugなどのJavaScriptデバッグツールを使用して、送信されている要求/応答と、考えられるjsエラーを正確に確認します。

于 2012-05-01T10:50:12.923 に答える
0

フォームを送信用の文字列としてエンコードする-.Serialize()を呼び出す必要があります。formCollection

var formCollection = $('#some-form'); 
$(function(){ $('#some-form').submit(function(){ 
  $.ajax({ 
       type: "POST", 
       url: "/Trusk/Index", 
       data: formCollection.serialize(), 
       dataType: "html", 
       success: function (result) { 
           $('#newView').html(result); 
       }, 
       error: function (request, status, error) { 
           alert('Oh no!'); 
       } 
 }); 
});
});

また、FormCollectionコントローラーメソッドにパラメーターがありますが、実際には使用していませんか？

于 2012-05-01T08:18:56.380 に答える