Question

我有Partial View，DropDownList。我有Main View，menu，我可以称之为Partial View。我想在filtering中使用参数来Partial View。为此，我需要将选定的value ddl放到@Ajax.ActionLink。我正在尝试使用js，但页面只是在不调用Partial View的情况下重新加载。

主视图中的ActionLink：

@Ajax.ActionLink(
"Parts",
"PartsPartial",
new
{
    categorie = "add"
},
new AjaxOptions
{
    HttpMethod = "GET",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "content"
}, new { @class = "button" }
)

表单方法进入部分视图以进行过滤：

<form method="get">
    <div>
        <label>Category: </label>
        @Html.DropDownList("categorie", Model.Categories as SelectList,
        htmlAttributes: new { @class="form-control"})

        <label>Brand: </label>
        @Html.DropDownList("brand", Model.Brands as SelectList,
        htmlAttributes: new { @class="form-control" })
        <input type="submit" name="add" value="Filter" />

    </div>
</form>

我的控制员：

public ActionResult PartsPartial(string categorie, int? brand)
    {
        string str = "add";
        List<bs_categories> categoriesList = _db.bs_categories.ToList();
        List<bs_brands> brandsList = _db.bs_brands.ToList();

        if (categorie == str)
        {
            IQueryable<bs_parts> prts = _db.bs_parts;

            PartsViewModel pViewModel = new PartsViewModel
            {
                Parts = prts.ToList(),
                Categories = new SelectList(categoriesList, "categories_id", "categories_name"),
                Brands = new SelectList(brandsList, "brands_id", "brands_name")
            };
            return PartialView(pViewModel);
        }

        decimal categoryId = Convert.ToDecimal(categorie);

        var parts = _db.bs_parts.Where(x => x.parts_category_id == categoryId).OrderBy(x => x.parts_id);

        PartsViewModel pvm = new PartsViewModel
        {
            Parts = parts.ToList(),
            Categories = new SelectList(categoriesList, "categories_id", "categories_name"),
            Brands = new SelectList(brandsList, "brands_id", "brands_name")
        };
        return PartialView(pvm);
    }

这里有js来替换：

<script>
    $(function () {
        $('#add').click(function () {
            var type = $('#categorie').val();

            $.ajax({
                url: this.href,
                type: 'GET',
                data: { type: type },
                cache: false,
                success: function (result) {
                    $('#content').prepend(result);
                }
            });
            return false;
        });
    });
</script>

可能是我错过了什么？

Answer 1

您需要将输入类型更改为button：

<form method="get">
    <div>
        <label>Category: </label>
        @Html.DropDownList("categorie", Model.Categories as SelectList,
        htmlAttributes: new { @class="form-control"})

        <label>Brand: </label>
        @Html.DropDownList("brand", Model.Brands as SelectList,
        htmlAttributes: new { @class="form-control" })
        <input type="button" id="add" name="add" value="Filter" />

    </div>
</form>

当您输入类型submit时，您的ajax代码将永远不会被调用

将DropDownList的值放到@ Ajax.ActionLink中

1 个答案: