javascript - MVC调用 Controller 方法而不打开新页面？

Question

我的 Controller 类中有一个名为输出的方法。当我更改下拉列表中的选定项目时，我想向它发送一个参数，然后让它根据该参数运行特定的 SQL 查询，并让它返回结果。问题是，我不想在返回结果时打开新页面，我只想在警报中显示该查询的结果，而不是打开 URL 来运行该方法。这是我当前的javascript，该方法是一个名为output的ActionResult，并且有一个名为test的参数，它是一个字符串。

    <script src="../../Content/jquery.js"></script>
<script type="text/javascript">
    jQuery(function () {

        jQuery("#SelectedCentre").change(function () {
            var _this = jQuery(this);
            var selectedCentre = _this.val();
            window.location.href = "/Centres/output?test=" + selectedCentre;
        });
    });
</script>

Answer 1

您应该为此进行 ajax 调用:

jQuery(函数() {

    jQuery("#SelectedCentre").change(function () {
        var _this = jQuery(this);
        var selectedCentre = _this.val();
        jQuery.get("/Centres/output?test=" + selectedCentre, function(results){
         // do something with results here
        });
    });
});

编辑以回答评论中的问题:

在你的 Controller 中返回一个 json 类型的对象，如下所示:

 var data = new List<SelectListItem>
                           {
                               new SelectListItem
                                   {
                                       Text = "Test1",
                                       Value = "1"
                                   },
                                new SelectListItem
                                   {
                                       Text = "Test2",
                                       Value = "2"
                                   }
                           };
            return Json(data, JsonRequestBehavior.AllowGet);

并更新您的 jQuery 代码以处理 json 对象并创建选项:

$.getJSON("/Centres/output?test=" + selectedCentre, function (results) {
    $.each(results, function (i, item) {
        $("<option>", { text: item.Text, value: item.Value }).appendTo("#mySelect");
    });
});