如何使用控制器操作使按钮将我的页面重定向到另一个页面并使用 javascript 传递值？

Question

这是我的页面（PlayGame）。从我的控制器操作生成为：

   // GET: Games/PlayGame/Id
   [AllowAnonymous]
   public ActionResult PlayGame(Game game)
   {
       return View(game);
   }

在 PlayGame 页面上，我想做一个在我的 javascript 中定义的动作。这是 PlayGame 的 .cshtml 页面：

   @model CapstoneApplication.Models.Game

   @Scripts.Render("~/Scripts/RouletteWheel.js")

   <input type="button" value="Spin" style="float:left" id="spin"/>
   <canvas id="canvas" width="500" height="500"></canvas>
   <input type="submit" value="Play" style="float:left" id="play" 
   onclick="play(@Model.Id)" />

   <script src="~/Scripts/RouletteWheel.js"></script>

这个动作应该引用一个javascript文件动作：

   function play(gameId) {
      window.location.href = '@Url.Action("PlayGameRound", "Games")';
   }

当调用此操作时，我想导航到 PlayGameRound 页面并从 .js 文件中传递一个 gameId 和类别。

   //POST:    Games/PlayGameRound/GameId/Category
   [HttpPost]
   [ValidateAntiForgeryToken]
   public ActionResult PlayGameRound(int gameId, string category)
   {
      //TODO: Get the selected category and shoot a random question from 
      the category
      var random = new Random();
      var game = this.db.Games.Find(gameId);
      var questionIndex = random.Next(0, game.Round.Questions.Count);
      var question = game.Round.Questions.ElementAt(questionIndex);

      if (category.Equals("Crown"))
      {

      }

      while (question.Category.CategoryName != category)
      {
         questionIndex = random.Next(0, game.Round.Questions.Count);
         question = game.Round.Questions.ElementAt(questionIndex);
      }

      return View(game);
  }

由于某种原因，当 .js 中的这个函数被调用时：

  function play(gameId) {
    window.location.href = '@Url.Action("PlayGameRound", "Games")';
  }

它返回给我这个页面：

404 not found

返回的 Url 是 /Games/PlayGame/@Url.Action(%22PlayGameRound%22,%20%22Games%22) 但是

我正在尝试请求类似：/Games/PlayGameRound/GameId/Category

请帮忙。

Answer 1

Url.Action 方法是一个 c# 方法调用，不能在单独的 js 文件中使用 c#，但如果它在 razor 视图中，则可以。

您可以做的是添加另一个参数，该参数也可以获取 url 并使用它来重定向：

onclick="play(@Model.Id,'@Url.Action("PlayGameRound", "Games")')"

然后在你的函数中使用它：

function play(gameId,url) {
window.location.href = url;
}

或者另一种选择是使用data- 属性，例如：

<input type="submit" value="Play" style="float:left" id="play" 
 data-id="@Model.Id"
 data-url="@Url.Action("PlayGameRound", "Games")" onclick="play(this)" />

在js中的函数中：

function play(element) {
var ModelID = $(element).data("id"); // ModelId
window.location.href = $(element).data("url"); // url
}

Answer 2

正如我所说，你不能在 javascript 文件中使用 Razor 语法，它只能在 View 文件中使用，所以从这里更改你的 javascript 代码行：

    function play(gameId) {
       window.location.href = '@Url.Action("PlayGameRound", "Games")';
  }

到这里：

    function play(gameId) {
          window.location.href = '/Games/PlayGameRound';

  }

Answer 3

您不能将 razor 语法放入 js 文件中。解决此问题的另一种方法是在视图中创建全局对象并在 js 文件中引用相同的对象。
@model CapstoneApplication.Models.Game

   <script>
       var globalObj = {
          myRoute: '@Url.Action("PlayGameRound", "Games")';
       }
   </script>

   <input type="button" value="Spin" style="float:left" id="spin"/>
   <canvas id="canvas" width="500" height="500"></canvas>
   <input type="submit" value="Play" style="float:left" id="play" 
   onclick="play(@Model.Id)" />

   <script src="~/Scripts/RouletteWheel.js"></script>

在你的 js 文件中

 function play(gameId) {
    window.location.href = window.myRoute;
  }

Answer 4

你不能像上面所说的那样在 JavaScript 文件中使用 Razor 语法。您必须将 url 添加为 JavaScript 函数的参数，以便可以使用 Razor 语法在 HTML 中获取它。

与

您将[HttpPost] 放在您的控制器方法中，并且想在« Get » 中获取它，这是不可能的。