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()总是“”（空字符串）。

我尝试用一个元素制作视图。我验证了元素的名称属性，以便序列化工作。我还确认我的按钮中没有type=submit。我将resetpasswordform更改为表单而不是div。我甚至直接在Index.cshtml中渲染了局部视图而没有动态填充。什么都没解决问题。它一直返回空字符串。

我在SO中验证了所有其他类似的问题，并没有对我做错的事情有任何暗示。请帮忙。

Answer 1

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

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

并将其从div中删除。

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

1 个答案: