Question

我有一个源自IEnumerable的自定义对象。此集合非常复杂，因为它包含自身包含其他对象集合的对象。简而言之，它是一个多维数组。

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

我继承了这段代码，最初选择第一个下拉列表时，启用了第二个下拉列表，用户选择了一个项目。第二个下拉列表中填充了集合中的项目（集合本身被解析，只需获取项目的名称和ID号。）

现在，我想要将集合实际返回到视图并让我的视图循环显示集合的内容和所有好东西，而不是第二次下拉。

我的问题是如何将此集合对象从我的控制器传输到我的视图。

以下是控制器中的代码，它将根据下拉列表的值获取集合。

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);
    }

此代码将返回一个部分视图，其中集合作为模型。但是，当下拉列表中选择了值时，如何将其与现有的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
    });

我想让这个变得简单，所以如果有更好的方法来完成所有这些并重组控制器和/或jquery，我都是耳朵（眼睛）。

如果需要更多信息或有任何不明确之处，请告诉我。感谢

Answer 1

＆＃34;最佳实践＆＃34;这是单一责任原则，即用于获取应在下拉列表中显示的数据的单独操作以及呈现为部分视图的相同数据。基本上你只需要一个检索模型的方法，一个序列化模型并以JSON形式返回的动作，另一个返回局部视图。控制器：

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);
}

从客户端，您必须更改网址以将数据发布到GetWorkbooks操作方法，您就可以了。

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

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

1 个答案: