How to use buttons in Asp.Net to call a method

Question

I am trying to make a button in my View call a method in the Model using the button's onClick event, but I am not sure how to make this work. The button just doesn't do anything.

This is my View:

<html>
<body>
    <div>
        <p>Coins: @Model.Coins</p>
        <button type="button" id="btnScore"
                onclick="Btn_Click">Click me!</button>
    </div>
</body>
</html>

This is the model I try to call the method in:

public class ClickerGame

    {
        public int Coins { get; set; }

        public ClickerGame()
        {
            Coins = 0;
        }

        public void Btn_Click()
        {
            Coins++;
        }
}

This is the Controller:

public class ClickerController : Controller
    {
        // GET: /<controller>/
        public IActionResult Index()
        {
            ClickerGame model = new ClickerGame();
            return View(model);
        }
    }

And this is my 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?}");
        });
    }
}

I am able to get the amount of coins in calling @Model.Coins in the View, but when I try to use @Model.Btn_Click it gives me an error saying the method can't be converted to a delegate object. I am using Asp.Net Core 1.0.1 in visual studio.

Edit: I changed the Controller and the View and it now is able to call the method, but when it tries to increase the coin variable I get a NullReference exception...

The View:

@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>

ClickerGame:

public class ClickerGame

    {
        public int Coins { get; set; }

        public ClickerGame()
        {
            Coins = 0;
        }
}

ClickerController:

public class ClickerController : Controller
{
    ClickerGame model;

    public IActionResult Index()
    {
        model = new ClickerGame();
        return View(model);
    }

    public void IncrementCount()
    {
        model.Coins++;
    }
}

Answer 1

It is not possible to do that like in webforms. I will explain briefly. Please implement it. Follow the following steps to make it work in MVC :

1. Change your view code to below code :

<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. In your controller add an action method IncrementCount and increment the count here.

public class ClickerController : Controller
{       
    [HttpPost]
    public void IncrementCount()
    {
        // 
    }
}

Answer 2

Try this

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

 function nextUrl() {
    location.href = "/Home/Contact";
}

How to use buttons in Asp.Net to call a method

Question

2 answers

solution1
3 2016-12-02 10:31:44

solution2
0 2016-12-02 14:11:12

How to use buttons in Asp.Net to call a method

Question

2 answers

solution1 3 2016-12-02 10:31:44

solution2 0 2016-12-02 14:11:12

solution1
3 2016-12-02 10:31:44

solution2
0 2016-12-02 14:11:12