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

并且返回的网址是/Games/PlayGame/@Url.Action(%22PlayGameRound%22,%20%22Games%22）但是

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

请帮助。

Answer 1

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

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

对此：

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

  }

Answer 2

Url.Action方法是一个c＃方法调用，你不能在一个单独的js文件中使用c＃，但如果它在剃须刀视图中你就可以。

你可以做的是添加另一个可以获取网址的参数，并使用它来重定向，如：

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 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语法。您必须将网址添加为JavaScript函数的参数，以便您可以使用Razor语法将其添加到HTML中。

AND

你把[HttpPost]放在你的控制器方法上，你想要用«获取»来获取它，这是不可能的。

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

4 个答案: