Ajax POST不發送正確的表單值

Question

當我通過AJAX提交表單時，表單的值不正確。在這個片段中的代碼，通過AJAX值始終是15分鐘（但普通帖子提交作品很好！）

<script type="text/javascript"> 
     $(function() { 
      $('#BookButton').click(function (event) { 
       var form = $('#Form1'); 
       $.ajax({ 

        type: form.attr('method'), 
        url: form.attr('action'), 
        data: $("#BookRoom :input").serialize() 
       }).done(function (data) { 
        $('#BookRoom').modal('hide'); 
        if (data.ResponseType == 0) { 
         $('#SuccessMsg').text('Meeting Booked'); 
         $('#SuccessMessage').modal('show'); 
        } 
        else if (data.ResponseType == 1) { 
         $('#SuccessMsg').text('There are conflicts'); 
         $('#SuccessMessage').modal('show'); 
        } 

        else { 
         $('#SuccessMsg').text('Data: ' + data.ResponseType); 
         $('#SuccessMessage').modal('show'); 
        } 


        // Optionally alert the user of success here... 


        setTimeout(function() { $('#SuccessMessage').modal('hide'); }, 3000); 
       }).fail(function(jqXHR, textStatus){ 
        // Optionally alert the user of an error here... 
        alert("Error submitting AJAX request" + textStatus); 
       }); 
       event.preventDefault(); // Prevent the form from submitting via the browser. 
      }); 
     }); 

<form id="Form1" action="iPadLayout.aspx?RoomID=1" method="post" runat="server"> 


<div class="modal fade" id="BookRoom" tabindex="-1" role="dialog" aria-labelledby="BookRoomLabel" aria-hidden="true"> 

<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </button> 
    <h4 class="modal-title" id="myModalLabel">Book This Room</h4> 
    </div> 
    <div class="modal-body"> 
    <p>This room is available for the rest of the day</p> 

     <asp:DropDownList ID="MeetingLength" runat="server"> 
      <asp:ListItem Text="15 Minutes" Value="15" Selected="true" /> 
      <asp:ListItem Text="30 Minutes" Value="30" /> 
      <asp:ListItem Text="45 Minutes" Value="45" /> 
      <asp:ListItem Text="1 Hour" Value="60" /> 
      <asp:ListItem Text="1.5 Hours" Value="90" /> 
      <asp:ListItem Text="2 Hours" Value="120" /> 
</asp:DropDownList> 



    </div> 
    <div class="modal-footer"> 

    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <asp:Button type="button" id="BookButton" class="btn btn-primary" runat="server" Text="Book Room"></asp:Button> 
    </div> 
</div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

</form> 

編輯：

我認爲它的我的C＃這就是錯了 - 我一直在使用

string bookRoom = Request.Params.Get("MeetingLength"); 

，而不是反序列化數據 - 你怎麼看這個d ata在C＃中？

任何想法爲什麼它不通過AJAX工作，但通過正常的POST提交工作正常嗎？

Answer 1

檢出this question - 基本上，當您調用.net控件的序列化時，jQuery序列化例程使用控件的name屬性來標識數據。由於這是一個.net控件，name屬性不會像您期望的那樣。如果你想速戰速決，你使用的是.NET 4+，您可以設置控件上的ClientIDMode正確設置名稱客戶端：

<asp:DropDownList ID="MeetingLength" runat="server" ClientIDMode ="Static"> 
    <asp:ListItem Text="15 Minutes" Value="15" Selected="true" /> 
    <asp:ListItem Text="30 Minutes" Value="30" /> 
    <asp:ListItem Text="45 Minutes" Value="45" /> 
    <asp:ListItem Text="1 Hour" Value="60" /> 
    <asp:ListItem Text="1.5 Hours" Value="90" /> 
    <asp:ListItem Text="2 Hours" Value="120" /> 
</asp:DropDownList>