Question

我有这个页面，我从下拉列表中选择一个项目，ajax调用将所选参数传递给我的控制器中的新动作，如下所示：

function select(e) {
    var unit = $("#unitList").data("kendoDropDownList").value();
    var url = '@Url.Content("~/Reports/UnitRunReport/")';

    $.ajax({
        url: url,
        data: { selectedUnit: unit },
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            //
        },
        error: function () {
            // 
        }
    });
}

这是我的控制器：

public class ReportsController : BaseController
{
    public ReportsViewModel Model { get; set; }
    //
    // GET: /Reports/

    public ActionResult Index()
    {
        Model = new ReportsViewModel
                    {
                        Units = UnitClient.GetListOfUnits(true, "")
                    };

        return View(Model);
    }

    [HttpGet]
    public ActionResult UnitRunReport(string selectedUnit)
    {
        var unit = Convert.ToInt32(selectedUnit);
        Model = new ReportsViewModel
                    {
                        UnitRuns = RunClient.GetRunListForUnit(unit)
                    };

        return View(Model);
    }
}

我必须为两个动作（Index和UnitRunReport）分开视图。调试时，它会将正确的参数传递给UnitRunReport操作，并在return View(Model)语句中移动。有人可以解释为什么我没有从索引页面重定向到新的UnitRunReport视图吗？

Answer 1

你正在进行ajax通话。 ajax调用不会重定向页面。

改为重定向到get方法：

window.location = "@Url.Content("~/Reports/UnitRunReport")?selectedunit=" + $("#unitList").data("kendoDropDownList").value();

Answer 2

您没有被重定向，因为您正在使用ajax进行呼叫。根据定义，这意味着页面不会改变。 ajax调用的结果（在本例中是UnitRunReport方法返回的ActionResult）将返回到您为jQuery提供的成功委托的data参数中。

您可以通过传入成功委托来交换页面上的html（或在页面上的元素中调用结果）来解决这个问题。如果你有一个带有id dataElement的元素，那么在成功回调中使用它

success: function (data) {
        $("#dataElement").html(data);
    }

请注意，您将从控制器方法返回html。您可能希望返回一个json模型，并使用像knockout这样的库将其绑定到您的页面。

如果您想实际重定向到页面而不是像当前那样进行ajax调用，那么当用户更改下拉列表中的选择时，您需要设置window.location属性。这将导致整个页面重新加载并呈现UnitRunReport返回到新页面的视图。

Answer 3

首先，您正在制作ajax请求，该请求不会重定向页面，只是从操作中读取数据。

其次，您正在请求json结果，它将为您提供json数据。

Answer 4

看起来你正在尝试获取JSON数据而不是视图，这通常是HTML。因此，您的控制器应如下所示。

public class HomeController : Controller
{
    public ReportsViewModel Model { get; set; }
    //
    // GET: /Reports/

    public ActionResult Index()
    {
        Model = new ReportsViewModel
        {
            Units = UnitClient.GetListOfUnits(true, "")
        };

        return View(Model);
    }

    [HttpGet]
    public ActionResult UnitRunReport(string selectedUnit)
    {
        var unit = Convert.ToInt32(selectedUnit);
        Model = new ReportsViewModel
        {
            UnitRuns = RunClient.GetRunListForUnit(unit)
        };

        return this.Json(Model, JsonRequestBehavior.AllowGet);
    }
}

您可以通过执行console.log来测试javascript中返回的数据。另外，不要使用Url.Content尝试Url.Action，因为您的路线可能无法正确设置，而url.action将确保生成正确的路线。

function select(e) {
    var unit = $("#unitList").data("kendoDropDownList").value();
    var url = '@Url.Action("UnitRunReport", new { controller = "Home" })';
    $.ajax({
        url: url,
        data: { selectedUnit: unit },
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            console.log(data);
            // do something with the data coming back
        },
        error: function () {
            // show some sort of message
        }
    });
}

要查看控制台，只需按F12即可在您喜欢的浏览器中弹出工具（我仍然是一个萤火虫粉丝）。只需要小心将console.log部署到生产环境中，这些日子通常并不重要，因为人们拥有较新的浏览器，但你仍然可能会遇到一两个会漏掉并出现问题的浏览器。如果您想将代码保留在那里并将其投入生产，您可以启动一个脚本，将您的页面投入生产以覆盖console.log

<script type="text/javascript">
    console = {
        log: function (s) {
            // empty method to override console
        }
    };
</script>

将它放在您的site.master中并在开发过程中将其删除，您可以保留所有的console.logs，并且在投入生产时它们将停止显示。

Answer 5

因为你正在对action方法进行Ajax调用，所以视图将在data参数中返回：function (data)

它不会重定向浏览器。

为什么我的动作不返回视图？

5 个答案: