重定向至具有$http post-service中的模型的MVC视图

Question

你好，我实际上是MVC的新手，遇到了一个问题。我试着到处找，但问题仍未解决。

我正在使用$http post向MVC action和view发送模型。数据通过操作和视图成功发送，但url没有重定向到目标视图——在我的情况下，我想在重定向的同时发送一个模型。（我可以在$http.success之后用windows.location.href="success"执行重定向，但我不能发送模型数据）

这是我的样品。（在这里，我提供用户名为"random"，密码为"randPassword"，并向成功视图发送示例数据（name）。

JS-

var config = {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
        }
    }

   var data = $.param({
        UserName: $scope.user.username,
        Password: $scope.user.password,
    });
    $http.post('Login', data, config).success(function (data, status, headers, config) {
    }).then(function () {
        console.log(data);
    });

C#动作

[HttpPost]
[AllowAnonymous]
public ActionResult Login(LoginModel usr)
{      
        if (usr.UserName=="random"&&usr.Password=="randPassword")
        {
            Session["Username"] = usr.UserName.ToString();
            FormsAuthentication.SetAuthCookie(user.UserName, false);
           return RedirectToAction("Success","Account",new {new {Name=usr.UserName}});
        }
        else
        {
            ModelState.AddModelError("", "UserName or Password is Wrong");
            return View();
        }
}

我的成功观很简单，只有成功。调试也将继续查看断点，但没有重定向。成功后我可以用js重定向，但当我想发送数据和渲染视图时，事情会变得复杂。谢谢

Answer 1

控件使用ajax调用，因此重定向实际上是从服务器端进行的，并以javascript形式返回给ajax调用程序。尝试从页面提交表单，重定向将在浏览器上进行。

Answer 2

由于这是您正在进行的ajax调用，因此应该从您的操作方法返回一个json响应。

[HttpPost]
[AllowAnonymous]
public ActionResult Login(LoginModel usr)
{      
    if (usr.UserName=="random"&&usr.Password=="randPassword")
    {
        // do whatever you have to do 
        return Json(new { status="success"});
    }
    else
    {
      return Json(new { status="error" ,error= "UserName or Password is Wrong"});
    }
}

在$http.post调用的then事件中，检查返回的响应并执行重定向。

var loginUrl="@Url.Action("Login","Account")";
$http.post(loginUrl, data, config).then(function(res){
    if(res.data.status==="success")
    {
       window.location.href="@Url.Action("Success","Account")";
    }
    else
    {
      alert(res.data.error);
    }
});

上面的javascript代码假设您在剃刀视图中有它，并使用Url.Action辅助方法生成动作方法的相对url。如果你的angular代码在一个单独的javascript文件中，你可以将url从你的剃刀视图传递给应用程序根，并使用它来构建你的操作方法的url，如本答案所述。