部分视图未在内部呈现 div

Question

所以我试图关注 this guide and the followup article.

但在开始搜索、排序和过滤之前，我想看看页面是否按预期工作。

不幸的是，它们不是，我终究无法弄清楚为什么，我什至下载了他的工作示例，只是为了看看它是否与我的浏览器有关。（要在第二篇文章的顶部下载他的工作示例，我不能 post 超过 2 links）

自从他的工作以来，我将他的视图、控制器和脚本与我的并排比较，据我所知，它们相互映射。

所以我最终将我的代码复制到其他地方并将他的代码粘贴到我的项目中，更改了 ActionLinks 以反映我使用的命名约定并遗漏了我尚未实现的内容（如上所述）。而且它仍然执行已发送的工作。

当我运行它们并排时，我在控制台中没有收到任何错误，它们正在加载相同的脚本，除了我添加 jquery.unobstrusive-ajax.js 作为尝试通过搜索解决方案来更正它，但它没有帮助。

我不知道我在这里做错了什么：/

我的管理视图 - 与他的主页索引视图相关我在这里唯一真正改变的是动作 link

@{
    ViewBag.Title = "Home Page";
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/bootstrap")
    <script src="~/Scripts/ModalDialog.js"></script>
    <style>
        .testClass {
            font-size: xx-large;
            text-transform: capitalize;
        }
    </style>
    <title>
        Complete example of MVC pagination, filtering and sortig inside patial view with edit in modal dialog

    </title>
</head>
<body style="padding-top:0">

    <table style="width:100%;" border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td style="" colspan="2">

                <div id="logo" style="height:70px; background-color:rgba(86, 111, 111, 1);font: 1.5em Georgia, Times New Roman, Times, serif;">
                    Complete example of MVC pagination, filtering and sortig inside patial view with edit in modal dialog
                </div>
                <div id="navigation" style="background-color:#a4c2c2">
                    <a href="index" class="current">HOME</a>
                </div>
            </td>
        </tr>
        <tr style="height:600px">
            <td style="width:200px;background-color: #a4c2c2; vertical-align:top; padding-top:10px; padding-left:10px">
                <div>
                    <ul>
                        <li>

                            @Html.ActionLink("Manage Assets", "MasterDetail", "Assets", new { }, new { id = "btnCustomers", @class = "btn btn-default btn-xs" })

                        </li>
                    </ul>
                </div>

            </td>
            <td>
                <div id="contentFrame" style="width:100%; height:600px; padding-top:10px; padding-left:10px" />
            </td>
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $.ajaxSetup({cache : false})
        $('#btnCustomers').click(function () {
            $('#contentFrame').mask("waiting ...");
            $('#contentFrame').load(this.href, function (response, status, xhr) {
                $('#contentFrame').unmask("waiting ...");
            });
            return false;
        });

    });





</script>

我的 MasterDetail 视图 - 与他的客户索引视图相关我的 table 设置不同，因为我还没有完成他所做的一切

@using PagedList.Mvc
@model PagedList.IPagedList<Furst_Alpha_2._0.Models.Quantities>

@{
    Layout = null;
}
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/ModalDialog.js"></script>
<h2>Inventory Management</h2>

<p>
    @Html.ActionLink("Create New", "_Create", new { id = -1 }, new { btnName = "btnCreate", @class = "btn btn-default btn-xs" })
</p>
<table class="table">
    <tr>
        <th>
            Category
        </th>
        <th>
            Make
        </th>
        <th>
            Model
        </th>
        <th>
            Type
        </th>
        <th>
            Length
        </th>
        <th>
            Width
        </th>
        <th>
            Height
        </th>
        <th>
            Weight
        </th>
        <th>
            Description
        </th>
        <th>
            Rental Price
        </th>
        <th>
            Number Of Techs
        </th>
        <th>
            Total
        </th>
        <th>
            In User
        </th>
        <th>
            Availability
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Assets.Category.CategoryName)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Assets.Make.MakeName)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Assets.Model.ModelName)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Assets.Type.TypeName)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Assets.Length)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Assets.Width)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Assets.Height)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Assets.Weight)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Assets.Description)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Assets.RentalPrice)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Assets.NumTechsReq)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.total)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.InUse)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Availability)
            </td>

            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.QuantityId }, new { btnName = "btnEdit", @class = "btn btn-default btn-xs" })
                @Html.ActionLink("Delete", "Delete", new { id = item.QuantityId }, new { btnName = "btnDelete", @class = "btn btn-default btn-xs" })
            </td>
        </tr>
    }

</table>

    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
    <div id="myPager">

        @Html.PagedListPager(Model, page => Url.Action("MasterDetail", new { page, OrderID = ViewBag.OrderID }))
    </div>

<script type="text/javascript">

    $(function () {
        $.ajaxSetup({ cache: false });

        setDialogLink($('a[btnName=btnCreate]'), 'Add New Asset', 500, 600, "contentFrame", "/Assets/MasterDetail");
        setDialogLink($('a[btnName=btnEdit]'), 'Edit Customer', 500, 600, "contentFrame", "/Customers/Index");
        setDialogLink($('a[btnName=btnDetails]'), 'Customer Details', 500, 600, "contentFrame", "/Customers/Index");

        $('a[btnName=btnDelete]').click(function (e) {
            e.preventDefault();
            var confirmResult = confirm("Are you sure?");
            if (confirmResult)
            {
                $('#contentFrame').mask("waiting ...");

                $.ajax(
                    {
                        url: this.href,
                        type: 'POST',
                        data: JSON.stringify({}),
                        dataType: 'json',
                        traditional: true,
                        contentType: "application/json; charset=utf-8",
                        success:function(data)
                        {
                            if (data.success) {
                                $('#contentFrame').load("/Customers/Index");
                            }
                            else {

                                alert(data.errormessage);
                            }
                            $('#contentFrame').unmask("waiting ...");

                        },
                        error: function (data) {
                            alert("An error has occured!!!");
                            $('#contentFrame').unmask("waiting ...");
                        }

                    });
            }

        })


        $("a[btnName=FilterCustomer]").click(function (e) {
            e.preventDefault();
            var search = $('input[name=search]').val();
            this.href = this.href.replace('xyz', search);
            $('#contentFrame').mask("waiting ...");
            $.ajax({
                url: this.href,
                type: 'POST',
                cache: false,
                success: function (result) {
                    $('#contentFrame').unmask("waiting ...");
                    $('#contentFrame').html(result);
                }

            });
        });


        $(".SortButton").click(function (e) {

            e.preventDefault();
            $('#contentFrame').mask("waiting ...");
            $.ajax({
                url: this.href,
                type: 'POST',
                cache: false,
                success: function (result) {
                    $('#contentFrame').unmask("waiting ...");
                    $('#contentFrame').html(result);
                }

            })

        });


        $('#myPager').on('click', 'a', function (e) {
            e.preventDefault();
            $('#contentFrame').mask("waiting ...");
            $.ajax({
                url: this.href,
                type: 'GET',
                cache: false,
                success: function (result) {
                    $('#contentFrame').unmask("waiting ...");
                    $('#contentFrame').html(result);

                }
            });

        });

    });

</script>

我的 AssetsController Manage 和 MasterDetail 方法分别与他的 HomeController Index 和 CustomerController Index 方法相关联。

// GET: Assets
        public ActionResult Manage()
        {
            return View();
        }

        // GET: MasterDetail
        public ActionResult MasterDetail(int? page)
        {
            ApplicationUser user = System.Web.HttpContext.Current.GetOwinContext().GetUserManager<ApplicationUserManager>().FindById(User.Identity.GetUserId());
            //ApplicationUser user = db.Users.First(u => u.Id == userr.Id);

            var assets = db.Quantities.Where(a => a.VendorId == user.VendorId).OrderByDescending(a => a.AssetId);
            int pageNumber = page ?? 1;
            int pageSize = 3;
            return PartialView(assets.ToPagedList(pageNumber, pageSize));
        }

Answer 1

我不太确定你的问题是什么，但我认为我在你的代码中看到了一个问题。

在MasterDetail.cshtml中尝试替换

@Html.PagedListPager(Model, page => Url.Action("_MasterDetail", new { page, OrderID = ViewBag.OrderID }))

和

@Html.PagedListPager(Model, page => Url.Action("MasterDetail", new { page, OrderID = ViewBag.OrderID }))

Url.Action 需要操作名称，而不是 razor 视图名称。

Answer 2

所以昨晚躺在床上时，我对导致问题的原因感到困惑，我想也许我应该看看替代方案。我看到了一些 Ajax 变体（你会看到它们被注释掉了），我最终找到了 this SO thread，这最终引导我找到了解决方案。

以下是我修改的最终结果，我在尝试中留下了注释代码，因此您会看到我尝试过的其他方法。除此之外，我在视图中所做的所有更改都是为 modal wait screen 添加一个引用，然后将 Html.ActionLink 更改为一个按钮。 <input id="btnCustomers" type="button" value="Manage Assets" />

<script type="text/javascript">
    $(function () {
        $.ajaxSetup({cache : false})
        $('#btnCustomers').click(function () {
            //$('#contentFrame').mask("waiting ...");
            waitingDialog.show("Please wait while we prepare your inventory ...");
            $('#contentFrame').load('@Url.Action("MasterDetail","Assets")', function () {
                setTimeout(function () {
                    waitingDialog.hide();
                }, 1000);
            });

            //$.ajax({
            //    type: 'GET',
            //    url: '@Url.Content("~/Assets/MasterDetail")',
            //    data: -1,
            //    success: function (data) {
            //       $('#contentFrame').innerHtml = waitingDialog.hide();
                    //$('#contentFrame').load('@Url.Action("MasterDetail","Assets")');
            //    }
            //})
            //$('#contentFrame').load(this.href, function (response, status, xhr) {
            //    $('#contentFrame').unmask("waiting ...");
            //});
            return false;
        });

    });
</script>

部分视图未在内部呈现 div

Partial View Not Rendering inside div

asp.net-mvc

asp.net-mvc-partialview

asp.net-mvc-5