Button Type in ASP.NET Core Button

6 Jun 20232 minutes to read

Button is used as normal clickable button, submitting form data, resetting the form data to its initial value. According to the usage of button, you can render the button in three types. Using the Type property, you can easily render the button in following types.

List of Button types

Button The button is a clickable button
Submit The button is a submit button (submits form-data)
Reset The button is a reset button (resets the form-data to its initial values)

The following steps explains you the details about rendering the Button with above mentioned button types.

  1. In the CSHTML page, configure the Button widget as follows.
  • CSHTML
  • /*ej-Tag Helper code to render Button*/
    
    @*Add the code in CSHTML page to configure and initialize the control*@
    
    
    @* Set the different types for button control as follows.*@
    
    <div class="control">
    
            <ej-button id="button_button" text="button" show-rounded-corner="true" size="Mini" type="Button">
    
            <br />
    
            <br />
    
            <ej-button id="button_submit" text="submit" show-rounded-corner="true" size="Mini" type="Submit">
    
            <br />
    
            <br />
    
            <ej-button id="button_reset" text="reset" show-rounded-corner="true" size="Mini" type="Reset">
    </div>
  • HTML
  • /*Razor code to render Button*/
    
    <div class="control">
    
            @{ Html.EJ().Button("button_button").Text("button").ShowRoundedCorner(true).Size(ButtonSize.Mini).Type(ButtonType.Submit).Render(); }
         <br />
         <br />
            @{ Html.EJ().Button("button_submit").Text("submit").ShowRoundedCorner(true).Size(ButtonSize.Mini).Type(ButtonType.Submit).Render(); }
         <br />
         <br />
            @{ Html.EJ().Button("button_reset").Text("reset").ShowRoundedCorner(true).Size(ButtonSize.Mini).Type(ButtonType.Reset).Render(); }
    
    </div>

    NOTE

    To render the Button Control you can use either Razor or Tag helper code as given in the above code snippet.

    Execute the above code to render the following output.

    Different button types