2016-08-10 4 views
1

私はMVC Razerビューのページテーブルのカスケードドロップダウンフィルタを作成しようとしています。私はAJAXとjQuery経由で2番目のドロップダウンを設定しようとしているので、ユーザーにシームレスな方法でカスケード作業をしたいと思います。ここでMVC 5でAJAX/jQueryポピュレートされたカスケードドロップダウンを使用しました。

public ActionResult IndexByPartyToken(string id) 
{ 
    var t_Group = db.T_Group.Where(g => string.IsNullOrEmpty(id) || 
             g.T_Party.Contains(db.T_Party.Where(p => p.PartyToken == id).FirstOrDefault())) 
          .Select(g => new { ID = g.GroupId, GroupText = g.GroupText }); 

    return Json(t_Group, JsonRequestBehavior.AllowGet); 
} 

である私の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)); 
} 
ここ

私はドロップダウンのためのデータを取得するために使用しているアクションがあるの移入に使用されています

@model IEnumerable<EasyKnowMVC.Models.T_Thread> 

@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_LayoutMaster.cshtml"; 
} 
@using X.PagedList.Mvc; 
@using X.PagedList; 

<h2>Index</h2> 

<p> 
    @Html.ActionLink("Create New", "Create") 
</p> 

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "searchThread" })) 
{ 
    <p> 
     Seach By Thread Title : @Html.TextBox("threadTitle") 
     Party : @Html.DropDownList("partyToken", (SelectList)ViewBag.Parties, "All", new { id = "ddlPartySearch" }) 
     Group : @Html.DropDownList("groupId", (SelectList)ViewBag.Parties, "All", new { id = "ddlGroupSearch" }) 
     <input type="submit" value="Search" /> 
    </p> 
} 

<table class="grid"> 
    <tr class="head"> 
     <th> 
      @Html.ActionLink(@Html.DisplayNameFor(model => model.ThreadText).ToString(), "Index", new { sortOrder = ViewBag.ThreadTitleSortParam }) 
     </th> 
     <th> 
      @Html.ActionLink(@Html.DisplayNameFor(model => model.ThreadImportance).ToString(), "Index", new { sortOrder = ViewBag.ImportanceSortParam }) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.IsActive) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.IsLocked) 
     </th> 
     <th> 
      @Html.ActionLink(@Html.DisplayNameFor(model => model.ExternalToken).ToString(), "Index", new { sortOrder = ViewBag.ExternalTokenSortParam }) 
     </th> 
     <th> 
      @Html.ActionLink(@Html.DisplayNameFor(model => model.T_Group.GroupText).ToString(), "Index", new { sortOrder = ViewBag.GroupNameSortParam }) 
     </th> 
     <th> 
      @Html.ActionLink(@Html.DisplayNameFor(model => model.T_Party.PartyName).ToString(), "Index", new { sortOrder = ViewBag.PartyNameSortParam }) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.T_User.PartyToken) 
     </th> 
     <th></th> 
    </tr> 

    @foreach (var item in Model) 
    { 
     <tr> 
      <td> 
       @Html.DisplayFor(modelItem => item.ThreadText) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.ThreadImportance) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.IsActive) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.IsLocked) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.ExternalToken) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.T_Group.GroupText) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.T_Party.PartyName) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.T_User.PartyToken) 
      </td> 
      <td> 
       @Html.ActionLink("Edit", "Edit", new { id = item.ThreadId }) | 
       @Html.ActionLink("Details", "Details", new { id = item.ThreadId }) | 
       @Html.ActionLink("Delete", "Delete", new { id = item.ThreadId }) | 
       @Html.RouteLink("Posts", new { controller = "Posting", action = "Index", Id = item.ThreadId }) 
      </td> 
     </tr> 
    } 
</table> 

<div> 
    @Html.PagedListPager((IPagedList)Model, page => Url.Action("Index", new { page })) 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $("#ddlPartySearch").change(function() { 
      $.ajax({ 
       cache: false, 
       type: "GET", 
       url: "GroupMaintenance/IndexByPartyToken", 
       data: { "id": $(this).val() }, 
       success: function (data) { 
        var ddlGroupSearch = $("ddlGroupSearch"); 

        ddlGroupSearch.empty(); 

        ddlGroupSearch.append(new Option("All", "")); 

        $.each(data, function (id, option) { 
         ddlGroupSearch.append(new Option(option.GroupText, option.ID)); 
        }); 

        ddlGroupSearch.trigger("chosen:updated"); 
       }, 
       error: function (xhr, ajaxOptions, thrownError) { 
        alert('Failed to retrieve groups.'); 
       } 
      }); 
     }); 
    }); 
</script> 

私は、AJAX呼び出しからデータを取得していますが、dに配置されていません。 ropdown。誰がなぜこれが事実だろうと知っていますか?

+1

var ddlGroupSearch = $("#ddlGroupSearch"); 

されている必要があります。 'var ddlGroupSearch = $("#ddlGroupSearch ");'に変更してください。 '#'に注意してください。 – Ozan

+0

ああ、どうしたらそれを見逃しましたか? Derp ....その今働いている。多くのありがとう – Wizardskills

+0

私はViewbagを避け、むしろViewModelを使用します。それ以外の場合、MVCを使用するポイントは何ですか? Webフォームだけを使用することもできます。 –

答えて

0

、私のセレクタはドロップダウンに間違っていました。

それはあなたの選択が間違っている代わりに

var ddlGroupSearch = $("ddlGroupSearch"); 
0

私は問題があなたの中にあると仮定します。

success: function (data) { 

これは、JavaScriptの関数であり、選択して、あなたが行うことができますリストにオプションを追加する:最初のコメントを1として

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