Question

我现在一直在用Ajax.BeginForm挣扎一段时间。

所以，我想要实现的是：

单击一个按钮，打开一个带有局部视图的模态弹出窗口。
按下“保存”按钮关闭“模态弹出窗口”时，通过调用控制器上的操作，将在目标控件ID上重新加载信息。

发生的事情是，我第一次这样做，一切似乎按预期工作。但是，只要我尝试添加其他内容，它就不再起作用了。

这是代码。

继承在Modal Popup中加载的视图上的代码

@model GEMS.Models.ViewModels.AddressVM

@{
    string controllerName = ViewContext.RouteData.Values["controller"].ToString();
    string actionName = ViewContext.RouteData.Values["action"].ToString();
}

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title" id="myModalLabel">@HTMLHelper.TranslateCRUDTitles(controllerName, actionName)</h4>
</div>
@using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, OnSuccess = "ShowSuccess", OnFailure = "ShowFailure" }))
{
    @Html.AntiForgeryToken()
    <div class="modal-body">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @foreach (System.Reflection.PropertyInfo prop in Model.GetDisplayProps())
        {
            switch (prop.Name)
            {
                case "NewAddressTypeName":
                    break;
                case "AddressType":
                    <div class="form-group">
                        @Html.Label(prop.Name)

                        @Html.DropDownList("AddressTypeID", null, htmlAttributes: new { @class = "form-control" }).DisableIf(() => actionName == "Delete")
                        @Html.ValidationMessage(prop.Name, new { @class = "text-danger" })

                    </div>
                    break;
                case "Country":
                    <div class="form-group">
                        @Html.Label(prop.Name)

                        @Html.DropDownList("CountryID", null, htmlAttributes: new { @class = "form-control" }).DisableIf(() => actionName == "Delete")
                        @Html.ValidationMessage(prop.Name, new { @class = "text-danger" })

                    </div>
                    break;
                case "IsDefault":
                    <div class="form-group">

                        <label class="checkbox-inline">
                            @Html.Editor(prop.Name, new { htmlAttributes = new { @class = "grey" } }).DisableIf(() => actionName == "Delete")
                            @Html.Label(prop.Name)
                        </label>
                        @Html.ValidationMessage(prop.Name, new { @class = "text-danger" })

                    </div>
                    break;
                case "SameAsID":
                    if (ViewBag.SameAsID != null)
                    {
                        <div class="form-group">
                            @Html.Label(prop.Name)

                            @Html.DropDownList(prop.Name, null, htmlAttributes: new { @class = "form-control" }).DisableIf(() => actionName == "Delete")
                            @Html.ValidationMessage(prop.Name, new { @class = "text-danger" })

                        </div>
                    }
                    break;
                default:
                    <div class="form-group">
                        @Html.Label(prop.Name)

                        @Html.Editor(prop.Name, new { htmlAttributes = new { @class = "form-control" } }).DisableIf(() => actionName == "Delete")
                        @Html.ValidationMessage(prop.Name, new { @class = "text-danger" })

                    </div>
                    break;
            }
        }
        @foreach (System.Reflection.PropertyInfo prop in Model.GetHiddenProps())
        {
            <input id="@prop.Name" name="@prop.Name" type="hidden" value="@Model.GetPropValue(prop.Name)">
        }
    </div>
    <div class="modal-footer">
        @if (actionName == "Delete")
        {
            <p>
                @Resources.ConfirmAddressDelete
            </p>
        }
        <button class="btn btn-yellow" type="button" data-dismiss="modal">
            @Resources.Cancel <i class="fa fa-arrow-circle-left"></i>
        </button>
        @switch (actionName)
        {
            case "Create":
            case "Edit":
                <button class="btn btn-success" type="submit" value="Save">
                    @Resources.Save <i class="fa fa-save"></i>
                </button>
                break;
            case "Delete":
                <button class="btn btn-red" type="submit" value="Delete">
                    @Resources.Delete <i class="fa fa-times"></i>
                </button>
                break;
        }
    </div>
}

以下是控制器相关操作：

public ActionResult Index(List<AddressVM> addressVMList)
    {
        addressVMList = addressVMList ?? (List<AddressVM>)TempData["AddressVMList"];

        TempData["AddressVMList"] = addressVMList;

        TempData.Keep("AddressVMList");

        return PartialView("_Index", addressVMList);
    }

    public ActionResult Create()
    {         
        TempData.Keep("AddressVMList");
        ViewBag.AddressTypeID = new SelectList(AddressType.GetList(), "ID", "Name");
        ViewBag.CountryID = new SelectList(Country.GetList(), "ID", "NiceName");

        List<AddressVM> addressVMList = (List<AddressVM>)TempData["AddressVMList"];           

        return PartialView("_CreateEditDelete", new AddressVM());
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(AddressVM addressVM)
    {
        if (ModelState.IsValid)
        {
            //Create a fake ID in order to be able to edit and manipulate the address before it is actually saved
            List<AddressVM> addressVMList = (List<AddressVM>)TempData["AddressVMList"];
            addressVM.Id = (addressVMList.Count + 1) * -1;
            addressVMList.Add(addressVM);

            if (addressVM.IsDefault) ListedPropVM.SetDefault(addressVMList.Cast<ListedPropVM>().ToList(), addressVM.Id);

            TempData.Keep("AddressVMList");

            string url = Url.Action("Index", "Addresses", null);
            return Json(new { success = true, url = url, method = "replaceTargetAddresses" });
        }

        // return PartialView("_CreateEditDelete", addressVM);
        return RedirectToAction("Create");
    }

最后是在OnSuccess上运行的脚本：

  function ShowSuccess(data) {        
        if (data.success) {
            $('#defaultModal').modal('hide');
            $('#' + data.method).load(data.url);
        }
    }
    function ShowFailure(data) {
        alert('Problem occured');
    }

提前感谢您的帮助和时间。

Answer 1

我通过在局部视图上的脚本中添加以下内容来解决问题：

＆＃13;

<script type="text/javascript">
    **$(document).ready(function () {
        $.ajaxSetup({ cache: false });
    });**

    function ShowSuccess(data) {
        if (data.success) {
            $('#defaultModal').modal('hide');
            $('#' + data.method).load(data.url);
        }
    }
    function ShowFailure(data) {
        $('#defaultModalContent').html(result);
    }
</script>

＆＃13;

希望这有助于其他人。

MVC 5 Ajax.BeginForm仅在第一次工作

1 个答案: