如何使用jquery ajax在ASp.net MVC4中創建級聯文本框

Question

伙計們，我堅持要創建兩個級聯文本框。例如：第一個文本框是“任務”，其他是“項目”，我想自動完成第一個文本框和特定於第二個文本框中加載的項目，這些項目與第一個文本框tasaks有關... i分別填充兩者..這是我的自動完成任務和自動完成項目的代碼...

function AutoCompleteTasks() {
    $("#txtTasks").autocomplete({
        source: function (request, response) {
            //debugger;
            $.ajax({
                url: "/Home/AutoCompleteTasks",
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.Name, value: item.Name };
                    }))
                }
            })
        },
    });
}

對於項目是

function AutoCompleteProjects() {
    $("#txtproject").autocomplete({
        source: function (request, response) {
            //debugger;
            $.ajax({
                url: "/Home/AutoCompleteProjects",
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.Name, value: item.Name };
                    }))
                }
            })
        },
    });
}

我的Json結果代碼是

public JsonResult AutoCompleteTasks(string term)
{
    var result = (from t in context.Tasks
                  where t.Name.Contains(term)
                  select new { t.Name });
    return Json(result, JsonRequestBehavior.AllowGet);
}

對於項目是

//load projects on autocomplete
public JsonResult AutoCompleteProjects(string term)
{
    var query = (from p in context.Projects
                 where p.Name.Contains(term)
                 select new { p.Name }).Distinct();
    return Json(query, JsonRequestBehavior.AllowGet);
}

任何幫助將不勝感激..

Answer 1

這是mvc4begginer撰寫的關於級聯文本框的非常不錯的文章 。 請檢查一下。

希望這可以幫助。