表单序列化始终返回空字符串

Question

我的观点中有一个下拉菜单。根据选择，我将部分视图插入视图中的div（占位符）中。下面是视图。

<div class="container">
    <div class="row">
    <div class="col-lg-4"><p class="lead">What do you want to do?</p></div>
    <div class="col-lg-8">
        <select id="myDropDown">
            <option id="0" selected>I want to..</option>
            <option id="1">Reset my password</option>
        </select>
    </div>
</div>
<div id="partialPlaceHolder" style="display:none;"> </div>
<script type="text/javascript">
  $(document).ready(function () {
    $('#myDropDown').change(function () {
        /* Get the selected value of dropdownlist */
        var selectedID = $(this).find('option:selected').attr('id');
        /* Request the partial view with .get request. */
        $.get('/Requests/FindPartial/' + selectedID, function (data) {
            /* data is the pure html returned from action method, load it to your page */
            $('#partialPlaceHolder').html(data);
            /* little fade in effect */
            $('#partialPlaceHolder').fadeIn('fast');
        });
    });
});

因此，当我在下拉列表中选择"重置密码"时，我成功地将部分视图插入到视图中的div 中。以下是我的部分观点。

 @using (Html.BeginForm())
 {
     @Html.AntiForgeryToken()
     <div class="row">
         <div class="col-lg-12">
             <div class="well well-lg" style="text-align:left">
                 <div class="form-horizontal" id="resetpasswordform">
                     <h4>Reset Password</h4>
                     <hr />
                     <div class="form-group">
                         @Html.LabelFor(model => model.ServersList, htmlAttributes: new { @class = "control-label col-md-2" })
                         <div class="col-md-10">
                             @Html.DropDownListFor(model => model.ServerName, new SelectList(Model.ServersList))
                         </div>
                     </div>
                     <div class="form-group">
                         @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })
                         <div class="col-md-10">
                             @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control" } })
                         </div>
                     </div>
                     <div class="form-group">
                         <div class="col-md-offset-2 col-md-10">
                             <input type="button" id="submitButton" value="Reset" class="btn btn-default" />
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 }
 <script>
     $(function () {
         $("#submitButton").click(function () {
             debugger;
             $.ajax({
                 type: "POST",
                 url: "Requests/Do_ResetPassword",
                 data: $("#resetpasswordform").serialize(),
                 success: function (data) {
                     debugger;
                 },
                 error: function (jqXHR, textStatus, errorThrown)
                 {
                     alert(errorThrown);
                 }
             });
         });
     });
 </script>

问题是当单击提交按钮并且我进行 ajax post 调用时，$("#resetpasswordform").serialize()始终是"（空字符串）。

我尝试只用一个元素制作视图。我验证了元素是否具有 name 属性以便序列化工作。我还确认我的按钮中没有type=submit。我将重置密码表单更改为表单而不是div。我什至直接在 Index.cshtml 中呈现部分视图，而无需动态填充。没有什么能解决问题。它始终返回空字符串。

我

验证了SO中的所有其他类似问题，并且没有得到任何关于我做错了什么的提示。请帮忙。

Answer 1

如何在表单标签中设置 id：

@using (Html.BeginForm("action", "controller", FormMethod.Post, new { Id = "resetpasswordform" }))

并将其从div 中删除。