c# - 使用 JQuery 将自定义集合对象从 Controller 传递到 View

Question

我有一个派生自 IEnumerable 的自定义对象。这个集合非常复杂，因为它包含的对象本身又包含其他对象的集合。简单来说，就是一个多维数组。

我的 View 上有一个下拉列表，其中填充了项目的服务器调用，当选择某个项目时，它会调用服务器来获取该项目的关联集合对象。

我继承了此代码，最初当选择第一个下拉菜单时，会启用第二个下拉菜单并且用户选择单个项目。第二个下拉菜单填充了集合中的项目(集合本身被解析以简单地获取项目的名称和 ID 号)。

现在，我不想再进行第二个下拉菜单，而是想将集合实际返回到 View ，并让我的 View 循环并显示集合的内容和所有这些好东西。

我的问题是如何将此集合对象从我的 Controller 传输到我的 View 。

这是 Controller 中的代码，它将根据下拉列表的值获取集合。

public ActionResult GetWorkbooks(string term, int projectId = -1)
    {
        if (this.SelectedProject != projectId)
        {
            try
            {
                WorkBookDataManager dataManager = new WorkBookDataManager();
                this.WorkbookColl = dataManager.GetWorkBooksById(null, projectId, null);
                this.SelectedProject = projectId;
            }
            catch (Exception exc)
            {
                log.Error("Could not load projects", exc);
            }
        }

        return this.View("_Workbook", this.WorkbookColl);
    }

此代码将返回以集合作为模型的部分 View 。 但是，当下拉菜单选择了一个值时，如何将其与现有的 JQuery 代码一起使用？

这是下拉代码:

// Populate the first drop down
var loadProjects = function (request, response) {
    $.ajax({
        url: $("#projects").attr("data-vs-autocomplete"),
        dataType: "json",
        type: "POST",
        data: { term: request.term }
    })
    .always(function (data, status) { getResponse(response, data, status); });
};

// If the first drop down has an item selected enable the second drop down
var projectSelected = function (event, ui) {
    var projectId = $("#projects").data(VS_AUTOCOMPLETE_VALUE);

    var enable = projectId ? false : true;
    /*$("#workbooks").prop('disabled', enable);

    $("#workbooks").val("");
    $("#workbooks").data(VS_AUTOCOMPLETE_VALUE, "");
    $("#workbooks").data(VS_AUTOCOMPLETE_TEXT, "");*/
    $("#workbook").html("<p>No workbook selected</p>");
};

// Function to get the second drop down items
// This is the function I think needs to be modified to accept the collection object from the server
var loadWorkbooks = function (request, response) {
    $.ajax({
        url: $("#workbooks").attr("data-vs-autocomplete"),
        dataType: "json",
        type: "POST",
        data:
            {
                term: request.term,
                projectId: $("#projects").data(VS_AUTOCOMPLETE_VALUE)
            }
    })
        .always(function (data, status) { getResponse(response, data, status); });
};

// Second drop down -> This needs to be removed
var workbookSelected = function (event, ui) {
    $("#workbooks").blur(); // this prevents the workbook dropdown from focusing.
    LoadWorkbook();
};


// These functions populated the drop downs with items
Autocomplete($("#projects"),
   { autoFocus: true,
       minLength: 0,
       source: loadProjects,
       select: projectSelected
   });

Autocomplete($("#workbooks"),
    { autoFocus: true,
        minLength: 0,
        source: loadWorkbooks,
        select: workbookSelected
    });

我想让这一切变得简单，所以如果有更好的方法来完成所有这些并重组 Controller 和/或 jquery，我会洗耳恭听。

如果需要更多信息或有任何不清楚的地方，请告诉我。 谢谢

Answer 1

这里的“最佳实践”是单一职责原则，即获取应在下拉列表中显示的数据和呈现为部分 View 的相同数据的单独操作。基本上，您需要的只是一种检索模型的方法，以及一个序列化模型并以 JSON 形式返回的操作，另一个操作返回部分 View 。 Controller :

private Workbook GetWorkbooksByProject(int projectId)
{
    WorkBookDataManager dataManager = new WorkBookDataManager();
    var workbookColl = dataManager.GetWorkBooksById(null, projectId, null);   
    return workbookColl;
}

public JsonResult GetWorkbooks(int projectId)
{
    var model = GetWorkbooksByProject(projectId);
    return Json(model, JsonRequestBehavior.AllowGet);
}

public ActionResult WorkbooksList(string term, int projectId = -1)
{
    if (this.SelectedProject != projectId)
    {
        try
        {
            this.WorkbookColl = GetWorkbooksByProject(projectId);
            this.SelectedProject = projectId;
        }
        catch (Exception exc)
        {
            log.Error("Could not load projects", exc);
        }
    }

    return this.View("_Workbook", this.WorkbookColl);
}

从客户端，您必须更改 URL 以将数据发布到 GetWorkbooks 操作方法，然后就可以开始了。

这种方法的优点是，除了检索工作簿列表之外，填充下拉列表不会执行任何其他逻辑，并且在客户端，您现在可以轻松地利用任何绑定(bind)框架(例如 KnockoutJS)或纯 JavaScript 来呈现您的模型，即使您的 html future 标记将从简单的下拉菜单更改为更复杂的用户界面。