Ajax.BeginForm只显示部分View而不是parent＆amp;部分回归

Question

我有一个家长View＆amp;孩子观。

当与Ajax.BeginForm合影时，我期待回到整个父视图以及更新部分视图的结果。 仅显示部分视图的结果。

此外，当我正在调试时，“ OnSuccess ”方法似乎没有受到影响。

有人可以告诉我，我做错了吗？

控制器：

public class HomeController : Controller
    {
        private DAL db = new DAL();

        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to YeagerTech!";

            return View();
        }

        // GET: Categories/Create
        public ActionResult Create()
        {
            return View();
        }

        // POST: Categories/Create
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<ActionResult> Create(Category category)
        {
            if (ModelState.IsValid)
            {
                try
                {
                    await db.AddCategoryAsync(category);
                }
                catch (System.Exception ex)
                {
                    throw ex;
                }
            }

            return View(category);
        }

        public PartialViewResult ShowDetails()
        {
            //string code = Request.Form["txtCode"];
            Category cat = new Category();
            //foreach (Product p in prodList)
            //{
            //    if (p.ProdCode == code)
            //    {
            //        prod = p;
            //        break;
            //    }
            //}
            cat.CategoryID = 1;
            cat.Description = "Financial";
            return PartialView("_ShowDetails", cat);
        }

    }

父视图

@model Models.Models.Category

@{
    ViewBag.Title = "Create Category";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create Category</h2>

@using (Ajax.BeginForm("ShowDetails", "Home", new AjaxOptions
{
    HttpMethod = "POST",
    UpdateTargetId = "div1",
    InsertionMode = InsertionMode.Replace,
    OnSuccess = "OnSuccess",
    OnFailure = "OnFailure"
}, new { @class = "form-horizontal" }))
{
    @Html.AntiForgeryToken()
        @Html.ValidationSummary()
        <div class="body-content">
            <h4>Category</h4>
            <hr />
            <div class="form-group">
                <div class="col-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11">
                    @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control", @placeholder = "Description" } })
                    @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-lg-11 col-md-11 col-sm-11 col-xs-11">
                    <button type="submit" id="btnCategoryCreate" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span>Create</button>
                </div>
            </div>
        </div>
}

    <div id="div1">

    </div>

    @*<div>
        @Html.ActionLink("Back to List", "Index")
        @Html.Hidden("categoryCreateUrl", Url.Action("Create", "Home"))
    </div>*@

    @section Scripts {
        <script>
            $(document).ready(function ()
            {
                function OnSuccess(response)
                {
                    $('#form1').trigger("reset");
                }

                //if (typeof contentCreateCategory == "function")
                //    contentCreateCategory();
            });
        </script>
    }

部分视图

@model Models.Models.Category

    <h1>Cat Details</h1>
    <h2>
        Cat Code: @Model.CategoryID<br />
        Cat Name: @Model.Description<br />
    </h2>

编辑＃1

父母与子女显示子视图（由于缺少JS文件，感谢提到Stephen），并且能够以编程方式使用OnSuccess方法清除表单。

我曾经想过，因为那是JS，它需要进入Scripts部分，但在那里没有认出来。

这是完成的代码。

@using (Ajax.BeginForm("ShowDetails", "Home", new AjaxOptions
    {
        HttpMethod = "POST",
        UpdateTargetId = "div1",
        InsertionMode = InsertionMode.Replace,
        OnSuccess = "OnSuccess",
        OnFailure = "OnFailure"
    }, new { @id = "frm1", @class = "form-horizontal" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()
    <div class="body-content">
        <h4>Category</h4>
        <hr />
        <div class="form-group">
            <div class="col-offset-1 col-lg-11 col-md-11 col-sm-11 col-xs-11">
                @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control", @placeholder = "Description" } })
                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-lg-11 col-md-11 col-sm-11 col-xs-11">
                <button type="submit" id="btnCategoryCreate" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span>Create</button>
                <button type="reset" id="btnClear" class="btn btn-default"><span class="glyphicon glyphicon-eye-close"></span>Clear</button>
            </div>
        </div>
    </div>
}

<div id="div1">

</div>

<script type="text/javascript">

    function OnSuccess(response)
    {
        $('#frm1').trigger("reset");
    }

    function OnFailure(response)
    {
        alert("Whoops! That didn't go so well did it?");
    }

</script>

Answer 1

回答有点迟，但它可能对其他人有帮助。

问题可能是Ajax.BeginForm所需的javascript文件未加载到您的页面中。

  

Microsoft.jQuery.Unobtrusive.Ajax

Nuget包搜索

<package id="Microsoft.jQuery.Unobtrusive.Ajax" version="3.2.3" targetFramework="net45" />

当然版本可能会有所不同。

在jQuery之后添加对页面的引用，它应该可以工作。