Search code examples
htmlasp.net-core-mvcrazorengine

correct syntax for runat server a button with MVC 6 .net core and bootstrap


I'd like to know how to create a simple button action, in MVC 6 core web application with bootstrap. So that i for example could execute a sql stored procedure, or simply retrieve a date from server, or retrieve something else by code from the server upon request, and display it in a textbox. Especially i like to know the minimal code without fancy decorations.

<asp:???  input type="button" runat="server" onclick="btn_Click" class="btn btn-default">

or perhaps

<div>
<button type="button" class="btn btn-default" runat="server" onclick="btn_Click">
</div>

its perhaps a simple question but i get confused on how it should be done in MVC-6 and not in older versions or asp pages


Solution

  • It's not called MVC 6 anymore. It's now ASP.NET Core 1.0. The runat="server" is not used in ASP.NET Core 1.0 since it does not support web forms but instead relied on the MVC paradigm. For the same reason there is no onclick attribute either.

    So you button might look like:

    <button type="submit" class="btn btn-default">Click Here</button>
    

    And the action method on the controller might look like:

        [HttpPost]
        public IActionResult Post() {
            /*do work here*/
    
            return View();
        }
    



    Full Example

    In the comments you asked for an example of how one can tell which button was clicked if there were multiple buttons on the form. Here is an example:

    /Views/example/index.cshtml

    <html>
        <body>
            <form asp-controller="example" asp-action="Index">
                <label>Value:</label><input name="someValue" type="text" maxlength="10" />
                <button name="btnOne" type="submit" class="btn btn-default">Click One</button>
                <button name="btnTwo" type="submit" class="btn btn-default">Click Two</button>
            </form>
        </body>
    </html>
    

    /Controllers/example/ExampleController.cs

    using Microsoft.AspNetCore.Mvc;
    
    namespace App.Web.Controllers {
    
        public class ExampleController: Controller {
    
            public ExampleController() {
    
            }
    
            [HttpGet]
            [Route("/example/")]
            public IActionResult Index() {
                return View();
            }
    
    
            [HttpPost]
            [Route("/example/")]
            public IActionResult Index(string someValue) {
                string buttonClicked = "";
    
    
                if(HttpContext.Request.Form.ContainsKey("btnOne")) {
                    buttonClicked = "btnOne";
                } else if(HttpContext.Request.Form.ContainsKey("btnTwo")) {
                    buttonClicked = "btnTwo";
                }
    
                return View("Index");
            }
    
        }
    }
    

    You can learn more about forms in ASP.NET Core here: https://learn.microsoft.com/en-us/aspnet/core/mvc/views/working-with-forms
    They are amazingly flexible compared to webforms but the learning curve is a bit steeper at first.