发布到在原始页面中返回部分视图的操作：MVC答案

【问题标题】：Post to an action which returns a partial view in the original page : MVC发布到在原始页面中返回部分视图的操作：MVC
【发布时间】：2014-05-30 18:59:21
【问题描述】：

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

【问题讨论】：

这是错误的$("#SamplingEventDetails").html(data) 这个元素将带有部分，目前它不在页面上
制作一个容器 div 并在其中加载 html
您想将部分转换为字符串然后返回它（我通常返回 JSON 并将字符串放在一个名为“html”的属性下）。这篇文章应该可以帮助你convert-partialview-to-html
似乎这些示例中的部分视图取决于我没有的模型。我只是通过 ViewBag 发送一个字符串。
另外，假设我只想让脚本将值传递给操作方法，然后让操作方法从那里接管。那可能吗？

标签： jquery asp.net-mvc partial-views actionmethod

【解决方案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>

【讨论】：

这不是我已经在做的，减去尝试在主视图 div 中使用 HTML 帮助器方法 RenderPartial 吗？
您的第一个 div 将是我原始帖子中的“SampleListDiv”。你的第二个 div 我已经在我的部分视图中了。第三部分是我剧本的最后一部分。我认为我没有得到的部分是如何通过脚本调用从操作方法返回数据。
默认情况下您的部分中有数据并且需要在页面加载时呈现它吗？此外，由于 SamplingEventDetailsDiv 是您的目标，因此您可能会在每次调用时将部分嵌套在其自身中。由于 ajax 调用中“数据”的值是 HTML 标记，而不是实际的字符串值。
否，默认没有数据。现在就像您的回复一样 - “@ViewBag.Selected”是唯一的内容。
如果我说出我最终想要做的事情，也许会有所帮助。最终，我将使用脚本发布的值来执行另一个查询，然后将这些结果传递给局部视图，并且应该更新主页中的局部视图。现在我只是传递选定的值，以确保我可以从操作方法获取数据并相应地更新部分视图。

【解决方案2】：

是的，是的。为此，您必须使用 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" />
  }

【讨论】：