CODEWITHSUNDEEP
c#asp.net-coreasp.net-core-mvc
PixieCatSupreme
PixieCatSupreme

Reputation: 71

How to use buttons in ASP.NET Core to call a method via onClick

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++;
    }
}

Upvotes: 2

Views: 28755

Answers (2)

ViVi
ViVi

Reputation: 4464

It is not possible to do that like in Web Forms. Follow these steps to make it work in MVC:

1. Change your View code to the 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()
    {
        // 
    }
}

Upvotes: 3

hakantopuz
hakantopuz

Reputation: 511

Try this

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

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

Upvotes: 0

Related Questions