Question

我正在使用ASP.NET MVC 5开发购买模块。在创建视图购买中，我使用PartialView加载详细信息购买。

详情购买包含：

带有浏览按钮的文本框，用于输入项目
输入数量的文本框
将项目添加到列表中的按钮（购买详细信息）

当我点击浏览按钮时，模态将显示分页项目列表（使用PagedList）。模态形式包含：

在模态标题中，有一个文本框和一个用于搜索项目名称的按钮
在模态正文中显示项目列表（部分加载）

如果我搜索了项目名称

，则会发生错误

“属性'$'的值为null或未定义，而不是Function 对象“

jQuery脚本默认已添加到〜/ Shared / _Layout.cshtml，在创建视图中，我添加了@Scripts.Render("~/bundles/jqueryval")

代码：查看创建购买（Create.cshtml）

@model SalesSupportSystem.ViewModels.PurchaseOrderViewModel
@using (Html.BeginForm()) 
{
    <div class="form-horizontal">
        <h4>PurchaseOrder</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.PurchaseOrderDate, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.PurchaseOrderDate)
                @Html.ValidationMessageFor(model => model.PurchaseOrderDate)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.InvoiceNo, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.InvoiceNo)
                @Html.ValidationMessageFor(model => model.InvoiceNo)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

@{ Html.RenderPartial("~/Views/PurchaseOrderDetail/_AddEdit.cshtml", Model.PurchaseOrderAddEditDetails); }

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script src="~/Scripts/bootstrap-datepicker.js"></script>
    <script>
        $(document).ready(function () {
            $(".date").datepicker({
                autoclose: true,
                clearBtn: true,
                format: "dd/mm/yyyy",
                todayBtn: "linked",
                todayHighlight: true
            });

            $("#btnLookupItem").click(function (e) {
                e.preventDefault();
                $.ajax({
                    type: "GET",
                    url: "@Url.Content("~/INVENTSUM1/Lookup")",
                    cache: false
                })
                .done(function (data) {
                    $("#itemContainer").html(data);
                    $("#itemModal").modal("show");
                });
            });

            $("#btnSubmitINVENTSUM1").click(function (e) {
                e.preventDefault();
                $.ajax({
                    type: "POST",
                    url: "@Url.Content("~/INVENTSUM1/Lookup")",
                    data: { filterValue: $("#FilterValue").val() },
                    cache: false
                })
                .done(function (data) {
                    $("#itemContainer").html(data);
                });
            });
        });

        function setINVENTSUM1(ITEMID, ITEMNAME) {
            document.getElementById("ItemID").value = ITEMID;
            document.getElementById("ItemName").value = ITEMNAME;
            $("#itemModal").modal("hide");
        }
    </script>
}

PartialView（_AddEdit.cshtml）

@model SalesSupportSystem.ViewModels.PurchaseOrderDetailAddEditViewModel

<!-- Item Modal -->
<div class="modal fade bs-example-modal-lg" id="itemModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" id="btnCancelCUSTTABLE" title="Clear the selected input on form" class="close" data-dismiss="modal" data-toggle="tooltip" data-placement="left"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Select Item</h4>
                @using (Html.BeginForm("Lookup", "INVENTSUM1"))
                {
                    <div class="form-inline">
                        Find by name: <input type="text" id="FilterValue" name="FilterValue" class="form-control" placeholder="Enter keyword" value="" />
                        <input type="submit" id="btnSubmitCUSTTABLE" value="Search" class="btn btn-primary" />
                    </div>
                }
            </div>
            <div class="modal-body" id="itemContainer">
                ...
            </div>
        </div>
    </div>
</div>

@using (Html.BeginForm("AddEdit", "PurchaseOrderDetail", FormMethod.Get, new { @class = "form-inline" }))
{
    <h4>Detail</h4>
    <hr />
    <fieldset>
        <div class="form-inline">
            <div class="form-group">
                @Html.HiddenFor(model => model.ItemID)
                <div class="input-group">
                    @Html.EditorFor(model => model.ItemName)
                    <div class="input-group-btn">
                        <button class="btn btn-primary" id="btnLookupItem">...</button>
                    </div>
                </div>
            </div>

            <div class="form-group">
                @Html.EditorFor(model => model.QuantityOrder)
            </div>

            <button class="btn btn-primary" id="btnAddItem">Add</button>
        </div>
    </fieldset>
}

控制器（INVENTSUM1Controller.cs）

public ActionResult Lookup(int? page)
{
    var pagedItem =  db.INVENTSUM1
                       .OrderBy(i => i.ITEMNAME)
                       .ToPagedList(page, 10);

    return PartialView("_Lookup", pagedItem);
}

[HttpPost]
public ActionResult Lookup(string filterValue)
{
    var pagedItem =  db.INVENTSUM1
                       .Where(i => i.ITEMNAME.Contains(filterValue))
                       .OrderBy(i => i.ITEMNAME)
                       .ToPagedList(1, 10);

    return PartialView("_Lookup", pagedItem);
}

PartialView（_Lookup.cshtml）

@model IEnumerable<SalesSupportSystem.Models.INVENTSUM1>
@using PagedList.Mvc;

@{
    var pagedList = (PagedList.IPagedList)Model;
}

<div>
    <table class="table table-striped table-hover table-condensed">
        <tr>
            <th></th>
            <th>
                @Html.DisplayNameFor(model => model.ITEMID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ITEMNAME)
            </th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td><a href="javascript:setINVENTSUM1('@item.ITEMID', '@item.ITEMNAME')" class="glyphicon glyphicon-ok-sign"></a></td>
                <td>@Html.DisplayFor(modelItem => item.ITEMID)</td>
                <td>@Html.DisplayFor(modelItem => item.ITEMNAME)</td>
            </tr>
        }
    </table>
</div>

Page @(pagedList.PageCount < pagedList.PageNumber ? 0 : pagedList.PageNumber) of @pagedList.PageCount
<div id="pager">
    @Html.PagedListPager(pagedList, page => Url.Action("Lookup", new { page }))
</div>

<script>
    $(document).ready(function () {
        $("#pager").on("click", "a", function () {
            if (this.href == "") {
                return;
            }
            $.ajax({
                type: "GET",
                url: this.href,
                cache: false
            })
            .done(function (data) {
                $("#itemContainer").html(data);
            });
            return false;
        });
    });
</script>

另一个问题：正如您在lookup.cshtml代码中看到的那样，我将脚本放在那里。我从SO文章中读到，它不应该放在partialview中，但是我别无选择，如果我放入Create.cshtml，分页将无效。有没有解决方法呢？

属性'$'的值为null或undefined，而不是Function对象

0 个答案: