Jquery Ajax 仅在 Debug模式下工作

Question

我正在尝试自学 MVC 和 jquery，但似乎在通过 ajax 将数据发送回我的 Controller 时遇到问题。我的想法是在 EditMenu View 中显示 MealViewModel 类型的列表，然后在厨师想要插入新餐或编辑餐时使用 Bootstrap 模式显示部分 View 。我还没有进入编辑部分。

这是我的 EditMenu View :

@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 部分 View ，它在 Bootstrap 模式中呈现。

@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>

还有我的 Controller :

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

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

        return View("EditMeal", allMeals);
    } 

一切似乎都有效，但只有在 _EditMenu View 的脚本标记中插入 debugger; 并单步执行我的代码时才有效。我在谷歌上花了一些时间试图找到解决方案，但一无所获。我尝试将 cache: false 添加到 ajax 帖子中，使用 @Url.Action() 来正确呈现 url，但似乎没有任何效果。一旦我退出 Debug模式，ajax 调用就永远不会到达我的 Controller 并且每次都会失败。为什么我的 ajax 帖子仅在调试时才有效？

注意:Bootstrap、Jquery、jquery.validate 和 jquery.unobtrusive-ajax 都捆绑并呈现在我的共享 _layout 页面上。

Answer 1

您不会取消表单的提交操作，因此它将发回。

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

此外，当您进行 Ajax 调用时，您不会对响应执行任何操作。