Question

我的数据库中有一个房间记录，我想在JsonResult中使用Edit RoomController方法对其进行编辑，如下所示：

    [HttpPost]
    [ValidateAntiForgeryToken]
    public JsonResult Edit(RoomViewModel roomViewModel)
    {
        if (roomViewModel == null) throw new ArgumentNullException(nameof(roomViewModel));
        try
        {
            var apartmentRoomViewModel = new ApartmentRoomViewModel
            {
                Id = _entities.ApartmentRoom.Where(x => x.RoomID == roomViewModel.Id).Select(x => x.Id).Single(),
                ApartmentID = _entities.ApartmentRoom.Where(x => x.RoomID == roomViewModel.Id).Select(x => x.ApartmentID).Single(),
                RoomID = roomViewModel.Id
            };
            apartmentRoomViewModel.ApartmentID = roomViewModel.SelectedApartmentID;

            var apartmentRoom = AutoMapper.Mapper.Map<ApartmentRoom>(apartmentRoomViewModel);
            _entities.ApartmentRoom.AddOrUpdate(apartmentRoom);
            _entities.SaveChanges();

            var room = AutoMapper.Mapper.Map<Room>(roomViewModel);
            var status = _roomRepository.Update(room);
            _roomRepository.Save();

            return Json(new { status, message = "Success!", url = Url.Action("List", "Room") });
        }
        catch
        {
            return Json(new { status = false, message = "Error!" });
        }
    }

方法有效后，编辑成功，但我无法将页面重定向到/ Room / List。相反，我遇到了这样一个页面：

我的剧本

<script type="text/javascript">
$(document).ready(function () {
    $("#RoomEdit").click(function (e) {
        e.preventDefault();
        var data = {
            DoorNumber: $("#DoorNumber").val(),
            FloorNumber: $("#FloorNumber").val(),
            Capacity: $("#Capacity").val(),
            SelectedApartmentID: $("#SelectedApartmentID option:selected").val()
        }
        $.ajax({
            type: "POST",
            url: '@Url.Action("Edit","Room")',
            dataType: "json",
            data: JSON.stringify(data),
            contentType: "application/json",
            success: function (result) {
                if (result.status) {

                    window.location.href = result.url;
                }
            },
            error: function () {
            }
        });
        return false;
    });

});

Edit.cshtml

<div class="row">

<div class="col-md-10 offset-md-1">
    <div class="box">
        <div class="box-header">
            <h2>@ViewBag.Title</h2>
        </div>
        <div class="box-divider m-a-0"></div>
        <div class="box-body">
            @using (Html.BeginForm("Edit", "Room", FormMethod.Post))
            {
                @Html.AntiForgeryToken()
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group row">
                    @Html.LabelFor(x => x.DoorNumber, new { @class = "col-sm-2 form-control-label" })
                    <div class="col-sm-10">
                        @Html.TextBoxFor(x => x.DoorNumber, new { @class = "form-control" })
                        @Html.ValidationMessageFor(x => x.DoorNumber, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group row">
                    @Html.LabelFor(x => x.FloorNumber, new { @class = "col-sm-2 form-control-label" })
                    <div class="col-sm-10">
                        @Html.TextBoxFor(x => x.FloorNumber, new { @class = "form-control" })
                        @Html.ValidationMessageFor(x => x.FloorNumber, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group row">
                    @Html.LabelFor(x => x.Capacity, new { @class = "col-sm-2 form-control-label" })
                    <div class="col-sm-10">
                        @Html.TextBoxFor(x => x.Capacity, new { @class = "form-control" })
                        @Html.ValidationMessageFor(x => x.Capacity, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group row">
                    @Html.LabelFor(x => x.ApartmentName, new { @class = "col-sm-2 form-control-label" })
                    <div class="col-sm-10">
                        @Html.DropDownListFor(x => x.SelectedApartmentID, Model.ApartmentList, new { @class = "form-control", id = "SelectedApartmentID" })
                    </div>
                </div>
                <div class="form-group row m-t-md">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" id="RoomEdit" class="btn green">Düzenle</button>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

我无法理解我的代码有什么问题。任何帮助将不胜感激。

Answer 1

首先使用type="Button"而非提交来设置您的按钮，同时将点击功能ID从btnAdd更改为btnEdit。

在服务器端，如果你使用旧方法，roomViewModel.Id将获得0，而不是这样做序列化，所以你可以在服务器端方法获得所有输入。

还可以使用@Html.HiddenFor(x => x.id)将Id传递给方法。

尝试此功能，以便您可以使用AJAX调用方法

<script type="text/javascript">
    $(document).ready(function () {
        $("#RoomEdit").click(function (e) {
            e.preventDefault();
            var data = $("#formName").serialize();
            $.ajax({
                type: "POST",
                url: '@Url.Action("Edit", "Room")',
                data: data,
                success: function (result) {
                    if (result.status) {
                        alert(result.message);
                        setTimeout(function () {
                            window.location.href = result.url;
                        }, 1000);
                    }
                }
            });
        });
    })
</script>

Answer 2

您有代码来执行ajax提交。但是从您分享的图像来看，它似乎正在进行正常的表单提交。单击按钮时，请确保阻止默认表单提交行为。

你已经有return false;应该这样做。

只要您在页面中没有其他脚本错误，它就应该。（您可以通过打开浏览器控制台来验证这一点）

还要确保返回true作为要返回的json数据的status属性的值。从HttpPost操作方法返回时，无需在Json方法重载中指定JsonRequestBehavior.AllowGet枚举。如果您的操作方法是HttpGet
，则需要它
return Json(new { status= true, message = "Success!", url = Url.Action("List", "Room") });

此外，重定向到新页面后进行$.notify调用没有任何意义。这意味着根本不会执行调用！

在MVC中使用JsonResult重定向到操作

2 个答案: