0

我正在开发一个单页网络应用程序。该页面有一个下拉列表。当一个项目被选中时，我使用 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

是的。为此，您必须使用 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 回答
1

考虑只加载数据而不是加载部分视图的 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>
于 2014-05-30T19:45:08.287 回答