Question

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

这是我的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局部视图，它在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>

我的控制员：

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

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

        return View("EditMeal", allMeals);
    }

一切似乎都有效，但只有在_EditMenu视图的脚本标记中插入debugger;并逐步执行我的代码时才会有效。我花了一些时间在谷歌试图寻找解决方案，但我已经空了。我尝试将cache: false添加到ajax帖子中，使用@Url.Action()来正确呈现网址，但似乎没有任何效果。一旦我退出调试模式，ajax调用永远不会命中我的控制器并且每次都失败。为什么我的ajax帖子只能在调试时工作？

注意：Bootstrap，Jquery，jquery.validate和jquery.unobtrusive-ajax都在我的共享_layout页面上捆绑和渲染。

Answer 1

您没有取消表单的提交操作，因此会回发。

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

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

Jquery Ajax仅在调试模式下有效

1 个答案: