1

有没有办法在 DropDownList 更改事件上使用 AJAX 来动态修改页面上的部分视图？

我的主页有一个 DropDownList (DropDownListFor)和一个仅包含“项目”列表的部分视图。此部分视图中显示的项目取决于在 DropDownList 中选择的项目。DropDownList 项目与部分视图中的项目之间存在一对多的关系。因此，当用户更改 DropDownList 的值时，局部视图中的内容将动态更改以反映在 DropDownList 中选择的项目。

这是我的下拉列表：

<div data-role="fieldcontain">
    Choose Capsule:<br />
    @Html.DropDownListFor(x => x.CapsuleFK, new SelectList(Model.Capsules, "pk", "name", "pk"), new { id = "ddlCapsules" })
    <br />
</div>

这是我在同一页面上的部分视图声明：

<div data-role="fieldcontain">
    @Html.Partial("_FillerPartial", Model.Fillers)
</div>

我对 Ajax 不是很熟悉，但是看看其他示例，我的 Ajax 如下所示：

$(document).ready(function () {
    $('#ddlCapsules').change(function () {
        // make ajax call to modify the filler list partial view

        var selection = $('#ddlCapsules').val();
        var dataToSend = { cappk: selection };

        $.ajax({
            url: 'Process/GetFillersByCapsule',
            data: { cappk: dataToSend },
            success: function (data) {
                alert("server returned: " + data);
            }
        });
    });
});

最后，这是正在发生的事情的屏幕截图。通过更改“选择胶囊”下拉列表，我希望填充列表动态更新：

在此处输入图像描述

4

2 回答 2

2

您可以使用 ajax 将下拉列表作为部分视图从控制器加载。

控制器代码：

    [HttpGet]
    public virtual ActionResult GetFillersByCapsule(string cappk)
    {
        var model = //Method to get capsules by pk, this returns a ViewModel that is used to render the filtered list. 
        return PartialView("PartialViewName", model);
    }

主视图html：

<div id="filteredList">
</div >

局部视图

@model IEnumerable<MyCapsuleModel>
foreach (var x in Model)
{
     //Render the appropriate filtered list html.
}

您可以使用 ajax 加载过滤后的列表：

$('#ddlCapsules').change(function () {
    // make ajax call to modify the filler list partial view

    var selection = $('#ddlCapsules').val();
    var dataToSend = { cappk: selection };

    $.ajax({
        url: 'Process/GetFillersByCapsule',
        data: { cappk: dataToSend },
        success: function (data) {

            $("#filteredList").empty();
            $("#filteredList").html(data);
        }
    });
});

希望这可以帮助。

于 2013-03-05T00:33:52.053 回答
1

您本身无法更新部分，因为如果不重新加载页面，部分将永远不会再次呈现。一旦您收到 HTML，ASP 就完成了，此时您只能靠自己了。

当然，您可以做的是切换出特定 div 的内容或使用 JavaScript 的任何内容。你的例子特别尖叫淘汰赛，所以这就是我推荐使用的。

更改您的 HTML 以将数据绑定添加到包含的 div：

<div data-role="fieldcontain" data-bind="foreach: filler">
    <button data-bind="text: name"></button>
</div>

还有你的下拉列表：

@Html.DropDownListFor(x => x.CapsuleFK, new SelectList(Model.Capsules, "pk", "name", "pk"), new { id = "ddlCapsules", data_bind = "event: { change: updateFillers }" })

然后，一些 JavaScript：

var FillersViewModel = function () {
    var self = this;

    self.fillers = ko.observableArray([]);

    self.updateFillers = function () {
        var selection = $('#ddlCapsules').val();
        var dataToSend = { cappk: selection };

        $.ajax({
            url: 'Process/GetFillersByCapsule',
            data: { cappk: dataToSend },
            success: function (data) {
                self.fillers(data.fillers) // where `fillers` is an array
            }
        });
    }
}

var viewModel = new FillersViewModel();
ko.applyBindings(viewModel);

这是一个非常简单的示例，您需要做更多的工作才能使其在您的场景中完成您需要它做的所有事情，但总体思路是每次下拉列表更改时，Knockout 都会调用您的updateFillers方法，它将执行 AJAX 并将新数据放入fillers可观察数组中。Knockout 会自动跟踪对此数组的更改（因此是“可观察”部分），因此会自动触发对依赖它的页面的任何部分的更新。在这种情况下，这是包含按钮的 div。foreach绑定将为数组的每个成员重复内部的 HTML 。我在这里使用了一个简单的按钮元素来进行说明，但您将包含创建特定按钮（如界面）所需的完整 HTML。这text绑定将name在开始和结束标记之间放置 in 的内容。有关您拥有的所有绑定选项，请参阅：http ://knockoutjs.com/documentation/introduction.html 。

你可以用这个做更多的事情。您可以实现模板，而不是硬编码您的 HTML 以在foreach. 而且，您可以使用局部视图来控制此模板的 HTML。重要的部分是 Knockout 可以为您生成所有这些重复的 HTML，这就是我推荐使用它的原因。

希望这足以让你开始。

于 2013-03-04T22:01:33.250 回答