Ajax在視圖中不起作用

Question

我是.net mvc的新手，我試圖創建一個請求並提交表單的簡單頁面。當我使用Ajax進行httppost請求時，頁面不會發布/重定向。

JS文件這裏

<script> 
    $(document).ready(function() { 

     $("form").submit(function (e) { 


      var obj = { 

       Id : @Model.Id, 
       Name : '@Model.Name', 
       City : '@Model.City', 
       Gender : '@Model.Gender', 
       Dob : '@Model.Dob' 

      }; 

      $.ajax({ 

       url: '@Url.Action("Edit","Employee")', 
       type: 'POST', 
       dataType: 'json', 
       contentType: "application/json; charset=utf-8", 
       data: JSON.stringify(obj), 
       success: function (result) { 

        alert("Success"); 
       }, 

       failed: function (result) { 

        alert("Failed"); 
       } 

      }); 

      return false; 

     }); 

    }); 

</script> 

CSHTML鑑於此

[HttpPost] 
     public ActionResult Edit(Employee emp) 
     {    
      EmployeeBusinessLayer employeeBusinessLayer = new EmployeeBusinessLayer(); 
      if (ModelState.IsValid) 
      { 
       employeeBusinessLayer.Modify("Edit", emp); 

       return View(); 
      } 

      else return RedirectToAction("Index"); 

     } 

當我點擊 '保存'

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     <h4>Employee</h4> 
     <hr /> 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
     @Html.HiddenFor(model => model.Id) 

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

     <div class="form-group"> 
      @Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.DropDownList("Gender", new List<SelectListItem> 
      { 
       new SelectListItem { Text = "Male" , Value = "Male"}, 
       new SelectListItem { Text = "Female" , Value = "Female"} 
      }, "Select Gender" , new { @class = "form-control"}) 
       @Html.ValidationMessageFor(model => model.Gender, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

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

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

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

控制器代碼，沒有任何反應！我在這裏錯過了什麼？

Answer 1

根據您所張貼的控制器代碼，更改您的視圖的這一部分：

$("form").submit(function (e) { 
     e.preventDefault(); 

     $.ajax({ 

      url: '@Url.Action("Edit","Employee")', 
      type: 'POST', 
      data: $("form").serialize(), 
      success: function (result) { 

       alert("Success"); 
      }, 

      failed: function (result) { 

       alert("Failed"); 
      } 

     }); 

     return false; 

    }); 

你也應該改變你的控制器，你不應該返回一個View();但是那是另一件事完全.. 。

Answer 2

定義obj變量之前，加入這一行：

e.preventDefault(); 

選擇這樣的輸入：

var obj: { 
    Id: $('Id').val(), 
    Name: $('#Name').val(), 
    City: $('#City').val(), 
    Dob: $('#Dob').val(), 
    Gender: $("#Gender option:selected").val() 
} 

Answer 3

您需要使用e.preventDefault（）;在您提交方法如下圖所示：

<script> 
 
    $(document).ready(function() { 
 

 
     $("form").submit(function (e) { 
 

 
      e.preventDefault(); //prevent default form submit 
 
      var obj = { 
 

 
       Id : @Model.Id, 
 
       Name : '@Model.Name', 
 
       City : '@Model.City', 
 
       Gender : '@Model.Gender', 
 
       Dob : '@Model.Dob' 
 

 
      }; 
 

 
      $.ajax({ 
 

 
       url: '@Url.Action("Edit","Employee")', 
 
       type: 'POST', 
 
       dataType: 'json', 
 
       contentType: "application/json; charset=utf-8", 
 
       data: JSON.stringify(obj), 
 
       success: function (result) { 
 

 
        alert("Success"); 
 
       }, 
 

 
       failed: function (result) { 
 

 
        alert("Failed"); 
 
       } 
 

 
      }); 
 

 
      return false; 
 

 
     }); 
 

 
    }); 
 

 
</script>