使用MVC 5的AJAX / jQuery填充级联下拉列表

时间:2016-08-10 12:33:42

标签: jquery ajax asp.net-mvc-5

我试图在我的MVC Razer视图中为分页表创建级联下拉过滤器。我希望以无缝方式让用户级联工作,以便我尝试通过AJAX和jQuery填充第二个下拉列表。

这是我的控制器用于填充表格

的操作
1:2:3:foo<br />1:2:3:whatever

以下是我用来获取下拉列表数据的操作:

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <item a="1" b="2" c="3" d="whatever"/>
</root>

这是我的Razer视图

public ActionResult Index(int? page, string sortOrder, string partyToken, Guid? groupId, string threadTitle)
{
    var parties = db.T_Party.Select(p => new { p.PartyToken, p.PartyName });
    var groups = db.T_Group.Where(g => string.IsNullOrEmpty(partyToken) ||
                                       g.T_Party.Contains(db.T_Party.Where(p => p.PartyToken == partyToken).FirstOrDefault()))
                           .Select(g => new { g.GroupId, g.GroupText });

    ViewBag.Parties = new SelectList(parties.AsEnumerable(), "PartyToken", "PartyName",partyToken);
    ViewBag.Groups = new SelectList(groups.AsEnumerable(), "GroupId", "GroupText", groupId);
    ViewBag.ThreadTitleSortParam = "ThreadTitle";
    ViewBag.ImportanceSortParam = "Importance";
    ViewBag.ExternalTokenSortParam = "ExternalToken";
    ViewBag.GroupNameSortParam = "GroupName";
    ViewBag.PartyNameSortParam = "PartyName";

    var t_Thread = db.T_Thread.Include(t => t.T_Group).Include(t => t.T_Party).Include(t => t.T_User);

    if (!string.IsNullOrEmpty(partyToken))
    {
        t_Thread = t_Thread.Where(t => t.PartyToken == partyToken);
    }

    if (!string.IsNullOrEmpty(threadTitle))
    {
        t_Thread = t_Thread.Where(t => t.ThreadText.Contains(threadTitle));
    }

    switch (sortOrder)
    {
        case ("ThreadTitle_desc"):
            t_Thread = t_Thread.OrderByDescending(t => t.ThreadText);

            break;
        case ("Importance"):
            t_Thread = t_Thread.OrderBy(t => t.ThreadImportance);
            ViewBag.ImportanceSortParam = "Importance_desc";

            break;
        case ("Importance_desc"):
            t_Thread = t_Thread.OrderByDescending(t => t.ThreadImportance);

            break;
        case ("ExternalToken"):
            t_Thread = t_Thread.OrderBy(t => t.ExternalToken);
            ViewBag.ExternalTokenSortParam = "ExternalToken_desc";

            break;
        case ("ExternalToken_desc"):
            t_Thread = t_Thread.OrderByDescending(t => t.ExternalToken);

            break;
        case ("GroupName"):
            t_Thread = t_Thread.OrderBy(t => t.T_Group.GroupText);
            ViewBag.GroupNameSortParam = "GroupName_desc";

            break;
        case ("GroupName_desc"):
            t_Thread = t_Thread.OrderByDescending(t => t.T_Group.GroupText);

            break;
        case ("PartyName"):
            t_Thread = t_Thread.OrderBy(t => t.T_Group.T_Party.FirstOrDefault().PartyName);
            ViewBag.PartyNameSortParam = "PartyName_desc";

            break;
        case ("PartyName_desc"):
            t_Thread = t_Thread.OrderByDescending(t => t.T_Group.T_Party.FirstOrDefault().PartyName);

            break;
        default:
            t_Thread = t_Thread.OrderBy(t => t.ThreadText);
            ViewBag.ThreadTitleSortParam = "ThreadTitle_desc";

            break;
    }

    int pageToRender = page ?? 1;

    return View(t_Thread.ToPagedList(pageToRender, 20));
}

我的问题是我从AJAX调用中获取数据,但它没有被放入下拉列表中。有谁知道为什么会这样?

2 个答案:

答案 0 :(得分:0)

我认为问题出在你的:

success: function (data) {

这是一个javaScript函数,可以选择并添加选项到列表中:

        var ddlGroupSearch = $("#ddlGroupSearch");
        ddlGroupSearch.empty();

        ddlGroupSearch.append($('<option>', {text: 'All', value: ''}));

        //$.each(data, function (id, option) {
            //ddlGroupSearch.append(new Option(option.GroupText, option.ID));
            ddlGroupSearch.append($('<option>', {text: 'option.GroupText', value: 'option.ID'}));
        //});

        ddlGroupSearch.trigger("chosen:updated");

答案 1 :(得分:0)

根据第一条评论,我的选择器在我的下拉列表中是错误的。

应该是

var ddlGroupSearch = $("#ddlGroupSearch");

而不是

var ddlGroupSearch = $("ddlGroupSearch");