部分视图不在div内部渲染

时间:2017-08-06 21:30:58

标签: asp.net-mvc asp.net-mvc-5 asp.net-mvc-partialview

所以我试图关注this guidethe followup article.

但在开始搜索,排序和过滤之前,我想知道即使页面是否按预期工作。

不幸的是他们不是,我不能为我的生活弄明白为什么,我甚至到目前为止下载他的工作示例,只是为了看看它是否与我的浏览器有关。 (要在第二篇文章的顶部下载他的工作示例,我不能发布超过2个链接)

自从他的工作以来,我将他的观点,控制器和脚本并排比较,并且我可以告诉他们彼此镜像。

所以我最终将代码复制到其他地方并将其粘贴到我的项目中,更改了ActionLinks以反映我使用的命名约定,并省略了我尚未实现的内容(如上所述)。它仍然发送了工作。

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

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

我的管理视图 - 与其主页索引视图相关联 我真正改变的唯一事情就是行动链接

@{
    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视图 - 与其客户索引视图相关联 我的桌子设置不同,因为我还没有完成他所有的一切

@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));
        }

2 个答案:

答案 0 :(得分:0)

我不太确定你的问题是什么,但我想在那里我发现你的代码存在问题。

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需要一个动作名称,而不是剃刀视图名称。

答案 1 :(得分:0)

所以,昨晚我躺在床上时难以理解导致问题的原因我认为可能我应该只是寻找其他选择。我看到了一些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>