我正在尝试使用按钮的 onClick 事件使视图中的按钮调用模型中的方法,但我不确定如何实现此操作。该按钮没有任何作用。
这是我的观点:
<html>
<body>
<div>
<p>Coins: @Model.Coins</p>
<button type="button" id="btnScore"
onclick="Btn_Click">Click me!</button>
</div>
</body>
</html>
这是我尝试调用该方法的模型:
public class ClickerGame
{
public int Coins { get; set; }
public ClickerGame()
{
Coins = 0;
}
public void Btn_Click()
{
Coins++;
}
}
这是控制器:
public class ClickerController : Controller
{
// GET: /<controller>/
public IActionResult Index()
{
ClickerGame model = new ClickerGame();
return View(model);
}
}
这是我的 Startup.cs
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
loggerFactory.AddConsole();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Clicker}/{action=Index}/{id?}");
});
}
}
我能够在视图中调用 @Model.Coins 来获取硬币数量,但是当我尝试使用 @Model.Btn_Click 时,它给我一个错误,指出该方法无法转换为委托对象。 我在 Visual Studio 中使用 Asp.Net Core 1.0.1。
编辑: 我更改了控制器和视图,现在它可以调用该方法,但是当它尝试增加 coin 变量时,我收到 NullReference 异常...
景色:
@model AspNetClicker.Models.ClickerGame
<script>
function IncrementCount()
{
location.href = "@Url.Action("IncrementCount")";
}
</script>
<html>
<body>
<div>
<p>Coins: @Model.Coins</p>
<button type="button" id="btnScore"
onclick="IncrementCount()">
Click me!
</button>
</div>
</body>
</html>
点击游戏:
public class ClickerGame
{
public int Coins { get; set; }
public ClickerGame()
{
Coins = 0;
}
}
唱首歌控制器:
public class ClickerController : Controller
{
ClickerGame model;
public IActionResult Index()
{
model = new ClickerGame();
return View(model);
}
public void IncrementCount()
{
model.Coins++;
}
}
不可能像在 Web 表单中那样做到这一点。请按照以下步骤使其在 MVC 中运行:
1。将您的查看代码更改为以下代码:
<html>
<body>
<div>
<p>Coins: @Model.Coins</p>
<button type="button" id="btnScore"
onclick="IncrementCount()">Click me!</button>
</div>
</body>
<script>
function IncrementCount() {
$.ajax({
type: "POST",
url: "/Clicker/IncrementCount",
async: true,
success: function (msg) {
ServiceSucceeded(msg);
},
error: function () {
return "error";
}
});
}
</script>
</html>
2。在您的控制器中添加一个操作方法
IncrementCount
并在此处增加计数。
public class ClickerController : Controller
{
[HttpPost]
public void IncrementCount()
{
//
}
}
试试这个
<input type="button" value="Click me!" onclick="nextUrl()"/>
function nextUrl() {
location.href = "/Home/Contact";
}