Question

只是想知道这是否可行。我想在asp.net MVC 4中制作商店Web应用程序。我的文章有一个类别和一个子类别。所以我得到了这个我无法工作的代码。

脚本：

    $("#ManageCategories").click(function (e) {
    $.ajax({
        type: "GET",
        url: "Acp/LoadManageCategories",
        success: function (response) {
            $("#main-acp-display").html(response);
        },
        error: function () {
            alert("Error!");
        }
    });
});

$(".get-subcategories").click(function () {
    $.ajax({
        type: "GET",
        url: "Acp/LoadManageSubCategories",
        data: { subCategoryId: $(this).attr("id") },
        contentType: "application/json; charset=utf-8",
        dataType: "html",
        success: function (response) {
            $("#subcategory-display").html(response);
        },
        error: function (response) {
            alert(response.responseText);
        }
    });
});

（第一部分就像魅力一样）

的Controler：

[CustomAuthorize(Roles.Admin)]
    public ActionResult LoadManageCategories()
    {
        IEnumerable<CategoryModel> model = _categoryManager.GetAll().Select(x => (CategoryModel)x);
        return PartialView("Partial/_LoadManageCategories", model);
    }

    [CustomAuthorize(Roles.Admin)]
    public ActionResult LoadManageSubCategories(string subCategoryId)
    {
        int id = Convert.ToInt32(subCategoryId);
        IEnumerable<SubCategoryModel> model = _categoryManager.GetAllSubCategoriesByCategoryId(id).Select(x => (SubCategoryModel)x);
        return PartialView("Partial/_LoadManageSubCategories", model);
    }

现在您看到第一级代码有效。当我点击索引上的div时，它会加载所有类别。但是除非我将可点击的div放在索引页面上，否则其他函数不会加载，我希望它成为第一个局部视图的一部分。

所以它应该是Button（点击）＆gt;显示所有类别（单击任何）＆gt;加载子类别。这甚至可能吗？

Offtopic：MVC只在一个级别上工作吗？因为我记得试图在其中有一个模型包含其他模型的列表，在这个列表中有另一个模型，它不是那么好的xD（管理找到更简单的解决方案，但这是我只有一级mvc的地方以为）

更新：所以@bigless有一个想法让它成为一个函数，所以到目前为止：

    function createSubcategories(id) {
    $.ajax({
        type: "GET",
        url: "Acp/LoadManageSubCategories",
        data: { subCategoryId: id },
        contentType: "application/json; charset=utf-8",
        dataType: "html",
        success: function (response) {
            $("#subcategory-display").html(response);
        },
        error: function (response) {
            alert(response.responseText);
        }
    });
};

通过以下方式调用它：

<button onclick="createSubcategories(1)"><i class="fas fa-angle-double-right main-cat-icon"></i></button>

当前错误： Uncaught ReferenceError: createSubcategories is not defined at HTMLButtonElement.onclick (Acp:89)

Answer 1

您无法将事件侦听器附加到尚不存在的DOM元素（.get-subcategories）。尝试$("#ManageCategories").click(function (e) { $.ajax({ type: "GET", url: "Acp/LoadManageCategories", success: function (response) { $("#main-acp-display").html(response).ready(function() { $(".get-subcategories").click(createSubcategories); }); }, error: function () { alert("Error!"); } }); }); function createSubcategories() { $.ajax({ type: "GET", url: "Acp/LoadManageSubCategories", data: { subCategoryId: $(this).attr("id") }, contentType: "application/json; charset=utf-8", dataType: "html", success: function (response) { $("#subcategory-display").html(response); }, error: function (response) { alert(response.responseText); } }); };或：

之类的内容

{{1}}

动态加载的局部视图动态加载另一部分

1 个答案: