0

私は単一ページの Web アプリに取り組んでいます。このページにはドロップダウン リストがあります。アイテムが選択されると、jQuery を使用して、選択された値をアクション メソッドに送信します。アクション メソッドは [現時点では、テスト目的で] その値を ViewBag に追加し、PartialView を返します。明らかに、この部分的なビューを同じページに入れたいと思っています。したがって、ドロップダウンから値を選択すると、選択したオプションがその下に表示されます。これは可能ですか、それとも間違った方法でアプローチしていますか?

コンテキストに関連するコード:

目次（メインページ）

<html>
    @using SampleTracking.Models.ViewModels;
    @model SamplingEventsVM

    <head>
        <title>@ViewBag.Title</title>
        <script src="~/Scripts/jquery-2.1.1.js"></script>
        <script type="text/javascript" src="~/Scripts/CustomScripts.js"></script>

    </head>

    <body>
        <span id="SamplingEventDiv">
            @Html.DropDownListFor(model => model.SelectedSamplingEvent, Model.SamplingEvents, new { @id = "SamplingEventSelection" })
        </span>
        <div id="SampleListDiv">
            @{Html.RenderPartial("~/Views/Home/RetrieveSamples.cshtml");}
        </div>
    </body>
</html>

脚本

$(function (ready) {
    $("#SamplingEventSelection").change(
            function () {
                $.post(
                    "/Home/RetrieveSamples",
                    { selectedSamplingEvent: $("#SamplingEventSelection").val() },
                    function (data) {
                        $("#SamplingEventDetails").html(data)
                    }
                )
            }
        )
});

アクション メソッド スクリプトが投稿中

public ActionResult RetrieveSamples(string samplingEvent)
{
    ViewBag.Selected = samplingEvent;

    return PartialView();
}

部分図

<div id="SamplingEventDetails" style="margin-top:100px;">@ViewBag.Selected</div>
4

2 に答える 2

1

部分ビューの html ではなく、データのみをロードすることを検討してください。

MVC で Ajax リクエストを使用すると非常に便利で、部分ビューに限定されることもありません。ビューを返したくない場合は、JSON データを返すこともできます。

public ActionResult RetrieveSamples(string samplingEvent) {
    JsonResult result = new JsonResult();

    result.Data = samplingEvent;
    return result;
} // end function RetrieveSamples

次に、JSで：

function (data) {
    console.log("Json Data returned: " + data);
    $("#SamplingEventDetails").html(data);
}

編集：これが私が持っている実用的なソリューションです：

コントローラ： 

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
    //
    // GET: /Home/

        public ActionResult Index()
        {
            List<SelectListItem> items = new List<SelectListItem>();
            items.Add(new SelectListItem() { Text = "Option 1", Value = "1" });
            items.Add(new SelectListItem() { Text = "Option 2", Value = "2" });

            ViewBag.Options = items;
            return View("Index");
        }

        public ActionResult getDetail(string selectedSamplingEvent) {
            JsonResult result = new JsonResult();
            result.Data = selectedSamplingEvent;

            return result;
        }

    }
}

全体図 (Index.cshtml)

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@Html.DropDownList("Options")

<div class="dynamic-wrapper">
    @Html.Partial("Details")
</div>

<script type="text/javascript">

$(document).ready(function () {
    $("#Options").change(function (e) {
        $.post(
            "home/getDetail",
            { selectedSamplingEvent: $("#Options").val() },
            function (data) {
                $("#SamplingEventDetails").html(data);
            }

        );
    });
});
</script>

部分的なビュー:

<div id="SamplingEventDetails"><!-- Data will go here --></div>
于 2014-05-30T19:45:08.287 に答える
1

はい、そうです。そのためには Ajax を使用する必要があります。

Ajax.BeginFormヘルパーあり。ビューは次のようになります。

@using (Ajax.BeginForm(new AjaxOptions() { LoadingElementId="loadingPanel", UpdateTargetId = "info", InsertionMode = InsertionMode.InsertBefore, Url = Url.Action("AjaxTest")}))
  {
    @Html.DropDownList("dropDown1", new SelectList(new[] { "One", "Two", "Three"}));    
    <br /><br />
    <input type="submit" value="Send" />
  }
于 2014-05-30T19:33:43.350 に答える