javascript - 表单序列化总是返回空字符串

Question

我的 View 中有一个下拉菜单。根据选择，我将部分 View 插入到 View 中的 div(占位符)中。下面是 View 。

<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');
        });

    });
});

因此，当我在下拉列表中选择“重置我的密码”时，我成功地将我的部分 View 插入到我 View 中的 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() 始终是 ""(空字符串)。

我试着只用一个元素制作 View 。我验证了元素具有 name 属性以便序列化工作。我还确认我的按钮中没有 type=submit。我将 resetpasswordform 更改为表单而不是 div。我什至在没有动态填充的情况下直接在 Index.cshtml 中呈现局部 View 。没有解决问题。它始终返回空字符串。

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

Answer 1

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

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

并将其从 div 中移除。