下拉选项更改时更新表

Question

我有一个表的一部分，其值取决于下拉列表中的值。当下拉列表的选定选项发生更改时，如何更新表格。

网格

@foreach (var choice in ViewData.Model.Options where choiceId == ViewData.Model.choiceLevelId)
                    {
                        <tr class='gridrow'>
                            <td>.....

下拉菜单

 <div class="editor-field">
                @Html.DropDownListFor(model => model.choiceLevelId,
                            (
                             ...

Answer 1

你说的是哪张桌子？ ASP.NET MVC 不了解桌子或椅子。它适用于模型、控制器和视图。

因此，您有一个视图，其中呈现了一个 框，并且您希望在用户更改此选择框的值时调用控制器操作，将新选择的值传递到服务器以便它可以执行一些处理。我说得对吗？

您必须在视图中使用 javascript 才能订阅此下拉列表的更改事件。然后您有几种可能性：

• 使​​用 AJAX 请求将所选值发送到服务器。
• 将当前浏览器（使用 window.location.href）重定向到控制器操作，并将所选值作为操作参数传递给它。

根据您的要求，您可以选择最适合您的技术。

让我用 jQuery 的示例来说明第一种方法：

<script type="text/javascript">
    $(function() {
        // subscribe to the .change event of the dropdowns
        $('select').change(function() {
            // fetch the newly selected value
            var selectedValue = $(this).val();
            // send it as an AJAX request to some controller action
            $.post('@Url.Action("Foo")', { value: selectedValue }, function(result) {
                // this will be invoked in the case of success of the AJAX call
                // TODO: do something with the results returned by the controller action
            });
        });
    });
</script>

以及将处理 AJAX 请求的控制器操作：

[HttpPost]
public ActionResult Foo(string value)
{
    // this action will be invoked when the user changes the selection
    // in one of the dropdown lists and passed the newly selected value.
    // So using this new value you could perform the desired processing
    // on your model here and return a view. Since this action was invoked
    // with an AJAX call you could return a JSON string to the client indicating
    // the success or failure of whatever processing you were intending to perform 
    // here

    ...

}

---

更新：

如果您想在选择更改时提交包含下拉列表的表单，您可以使用以下命令：

<script type="text/javascript">
    $(function() {
        // subscribe to the .change event of the dropdowns
        $('select').change(function() {
            // trigger the submission of the containing form:
            $(this).closest('form').submit();
        });
    });
</script>