使用ajax，C＃MVC发送表单时为空表单字段

Question

我正在尝试使用$.ajax 将表单中的数据保存到数据库中。问题是当我提交表单时，用户名被保存为null。邮箱和密码保存正确。

function SaveForm() {
  var name = $("#User").val();
  var pwd = $("#Password").val();
  var email = $("#Email").val();
  if (name == "" || pwd == "" || email == "") {
      $("#message1").hide();
      $("#message2").show();
      return false;
  }
  var data =  $("#Registration").serialize();
  $.ajax({
      type: "post",
      data: data,
      url: "/Registration/SaveData",
      success: function (result) {
          $("#message1").show();
          $("#message2").hide();
          $("#Registration")[0].reset();
      }            
  });
}

<div class="modal-body">
  <form id="Registration">
      <div class="form-group">
          <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-user"></i></span>
              <input class="form-control" type="text" name="User" id="User" placeholder="UserName" />
          </div>
      </div>
      <div class="form-group">
          <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
              <input class="form-control" type="email" name="Email" id="Email" placeholder="Email" />
          </div>
      </div>
      <div class="form-group">
          <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-lock"></i></span>
              <input class="form-control" type="password" name="Password" id="Password" placeholder="Password" />
          </div>
      </div>
  </form>
  <div class="form-group">
      <button class="btn btn-info form-control" type="submit" onclick="SaveForm()"><i class="fa fa-paper-plane"></i>Submit</button>
  </div>
</div>

public JsonResult SaveData(SiteUser model) {
    model.IsValid = false;
    db.SiteUsers.Add(model);
    db.SaveChanges();
    BuildEmailTemplate(model.ID);
    return Json("Registration Successfull", JsonRequestBehavior.AllowGet); 
}

Answer 1

另一种处理表单值的方法：

function SaveForm() {
  var name = $("#User").val();
  var pwd = $("#Password").val();
  var email = $("#Email").val();

  var json = {
          name:name,
          pwd:pwd,
          email:email
         };

  if (name == "" || pwd == "" || email == "") {
      $("#message1").hide();
      $("#message2").show();
      return false;
  }

  $.ajax({
      type: "post",
      dataType: "json",
      data: {"json": JSON.stringify(json)},,
      url: "@Url.Action("SaveData","Registration")",
      success: function (result) {
          $("#message1").show();
          $("#message2").hide();
          $("#Registration")[0].reset();
      }            
  });
}

你的Controller 看起来像：

using System.Web.Script.Serialization;

[HttpPost]
public JsonResult SaveData(string json) 
{

    var serializer = new JavaScriptSerializer();
    dynamic jsondata = serializer.Deserialize(json, typeof(object));

    //Get your variables here from AJAX call
    var name= jsondata["name"];
    var pwd= jsondata["pwd"];
    var email= jsondata["email"];

    //Set your model here:
    SiteUser model=new SiteUser();
    model.name=name;
    model.pwd=pwd;
    model.email=email;

    //Perform db actions
    db.SiteUsers.Add(model);
    db.SaveChanges();
    BuildEmailTemplate(model.ID);
    return Json("Registration Successfull", JsonRequestBehavior.AllowGet); 
}

Answer 2

您应该添加dataType 和contentType，如下所示。

$.ajax({
  dataType: 'json',   
  contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 
  type: "post",
  data: $("#Registration").serialize(),
  url: "/Registration/SaveData",
  success: function (result) {
      $("#message1").show();
      $("#message2").hide();
      $("#Registration")[0].reset();
  }            
});