jquery - 在mvc中使用ajax发送表单

Question

我的项目中有这种奇怪的行为，并且我遵循 this , this 和 this 链接但没有成功。每次我的 Controller 方法在调试时被命中，模型将始终为空。谁能告诉我还可以尝试通过 form.serialize() 传递模型的其他方法

这是我的模型:

public class AddNewUser
{
     public string uname { get; set; }
     public string password { get; set; }
     public string Role { get; set; }
     public string fname { get; set; }
     public string lname { get; set; }
     public HttpPostedFileBase profilepic { get; set; }
     public string email { get; set; }
     public string contact { get; set; }
}

这是我的观点:

@model AdminViewModel.AddNewUser
@{
    var uRole = TempData["UserRole"] as string;
    TempData.Keep("UserRole");
}

@using (Html.BeginForm("AddUser", "Admin", FormMethod.Post, new { id = "frmAddUser", @class = "form-admin col-lg-8 col-lg-offset-2" }))
{

    <h2 class="form-login-heading mar-pad">Add new user</h2>

     <label style="font-weight:normal" for="#txtuserName">Username *</label>
     @Html.TextBoxFor(m => m.uname, new {type="text",name="uname",tabindex="1",id="txtuserName", style="padding-right:20px", autocomplete="off", spellcheck="false",placeholder="Enter username", @class="form-control ip" })

     <label style="font-weight:normal" for="#txtPassword">Password *</label>

     @Html.PasswordFor(m => m.password, new { name = "password", tabindex = "2", id = "txtPassword", autocomplete = "off", spellcheck = "false", @class = "form-control ip", placeholder = "Enter password", data_tog = "tooltip", title = "Your Password must contain : <br />- at least 1 upper case character, <br /> - at least 1 lower case character, <br /> - at least 1 numerical character, <br /> - at least 1 special character.", data_placement = "top" })

     @if (uRole == "Admin")
     {

             <label style="font-weight:normal;margin-left:15px !important" for="#selectRole">Select Role *</label><br />
             <select id="selectRole" class="selectpicker show-menu-arrow full_wid col-md-12" tabindex="3" data-size="5">
                   <option value="0" selected disabled>Please select a role</option>
                   <option value="1">Admin</option>
                   <option value="2">Manager</option>
             </select>

             @Html.HiddenFor(m => m.Role, new { id="hdnRole", data_selected=""})

             <label style="font-weight:normal" for="#txtFName">First name *</label>
             @Html.TextBoxFor(m => m.fname, new { id="txtFname", style="padding-right:20px !important;", tabindex="4", autocomplete="off", spellcheck="false", placeholder="Enter user first name", @class="form-control ip"})

             <label style="font-weight:normal" for="#txtLName">Last name *</label>
             @Html.TextBoxFor(m => m.lname, new { id = "txtLname", style = "padding-right:20px !important;", tabindex = "5", autocomplete = "off", spellcheck = "false", placeholder = "Enter user last name", @class = "form-control ip"})

       }
       else
       {
             <label style="font-weight:normal" for="#txtFName">First name *</label>
             @Html.TextBoxFor(m => m.fname, new { id = "txtFname", style = "padding-right:20px !important;", tabindex = "3", autocomplete = "off", spellcheck = "false", placeholder = "Enter user first name", @class = "form-control ip" })

             <label style="font-weight:normal" for="#txtLName">Last name *</label>
             @Html.TextBoxFor(m => m.lname, new { id = "txtLname", style = "padding-right:20px !important;", tabindex = "4", autocomplete = "off", spellcheck = "false", placeholder = "Enter user last name", @class = "form-control ip" })
       }

     Upload image @Html.TextBoxFor(m => m.profilepic, new { type="file", id="userImageFile", tabindex=6, data_charset="file"})

     <label style="font-weight:normal" for="#txtUEmail">Email [optional]</label>
     @Html.TextBoxFor(m => m.email, new { id = "txtUEname", style = "padding-right:20px !important;", tabindex = "7", autocomplete = "off", spellcheck = "false", placeholder = "Enter user email[optional]", @class = "form-control ip" })

     <label style="font-weight:normal" for="#txtUContact">Contact [optional]</label>
     @Html.TextBoxFor(m => m.contact, new { id = "txtUContact", style = "padding-right:20px !important;", tabindex = "8", autocomplete = "off", spellcheck = "false", placeholder = "Enter user contact[optional]", @class = "form-control ip", data_maxlength="10" })

     <button class="btn btn-theme btn-block" name="add" onclick="javascript:AddUser(this);" tabindex="9" id="btnAddUser" type="submit"><i class="fa fa-save"></i> Save</button>

     <button class="btn btn-default btn-block" name="cancel" onclick="javascript: ResetAddUserForm('#frmAddUser');" tabindex="10" id="btnClear" type="button"><i class="fa fa-refresh"></i> Clear</button>

}

这是我的 ajax 调用:

function AddUser(ctrl)
{
    var data = "";
    $("#frmAddUser").on("submit", function (e) {
        e.preventDefault();
        ValidateForm("#frmAddUser");
        var formContainer = $('#frmAddUser .text-danger');
        if ($(formContainer).text().length == 0) {
            $.ajax({
                url: '/Admin/AddUser',
                type: "POST",
                dataType:'json',
                contentType: "application/json",
                data: $('form#frmAddUser').serialize(),
                success: function (data) {
                    if (data.result) {
                        ResetForm('#frmAddUser');
                        toastr.success(data.message, "Success");
                    }
                    else {
                        toastr.error(data.message, "Failed");
                    }
                },
                error:
                function (data) {
                    toastr.error(data.message, "Failed");
                }
            });
        }

        $("#frmAddUser").unbind('submit');
        return false;
    });
}

最后我的 Controller 方法:

[HttpPost]
  public ActionResult AddUser(AdminViewModel.AddNewUser usermodel) //->Always null
  {
       ......
  }

等待任何帮助!!

编辑 - 我知道这可以使用 FormData 而不是 $('form').serialize() 来完成，但我只想尝试一下这个方法!!

Answer 1

您可以使用 Ajax.BeginForm 代替 Html.BeginForm

Html vs Ajax beginform 引用: here