AJAX 调用 MVC 中的 OnChange 事件答案

【问题标题】：AJAX call on OnChange event in MVCAJAX 调用 MVC 中的 OnChange 事件
【发布时间】：2016-04-29 04:08:18
【问题描述】：

我必须对作为视图一部分的下拉列表的 onchange 事件进行 AJAX 调用。在更改事件上，我需要调用数据库，进行一些计算以显示 UI，然后使用计算来填充图表控件。 UI 显示按此顺序排列。图表下拉类别列表带有评分的子类别列表因此，我需要在更改事件上显示 div3 中的类别评分，使用评分分数来填充图表。在 .NET 中轻松完成，但如何在 MVC 中完成？我能想到的唯一选择是创建带有代码的用户控件，但这违背了使用 MVC 的目的。任何帮助表示赞赏。

【问题讨论】：

标签： c# asp.net-mvc

【解决方案1】：

以下是您如何实现此功能的总体思路。

<script type="text/javascript">
    // assuming you're using jQuery
    $("#ddlAjax").change( function (event) {
        $.ajax({
            url: "Controller/GetPartialGraph/" + $(this).val(),
            data: { id = $(this).val() /* add other additional parameters */ },
            cache: false,
            type: "POST",
            dataType: "html",

            success: function (data, textStatus, XMLHttpRequest) {
                $("#divPartialView").html( data ); // HTML DOM replace
            }
        });
    });
</script>

<select id="ddlAjax">
    ... list of options
</select>


<div id="divPartialView">
    <!-- something like this in your ASP.NET View -->
    <%= Html.RenderPartial("MyPartialView", Model) %>
</div>

这是您的控制器操作方法。

[HttpPost]
public PartialViewResult GetPartialGraph(int id /* drop down value */)
{
    // do calculations whatever you need to do
    // instantiate Model object
    var model = myBusinessLogicService.DoCalculations(id);

    return PartialView("MyPartialView", model);
}

我认为这就是您正在寻找的答案。

【讨论】：

对我来说它有效，但我只需要更改："data: { id = $(this).val()}" 为 "data: { id: $(this).val( )" - 注意：“=”替换为“:”。谢谢。

【解决方案2】：

好的，如果您想要一种在下拉列表更改时调用 onchange 事件的方法，这可能会有所帮助：

@Html.DropDownListFor(
                        model => model.SelectedId,
                        new SelectList(ViewBag.Ids, "Id", "Name"),
                        "[All]",
                        new { onchange = "onChangeId();", @id ="municipalityDropDown" }
                        )

然后你可以拥有这个 javascript 代码和你的 ajax 代码。下面是一个调用动作方法的 jax 代码示例。

function onChangeId() {
      jQuery.ajax({
            url: '@Url.Action("Action Method Name", "Controller Name")',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ data: data2 }),
            success: function (result) { }
        });  
    }

【讨论】：

您似乎没有阅读该问题。他不是在问如何触发代码 onchange 或发送 ajax 请求。

【解决方案3】：

考虑使用局部视图。如果你谷歌 ASP.Net MVC Partial View 有很多链接，但这是我发现的一个 intestering

http://blog.stevensanderson.com/2008/10/14/partial-requests-in-aspnet-mvc/

【讨论】：

【解决方案4】：

我不确定我是否完全理解您想要做什么，但在 MVC 中，我可能会处理它的方式是将几个 AJAX 调用链接在一起。第一个根据选择更新类别评级。这可能会返回 JSON，以便您可以轻松提取评级分数。第二个获取第一个返回的评分分数并调用将图表呈现为 HTML 的操作 - 即，它呈现返回并插入到文档中适当位置的部分视图。

【讨论】：

【解决方案5】：

是的，没错——唯一的改变就是替换：

onchange = “this.form.submit();”

与：

onchange = “$(this.form).submit();”

在this 帖子中找到它

【讨论】：