如何使用ASP.NET Core中的按钮通过onClick调用方法

问题描述 投票:0回答:2

我正在尝试使用按钮的 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++;
    }
}
c# asp.net-core asp.net-core-mvc
2个回答
3
投票

不可能像在 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()
    {
        // 
    }
}

0
投票

试试这个

<input type="button" value="Click me!" onclick="nextUrl()"/>

 function nextUrl() {
    location.href = "/Home/Contact";
}
© www.soinside.com 2019 - 2024. All rights reserved.