0

2 つのカスケード ドロップダウン リスト (親と子) を持つ MVC4 Web アプリケーションと、ドロップダウン リストで選択した値に応じてグリッドに表示されるデータをフィルタリングするためのポスト アクションを備えたボタンがあります。Microsoft AJAX (Ajax.BeginForm ヘルパー) で実現したカスケード ドロップダウンリスト。 -tutorial-part-3-cascading-using-microsoft-ajax-ajax-beginform-helper.aspx . ところで、ドロップダウンリストは部分ビューにあります。問題は、ボタンをクリックするとポストバックが実行され、カスケード ドロップダウンリストで選択された値が元の値にリセットされることです。つまり、「値を選択してください」です。この問題を解決する方法を知っている人はいますか？

答えてくれてありがとう！

カスケードドロップダウンリストを使用した部分ビューのコードは次のとおりです。

<script type="text/javascript">
$(function () {
    $('#Sections').change(function () {
        var sectionId = $("#Sections :selected").val();
        if (sectionId != "") {
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: '@Url.Action("GetDocumentTypesList", "DocumentTypes")',
                data: { "id": sectionId },
                dataType: "json",
                success: function (data) {
                    var items = "";
                    $.each(data, function (i, documentType) {
                        items += "<option value='" + documentType.Value + "'>" + documentType.Text + "</option>";
                    });
                    $('#Types').html(items);
                },
                error: function (result) {
                    alert('Service call failed: ' + result.status + ' Type :' + result.statusText);
                }
            });
        }
        else {
            var items = '<option value="">Select</option>';
            $('#Types').html(items);
        }
    });
});

@Html.DropDownList("Sections", new SelectList(ViewBag.Sections, "Id", "Name"), "親の種類を選択してください", new { id = "Sections" })
@Html.DropDownList("Types", new SelectList(ViewBag.Types, "Id", "Name"), "子の種類を選択してください", new { id = "Types" })

部分ビューのコントローラー コードは次のとおりです。

public class DocumentTypesController : Controller
{
    static List<DocumentType> documentTypes = DocumentsDAL.GetDocumentTypes(true, true, false);

    // GET: /DocumentTypes/
    public ActionResult Index()
    {
        var root = documentTypes.Where(d => d.ParentId == null).ToList();

        ViewBag.Sections = root;
        ViewBag.Types = new List<DocumentType> { new DocumentType { Id = -1, Name = "Select" } };

        return PartialView("~/Views/Shared/_DocumentTypes.cshtml", root);
    }

    // Get values for parent dropdownlist.
    [AcceptVerbs(HttpVerbs.Get)]
    public JsonResult GetDocumentTypesList(string id)
    {
        var items = GetDocumentTypes(Convert.ToInt32(id)).Select(a => new SelectListItem
        {
            Text = a.Name,
            Value = a.Id.ToString(CultureInfo.InvariantCulture)
        });

        return Json(items, JsonRequestBehavior.AllowGet);
    }

    // Get values for child dropdownlist.
    [AcceptVerbs(HttpVerbs.Get)]
    public JsonResult GetDocumentTypeData(string sectionId, string typeId)
    {
        var documentTypeData = GetDocumentTypes(Convert.ToInt32(sectionId))
            .First(d => d.Id == Convert.ToInt32(typeId));

        return Json(documentTypeData, JsonRequestBehavior.AllowGet);
    }

    private static IEnumerable<DocumentType> GetDocumentTypes(int id)
    {
        return documentTypes.First(d => d.Id == id).DocumentTypes;
    }
}

そして、これは部分的に使用される基本ビューです:

@using (Ajax.BeginForm("Index", null, new AjaxOptions
{
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "documentsGrid"
}, new { @class = "form-inline" }))
{
    <div>
        @{ Html.RenderAction("Index", "DocumentTypes", new { area = "" }); }
    </div>
    <p class="form-inline">
        @Html.LabelForModel(@Resources.LabelPeriodFrom)
        @Html.Raw("&nbsp;")
        @Html.TextBox("periodFrom", "", new { @class = "input-small" })
        @Html.Raw("&nbsp;")
        @Html.LabelForModel(@Resources.LabelPeriodTo)
        @Html.Raw("&nbsp;")
        @Html.TextBox("periodTo", "", new { @class = "input-small" })
        @Html.Raw("&nbsp;")
        <input type="submit" class="btn" value="Filter" />
    </p>
}

そして、ユーザーがボタンを押したときに起動する、アクション後のインデックスを使用した基本的なビューのコントローラー:

public class IssuerDocumentsController : Controller
{
    static readonly IEnumerable<IssuerDocument> Documents = DocumentsDAL.GetDocuments(1, 1).AsEnumerable();

    [HttpPost]
    public ActionResult Index(FormCollection collection)
    {
        var documents = Documents.AsEnumerable();

        // Check if document section filter is applied.
        if (!string.IsNullOrEmpty(collection.Get("Sections")))
        {
            var documentSectionId = Convert.ToInt32(collection.Get("Sections"));
            documents = documents.Where(d => d.SectionId == documentSectionId);
        }

        // Check if document type filter is applied.
        if (!string.IsNullOrEmpty(collection.Get("Types")))
        {
            var documentTypeId = Convert.ToInt32(collection.Get("Types"));
            documents = documents.Where(d => d.TypeId == documentTypeId);
        }

        return View(documents);
    }
 }
4

0 に答える 0