javascript - 使用ajax mvc搜索数据时如何在查询字符串上保留id

Question

我正在使用 ajax 创建一个搜索页面。

场景是:在我们的购买系统中，用户从dropdownlist中选择类别，然后单击浏览按钮以显示包含产品列表的模式表单 基于所选类别。

问题是在显示模式后，然后用户填写搜索条件并单击“搜索”后，categoryID 为空。当我们使用ajax搜索数据时如何保留这个值？

下面的代码代表了我到目前为止所做的事情:

购买 View :

@using (Html.BeginForm("Create", "Invoice", FormMethod.Post, new { @enctype = "multipart/form-data" }))
{
    @Html.LabelFor(model => model.CategoryID, new { @class = "control-label col-md-2" })
    @Html.DropDownListFor(model => model.CategoryID, new SelectList(Model.Categories, "CategoryID", "Name"), "-- Please Select --", new { @class = "form-control" })
    @Html.ValidationMessageFor(model => model.CategoryID)

    @Html.LabelFor(model => model.ProductID, new { @class = "control-label col-md-2" })
    @Html.HiddenFor(model => model.ProductID)
    @Html.EditorFor(model => model.Product.Name, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
    <button class="btn btn-primary" id="btnLookupProduct" data-id="@Model.CategoryID" data-toggle="modal" data-target="#myModal">Lookup Product</button>
}

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Product List</h4>
                @using (Ajax.BeginForm("Search", "Product", 
                    new AjaxOptions
                    { 
                        HttpMethod = "POST",
                        InsertionMode = InsertionMode.Replace,
                        UpdateTargetId = "lookup-timekeeper-container" 
                    }))
                {
                    @Html.DropDownList("FilterField",
                        new List<SelectListItem>
                        { 
                            new SelectListItem { Text = "Code", Value = "Code" },
                            new SelectListItem { Text = "Name", Value = "Name" }
                        },
                        "-- Please Select --",
                        new { @class = "form-control" })

                    @Html.TextBox("FilterValue", null, new { @class = "form-control", @placeholder = "Enter keyword" })

                    <input type="submit" value="Search" class="btn btn-primary" />
                }
            </div>
            <div class="modal-body" id="lookup-timekeeper-container">
                // list of product
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnLookupProduct").click(function () {
                var url = '@Url.Content("~/Product/Search/")' + $("#CategoryID").val();
                $.get(url)
                    .done(function (data) {
                        if (!data.message) {
                            $("#lookup-timekeeper-container").html(data);
                            $("#myModal").modal(show = true, backdrop = true);
                        } else {
                            alert(data.message);
                        }
                    });
            });
        });
    </script>
}

采购 Controller :

public ActionResult Search(int? id, string filterField, string filterValue)
{
    var products = db.Products.Where(p => p.CategoryID == id);

    if (!string.IsNullOrEmpty(filterValue))
    {
        products = products.Where(filterField + ".Contains(@0)", filterValue);
    }

    return PartialView("_Lookup", products.ToList());
}

产品部分页面:

@model List<PurchaseSystem.Models.Product>

<div class="table-responsive">
    <table class="table table-striped table-hover table-condensed">
        <tr>
            <th>Code</th>
            <th>Name</th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.Code)</td>
                <td>@Html.DisplayFor(modelItem => item.Name)</td>
            </tr>
        }
    </table>
</div>

Answer 1

从 Drop Down 中获取值到 HiddenField

<input type="hidden" value="" name="hiddens" id="hiddens" />

$("#btnLookupProduct").click(function () {
    var DropValues = $("#DROPDOWNID").val();
    document.getElementById("hiddens").value = DropValues;
});

现在单击搜索将此隐藏字段值放入变量中以使用它