首页 文章

如何使用ajax从asp.net中的bootstrap模式提交数据?

提问于
浏览
0

我一直陷入这个问题,使用来自bootstrap模式的ajax / jquery将数据提交到数据库中,我认为在ajax方法中没有问题 . 但它没有响应任何aleart消息 .

这是控制器

[HttpPost]

    public JsonResult Register(User user)
    {
        db.Users.Add(user);
        db.SaveChanges();

        string message = "successfully Register";

        return Json(message);
    }

Bootstrap模态视图

<button id="btn1"> Register</button>
       <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
       <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times; 
   </button>
               <h4 class="modal-title">Modal Header</h4>

        </div>

              <div class="modal-body">
                  <h2>RegisterView</h2>

                  @using (Html.BeginForm("Register", "User", FormMethod.Post))
                  {
                      @Html.AntiForgeryToken()
                      @Html.ValidationSummary(true)

                      <div class="form-horizontal">
                          <h4>User</h4>
                          <hr/>


                          <div class="form-group">
                              @Html.LabelFor(model => model.FirstName, new {@class = "control-label col-md-2"})
                              <div class="col-md-10">
                                  @Html.EditorFor(model => model.FirstName)
                                  @Html.ValidationMessageFor(model => model.FirstName)
                              </div>
                          </div>

                          <div class="form-group">
                              @Html.LabelFor(model => model.SurName, new {@class = "control-label col-md-2"})
                              <div class="col-md-10">
                                  @Html.EditorFor(model => model.SurName)
                                  @Html.ValidationMessageFor(model => model.SurName)
                              </div>
                          </div>

                          <div class="form-group">
                              @Html.LabelFor(model => model.UserName, new {@class = "control-label col-md-2"})
                              <div class="col-md-10">
                                  @Html.EditorFor(model => model.UserName)
                                  @Html.ValidationMessageFor(model => model.UserName)
                              </div>
                          </div>

                          <div class="form-group">
                              @Html.LabelFor(model => model.Email, new {@class = "control-label col-md-2"})
                              <div class="col-md-10">
                                  @Html.EditorFor(model => model.Email)
                                  @Html.ValidationMessageFor(model => model.Email)
                              </div>
                          </div>

                          <div class="form-group">
                              @Html.LabelFor(model => model.Password, new {@class = "control-label col-md-2"})
                              <div class="col-md-10">
                                  @Html.EditorFor(model => model.Password)
                                  @Html.ValidationMessageFor(model => model.Password)
                              </div>
                          </div>

                          <div class="form-group">
                              @Html.LabelFor(model => model.ConfirmPassword, new {@class = "control-label col-md-2"})
                              <div class="col-md-10">
                                  @Html.EditorFor(model => model.ConfirmPassword)
                                  @Html.ValidationMessageFor(model => model.ConfirmPassword)
                              </div>
                          </div>

                          <div class="form-group">
                              <div class="col-md-offset-2 col-md-10">
                                  <input id="submit" type="submit" value="Create" class="btn btn-default"/>
                              </div>
                          </div>
                      </div>
                  }

              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>

    </div>

 </div>
</div>

Ajax方法

$(document).ready(function() {
    $("#btn1").click(function() {

        //alert("Heloo");
        $("#myModal").modal();
    });


    $("#submit").click(function(e) {
        e.preventDefault();
        var a = $("#FirstName").val();
        var b = $("#SurName").val();
        var c = $("#UserName").val();
        var d = $("#Email").val();
        var z = $("#Password").val();
        var f = $("#ConfirmPassword").val();

        var jsonData = {
            FirstName: a,
            SurName: b,
            UserName: c,
            Email: d,
            Password: z,
            ConfirmPassword: f


        };
        $.ajax({
            type: "POST",
            url: '@Url.Action("Register", "User")',
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(jsonData),



            dataType: "json",
            success: function(data) {

                alert(data);

            }
          });
        });

         });
       </script>

我不知道那些代码行的问题在哪里 . 任何建议都是可以接受的 . 谢谢 .

1 回答

  • 0

    试试下面的代码

    $.ajax({
                cache: false,
                type: 'POST',
                url: '../User/Register',
                data: JSON.stringify({  FirstName: a,  Password: z}),                
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
    
                }
                 ,
                error: function (ex) {
                    alert('Failed to retrieve data : ' + ex);
                }
            });`
    

相关问题