MVC 从 DropDownList 更改的视图中动态地将模型传递给部分视图答案

【问题标题】：MVC Dynamically pass Model to partialview from a view on DropDownList changeMVC 从 DropDownList 更改的视图中动态地将模型传递给部分视图
【发布时间】：2015-10-09 18:45:18
【问题描述】：

有点拗口，但我认为有两个下拉列表：

<div>
@Html.LabelFor(m => m.APlayerID)
@Html.DropDownListFor(m => m.APlayerID, Model.AbzPlayers, "Please select", new { id = "abz" })
</div>  

<div>
@Html.LabelFor(m => m.EPlayerID)
@Html.DropDownListFor(m => m.EPlayerID, Model.EdzPlayers, "Please select", new { id = "edz" })
</div>

在这些下我有一个局部的看法：

<div id="partialview" class="panel-body">
@Html.Partial("SingleResultsView", Model.SingleResults)
</div>

我想根据从下拉列表中选择的玩家更新此部分视图，最好是在更改时更新。

我已经查找了大量关于此的示例，但似乎找不到任何通过过滤的 Model.SingleResults.Where(x=>x.abzID == abz && x.edz == edz) 的内容。我的视图位于共享文件夹中，因此它没有控制器，在寻找解决方案时这总是一个问题，因为每个人似乎都给出了控制器/视图 url！

我能够使用类似这样的东西来显示部分视图，但它显然没有对 abz 和 edz（下拉列表中的值）做任何事情，因为我不确定如何传递模型：

$(function () {

    $('#abz').change(function () {
        var value = $(this).val();


        $.ajax({
            url: "@Url.Content("Shared/SingleResultsView")",
            type: 'GET',
        cache: false,
        success: function (value) {
            $("#partialview").html(value);
        }
    });     
    });
});

我们将不胜感激！

提前致谢

【问题讨论】：

标签： jquery asp.net-mvc razor partial-views html.dropdownlistfor

【解决方案1】：

你需要一个返回局部视图的action。局部视图不能自己做任何事情。

public ActionResult SingleResults(string abzID, string edz)
{
    // do something with the passed params
    return PartialView("SingleResultsView", model) // where model is an instance of what the view needs to render itself with
}

【讨论】：

【解决方案2】：

一般来说，您不想尝试直接加载局部视图。为什么？好吧，这不是 MVC 管道的工作方式。时期。相反，向您的控制器添加一个操作方法，该方法生成第一页（具有下拉菜单的页面）并具有控制器格式并将部分视图返回到您的 javascript。假设您有一个控制器，如下所示：

public class Players : IController
{
    //This is the method that loads the first page
    public ActionMethod Index()
    {
        return View();
    }

    //This method loads the partial html on change
    [HttpPost]
    public ActionMethod GetPartialView(int? abz)
    {
        var item =  items.SingleResults.Where(x=>x.abzID == abz && x.edz == edz)
        return View("partialViewName", item);
    }
}

上面的控制器使用 POST（我更喜欢，但你也可以使用 GET）向控制器提交请求以获取 html。然后，你像这样构造你的javascript（假设是jQuery，对吧？）：

$(document).ready(function () {

    $('#abz').change(function () {
        var value = $(this).val();
        $.ajax({
            url: "Players/GetPartialView",
            type: 'POST',
            data: { abz: $(this).val() }
            cache: false,
            success: function (value) {
                $("#partialview").html(value);
            }
        });     
    });
});

【讨论】：

【解决方案3】：

您可以为此使用控制器操作。无论您的视图位于何处，您都可以为部分视图结果调用控制器操作，例如：

$.ajax({
        url: "@Url.Action("yourAction", "yourController", new { someinput = someValue})",
        type: 'GET', //could also be post
    cache: false,
    success: function (value) {
        $("#partialview").html(value);
    });

您的控制器操作如下所示：

public ActionResult SomeAction(<yourType> someInput){
...  //Do something with input
return PartialView("Shared/SingleResultsView", <your model that SingleResultsView takes>)

}

您还可以将onchange 属性用于DropDownFor 助手：

@Html.DropDownListFor(m => m.APlayerID, Model.AbzPlayers, "Please select", new { id = "abz", onchange = "javascript: someFunction();" });

【讨论】：