Опубликовать в действии, которое возвращает частичное представление на исходной странице: MVC

Я работаю над одностраничным веб-приложением. На странице есть выпадающий список. Когда элемент выбран, я использую 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>
Источник

2 ответа

Решение

Рассмотрите возможность загрузки только данных вместо HTML для частичного просмотра.

Использование Ajax-запросов с MVC действительно полезно, и вы не ограничены частичными представлениями. Вы также можете вернуть данные 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>
Источник

Да, это. Вы должны использовать 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" />
  }
Источник
Другие вопросы по тегам