2

ユーザーが選択できる一連の質問があり、それらの質問のいくつかには、選択できるオプションの2番目のリストがあります。私の目標はドロップダウンリストを作成することです。SecondaryChoiceListに項目があるオプションの1つを選択すると、最初のドロップダウンの下に2番目のリストが表示され、送信時にこれらすべてが強く入力されてモデルにバインドされます。

次のように言うと、最初のリストが表示されます。

@Html.DropDownListFor( x => x.SelectedChoiceId, new SelectList(Model.Choices, "Id", "Name"))

しかし、それは二次リストへのフックを持っておらず、フォームを送信したときに返されるモデルにその二次リストをどのように結び付けるかについて完全に迷っています。

これが私のビューモデルです：

public class ExampleViewModel
{
    public List<Choice> ChoiceList { get; set; }
    public int SelectedChoiceId { get; set; }
    public int SelectedAffiliateId { get; set; }
}

選択肢は次のようになります。

public class Choice
{
    public int Id { get; set; }
    public string Name { get; set; }
    public IEnumerable<SecondaryChoice> SecondaryChoiceList { get; set; }

    public Choice()
    {
        SecondaryChoiceList = new List<SecondaryChoice>();
    }
}

そして、これが私のSecondaryChoiceオブジェクトです：

public class EligibleAffiliate
{
    public int Id { get; set; }
    public int EligibilityChoiceId { get; set; }
    public string Name { get; set; }
}

私が片付けることができる何かがあれば私に知らせてください。

4

1 に答える 1

5

私はそれをできるだけ単純に保つように努めました。

したがって、サンプルモデルを以下に示します。

namespace StackOverflow.Models
{
    public class Choice
    {
        public int Id { get; set; }
        public string Name { get; set; }

        public Choice()
        {
            Id = 0;
        }

        public Choice(int id, string name)
        {
            Id = id;
            Name = name;
        }
    }
}


namespace StackOverflow.Models
{
    public class ExampleViewModel
    {
        public List<Choice> PrimaryChoiceList { get; set; }
        public List<Choice> SecondaryChoiceList { get; set; }
        public int SelectedChoiceId { get; set; }
        public int SelectedAffiliateId { get; set; }

        public ExampleViewModel()
        {
            SelectedChoiceId = 0;
            SelectedAffiliateId = 0;

            PrimaryChoiceList = new List<Choice>()
            {
                new Choice(1, "How are you?"),
                new Choice(2, "How is the weahter?"),
                new Choice(3, "What have you been doing so far?"),
                new Choice(4, "What's up man?"),
                new Choice(5, "Any news?"),
                new Choice(5, "Bla bla bla")
            };

            SecondaryChoiceList = new List<Choice>()
            {
                new Choice(1, "How are you dear?"),
                new Choice(2, "How is the weahter?"),
                new Choice(3, "What have you been doing so far dear?"),
                new Choice(4, "What's up man?"),
                new Choice(5, "Any romantic news?")
            };
        }
    }
}

サンプルコントローラー：

namespace StackOverFlow.Controllers
{
    public class SOController : Controller
    {
        public static ExampleViewModel evm = new ExampleViewModel();

        public ActionResult Index()
        {
            return View(evm);
        }

        public ActionResult SetSelection(int id)
        {
            evm.SelectedChoiceId = id;

            if (evm.PrimaryChoiceList.Count() > 0)
            {
                Choice selection = evm.PrimaryChoiceList.ElementAt(id-1);
                Choice affiliate = (Choice)evm.SecondaryChoiceList.FirstOrDefault(x => x.Name == selection.Name);
                if (affiliate != null)
                {
                    return Content("show");
                }
                else
                {
                    return Content("hide");
                }
            }
            else
            {
                return Content("hide");
            }
        }
    }
}

そしてウェブページ：

@using StackOverflow2.Models;
@model ExampleViewModel

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>

@{
    ViewBag.Title = "Stackoverflow Sample";
}

<h2>Index</h2>

<script type="text/javascript">

    // Get the selection and make Ajax Request to the controller, action: SetSelection,
    // which in turn may decide whetger you must show or hide the control
    function updateSeconadryQuestion(id) {
        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                if (xmlhttp.responseText == 'show')
                    $('#SecondaryQuestionDropBoxId').show();
                else
                    $('#SecondaryQuestionDropBoxId').hide();
            }
        }
        xmlhttp.open("GET", "/SO/SetSelection?id=" + id, true);
        xmlhttp.send();
    }

</script>

@Html.DropDownListFor(x => x.SelectedChoiceId, new SelectList(Model.PrimaryChoiceList, "Id", "Name", "Value"), new { id = "PrimaryQuestionDropBoxId", onchange = "updateSeconadryQuestion(value);" })

<div id="SeconadryQuestionDivId">
@Html.DropDownListFor(x => x.SelectedAffiliateId, new SelectList(Model.SecondaryChoiceList, "Id", "Name"), new { id = "SecondaryQuestionDropBoxId" })
</div>
于 2012-11-16T15:07:33.377 に答える