如何在 $.ajax 将参数发布到其 Action 后呈现 MVC 3 View答案

【问题标题】：How to render MVC 3 View after $.ajax post params to its Action如何在 $.ajax 将参数发布到其 Action 后呈现 MVC 3 View
【发布时间】：2014-03-18 03:02:15
【问题描述】：

我在这里问过How to send js variables to mvc controller 如何将 js 变量发送到 MVC 3 控制器操作，我明白了。但现在我遇到了另一个问题 - 我无法使用收到的参数渲染视图。

这是我的代码：

<head>
    <meta charset="utf-8">
    <link href="@Url.Content("~/Content/css/jquery.Jcrop.css")" type="text/css" rel="stylesheet">
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.Jcrop.js")"></script> 
    <title></title>


<script>
    function submitForm() {

        var coords = new Object();
        coords.x1 = 120;
        coords.y1 = 240;
        coords.x2 = 360;
        coords.y2 = 480;


        jQuery.ajax({
            type: "POST",
            url: "@Url.Action("CreateCover")",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ coordinates: coords }),
            success: function (data) {
                alert(data);
            },
            failure: function (errMsg) {
                alert(errMsg);
            }
        });
    }
    </script>
</head>
    <body>   
    <input type="button" value="Click" onclick="submitForm()" />
</body>



public ActionResult CreateCover(ImageCoordinates coordinates)
{
    ViewData.Model = coordinates;
    return View();
}

我在调试中成功接收了我的参数，但操作没有呈现我的视图，我仍然在我发送参数的那个页面上。我应该用什么来呈现我的下一页？

【问题讨论】：

不要使用 ajax，因为它不会返回完全呈现的页面。您在调用中使用 json 作为返回类型。将 dataType 更改为 'html' 并使用部分视图来设置 div 的内容。例如。成功：函数（数据）{ $('#targetdiv').html(data)}..
以rhamesconsulting.com/2012/09/14/…为例。
我不想将值返回到同一页面。我想从我的视图中接收控制器中的变量，处理它们，然后渲染其他视图
在这种情况下，您需要在第一次 ajax 成功时再执行一次 ajax，发布您收到的“数据”并获得 html 响应，按照 Steve 发布的方式呈现。
@CadmusX ，我了解您要做什么。如果您查看我发布的链接，它将准确地解释您的需求。

标签： jquery asp.net-mvc

【解决方案1】：

解决方案来了 -

说你的模型是 -

public class ImageCoordinates
{
    public int x1 { get; set; }
    public int x2 { get; set; }
    public int y1 { get; set; }
    public int y2 { get; set; }
}

然后是你的 JQuery POST -

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script>
    function submitForm() {

        var model = new Object();
        model.x1 = 120;
        model.y1 = 240;
        model.x2 = 360;
        model.y2 = 480;


        jQuery.ajax({
            type: "POST",
            url: "@Url.Action("CreateCover")",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ coordinates: model }),
            success: function (data) {
                window.location.href = data;
            },
            failure: function (errMsg) {
                alert(errMsg);
            }
        });
    }
</script>

<input type="button" value="Click" onclick="submitForm()" />

那么您的控制器操作将是 -

public ActionResult CreateCover(ImageCoordinates coordinates)
{
    return new JsonResult() { Data = "http://www.google.com", JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}

因此，基本上，您构建了希望将页面重定向到的 URL。然后将该 URL 作为 JsonResult 发送。在客户端，在 Success 函数中，您捕获返回的 URL 并使用 window.location.href 进行重定向。

【讨论】：