使用JQuery將自定義集合對象從Controller傳遞到View

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

這里的“最佳實踐”是單一責任原則，即用於獲取應在下拉菜單中顯示的數據和呈現為部分視圖的相同數據的單獨操作。 基本上，您所需要的只是一種檢索模型的方法，一個將模型序列化並以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);
}

在客戶端，您必須更改URL才能將數據發布到GetWorkbooks操作方法，並且一切順利。

這種方法的優點是，填充下拉列表將不會執行除檢索工作簿列表之外的任何其他邏輯，並且在客戶端，您現在可以輕松利用任何綁定框架（例如KnockoutJS）或純JavaScript來呈現模型，即使您的html標記是將來從簡單的下拉菜單更改為更復雜的ui。