4

テーブルを返す MVC Web アプリケーションがあります。選択した年にテーブルをフィルター処理するビュー ページにドロップダウン リストを追加したいと考えています。正しいアプローチは何ですか？

現在、JQuery を使用して入力しているドロップダウン リストを作成しています。ポストバックする onChange コマンドを作成しましたが、コントローラーでドロップダウン リストの選択された値を取得する方法がわかりません。

ここに私が持っているコード部分があります:

コントローラーで:

    public ActionResult Index()
    {
        int year = 2012;
        var vu_Estimates = dbBudget.vu_Estimates.OrderByDescending(o => o.Expense).ThenBy(o => o.CategoryGroupSortOrder).ThenBy(o => o.SortOrder).Where(o => o.Year == year).ToList();

        return View(vu_Estimates);
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Index(FormCollection formCollection)
    {
        int year = 2012;
        var vu_Estimates = dbBudget.vu_Estimates.OrderByDescending(o => o.Expense).ThenBy(o => o.CategoryGroupSortOrder).ThenBy(o => o.SortOrder).Where(o => o.Year == year).ToList();

        return View(vu_Estimates);
    }

ビューには、次のものがあります。

<script type="text/javascript">
    $(document).ready(function () {        
        $.post("/Estimate/PopulateYears/", { Year: $(this).val() }, function (data) {
            populateDropdown($("#ddlYears"), data);
        });
    });

    function populateDropdown(select, data) {
        select.html('');
        $.each(data, function (id, option) {
            select.append($('<option></option>').val(option.value).html(option.name));
        });
    }
</script>

<h2>Estimates List</h2>

<div>
    <% using (Html.BeginForm()) { %>
        <select id="ddlYears" onchange="this.form.submit();"></select> | <%: Html.ActionLink("Create New Year of Estimates", "CreateEstimates", "Estimate") %>
    <%} %>
</div>


<table>
    <tr>
        <th></th>
        <th>
            EstimateID
        </th>
        <th>
            CategoryID
        </th>
        <th>
            Year
        </th>
        <th>
            EstimateAmount
        </th>
        <th>
            CategoryName
        </th>
        <th>
            SortOrder
        </th>
        <th>
            CategoryGroupSortOrder
        </th>
        <th>
            Expense
        </th>
    </tr>

<% foreach (var item in Model) { %>
    <tr>
        <td>
            <%: Html.ActionLink("Edit", "Edit", new { id=item.EstimateID }) %> |
            <%: Html.ActionLink("Delete", "Delete", new { id=item.EstimateID })%>
        </td>
        <td>
            <%: item.EstimateID %>
        </td>
        <td>
            <%: item.CategoryID %>
        </td>
        <td>
            <%: item.Year %>
        </td>
        <td>
            <%: item.EstimateAmount %>
        </td>
        <td>
            <%: item.CategoryName %>
        </td>
        <td>
            <%: item.SortOrder %>
        </td>
        <td>
            <%: item.CategoryGroupSortOrder %>
        </td>
        <td>
            <%: item.Expense %>
        </td>
    </tr>
<% } %>

</table>

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

4

2 に答える 2

5

AJAXを使用してドロップダウンリストの値を投稿し、このリクエストを使用してページを更新するために必要なデータを返すことをお勧めします。それ以外の場合は、select要素の値が変更されるたびにページをリロードする必要があります。 

$('#idOfSelectElement').change( function() {
    $.ajax({
        type: "POST",
        url: '/Estimate/PopulateYears',
        data: { 
            valueOfDropDown: $(this).val()
        },
        /* Response is the data returned from controller method */
        success: function (response) {

           var value1 = response.value1;
           var value2 = response value2;

           //TODO : Use these values to update your page.

           return false;
        }
    });
});

コントローラでは、

/* Assuming the value of your dropdownlist is integer. If not use string */
public ActionResult PopulateYears(int valueOfDropDown)
{
    try
    {
      /* Get data using the value of dropdownlist */
      var vu_Estimates = getData(valueOfDropDown);

      return Json(new 
      { 
          success = true,
          value1 = vu_Estimates.value1,
          value2 = vu_Estimates.value1
      }, JsonRequestBehavior.AllowGet);
    }
    catch
    {
        return Json(new { success = false } );
    }
}
于 2012-08-08T22:57:05.050 に答える
3

まず、ドロップダウンに名前を付けます。

<div>
    <% using (Html.BeginForm()) { %>
        <select id="ddlYears" name="Years" onchange="this.form.submit();"></select> | <%: Html.ActionLink("Create New Year of Estimates", "CreateEstimates", "Estimate") %>
    <%} %>
</div>

次に、FormCollectionオブジェクトを使用して値を取得します。

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index(FormCollection formCollection)
{
    int year = Convert.ToInt32(formCollection["Years"]);
    var vu_Estimates = dbBudget.vu_Estimates.OrderByDescending(o => o.Expense).ThenBy(o => o.CategoryGroupSortOrder).ThenBy(o => o.SortOrder).Where(o => o.Year == year).ToList();

    return View(vu_Estimates);
}

そんな感じ。

于 2012-08-08T19:30:45.840 に答える