JQuery Ajax работает только в режиме отладки

Question

Я пытаюсь научить себя MVC и jquery, но, похоже, возникают проблемы с отправкой данных обратно на контроллер через ajax. Моя идея состояла в том, чтобы отобразить список типов MealViewModel в моем представлении EditMenu, а затем использовать модулятор начальной загрузки, чтобы отобразить частичный вид, когда шеф-повар хотел вставить новую еду или отредактировать еду. Я еще не добрался до части редактирования.

Вот мой вид EditMenu:

@model IEnumerable<Test.Models.MealViewModel> 
@using Test.Utilities; 

@{ 
    ViewBag.Title = "Edit Menu"; 
} 
<div class="container"> 
    <br /> 
    @Html.ActionLink("Insert New Meal ", "InsertMeal", "Chef", null, new { @class = "modal-link btn btn-primary" }) 
    <br /><br /> 
    <table class="table"> 
     <tr> 
      <th> 
       @Html.DisplayNameFor(model => model.MealDescription) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.MealDate) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.MealType) 
      </th> 
      <th></th> 
     </tr> 

     @foreach (var item in Model) 
     { 
      <tr> 
       <td> 
        @Html.DisplayFor(modelItem => item.MealDescription) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.MealDate) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.MealType) 
       </td> 
       <td> 
        @Html.ActionLink(linkText: "Edit", 
        actionName: "EditMeal", 
        controllerName: "Chef", 
        htmlAttributes: new { @class = "modal-link btn btn-primary" }, 
        routeValues: new { mealId = item.MealId }) 
       </td> 
      </tr> 
     } 
    </table> 
</div> 

<div id="modal-container" class="modal fade" tabindex="-1" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"></div> 
     </div> 
    </div> 
</div> 

@section scripts { 
    <script type="text/javascript"> 
     $(function() { 
      $('body').on('click', '.modal-link', function (e) { 
       e.preventDefault(); 
       $(this).attr('data-target', '#modal-container'); 
       $(this).attr('data-toggle', 'modal'); 
      }); 

      $('body').on('click', '.modal-close-btn', function() { 
       $('#modal-container').modal('hide'); 
      }); 

      $('#modal-container').on('hidden.bs.modal', function() { 
       $(this).removeData('bs.modal'); 
      }); 

      $('#cancel-button').on('click', function() { 
      return false; 
     }); 
    }); 
</script> 

}

Вот мой _EditMeal частичный вид, который оказывается в начальной загрузки модальным.

@model Test.Models.MealViewModel 

<div class="modal-header"> 
    <div class="alert alert-info"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h1 class="modal-title">Create New Meal</h1> 
    </div> 
    <div class="modal-body"> 
     <form id="insertForm"> 
      <div class="form-horizontal"> 

       <div class="form-group"> 
        <label class="control-label col-md-2">Description: </label> 
        <div class="col-md-10"> 
         <input type="text" id="meal-description" class="form-control" name="description" /> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label class="control-label col-md-2">Date:</label> 
        <div class="col-md-10"> 
         <input id="meal-date" class="form-control" type="date" name="date" /> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label class="control-label col-md-2">Type:</label> 
        <div class="col-md-10"> 
         <select id="meal-type" class="form-control" name="type"> 
          <option value="Breakfast">Breakfast</option> 
          <option value="Dinner">Dinner</option> 
         </select> 
        </div> 
       </div> 

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

      </div> 
     </form> 
    </div> 
</div> 

<script type="text/javascript"> 
     $("#submit-button").on('click', function() { 

     var meal = { 
      "MealDescription": $("#meal-description").val(), 
      "MealDate": $("#meal-date").val(), 
      "MealType": $("#meal-type").val() 
     }; 

     $.ajax({ 
      type: "POST", 
      cache: false, 
      url: '@Url.Action("InsertMeal", "Chef")', 
      contentType: 'application/json; charset=utf-8', 
      data: JSON.stringify(meal), 
      dataType: "json" 
     }); 
    }); 
</script> 

И мой контроллер:

// Insert new meal 
    [HttpPost] 
    public ActionResult InsertMeal(MealViewModel newMeal) 
    { 
     repo.InsertMeal(newMeal); 

     List<MealViewModel> allMeals = repo.GetAllMeals().ToList(); 

     return View("EditMeal", allMeals); 
    } 

Все, кажется, работает, но только при вставке debugger; в тэге в представлении _EditMenu и пошаговый мой код. Я потратил некоторое время на Google, пытаясь найти решение, но я вышел пустым. Я попытался добавить cache: false в сообщение ajax, использовал @Url.Action() для правильного отображения URL-адреса, но ничего не работает. Как только я выхожу из режима отладки, вызов ajax никогда не ударяет мой контроллер и не сработает каждый раз. Почему мой пост ajax работает только при отладке?

Примечание: Bootstrap, JQuery, jquery.validate и jquery.unobtrusive-ajax все связаны и отображаются на моей общей странице _layout.

Answer 1

Вы не отменяете действие отправки формы так, что оно будет отправлено обратно.

$("#submit-button").on('click', function (evt) { 
    evt.preventDeafult(); 

Также, когда вы совершаете вызов Ajax, вы ничего не делаете с ответом.