How to make a button with Razor and Css

Asked

Viewed 1,172 times

2

I’m trying to make a button on a particular page.

However, my entire project started with the Razor engine, so I would like to know how I can make a button with such engine, I am trying to do so:

@model WebApplication3.Models.Comercial.ComercialModels

@{
    ViewBag.Title = "Index";
}
<div id="Open_menu">
    <span onclick="openNav()">Menu</span>
</div>

<h2>Comercial</h2>

<div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">@Html.ActionLink("Home", "Index", "MenuInicial")</a>
    <a href="#">@Html.ActionLink("Serviços", "Index", "Servicos")</a>
    <a href="#">@Html.ActionLink("Comercial", "Index", "Comercial")</a>
    <a href="#">@Html.ActionLink("Estoque", "Index", "Estoque")</a>
    <a href="#">@Html.ActionLink("Equipamentos", "Index", "Equipamentos")</a>
    <a href="#">@Html.ActionLink("Compras", "Index", "Compras")</a>
    <a href="#">@Html.ActionLink("Fiscal", "Index", "Fiscal")</a>
    <a href="#">@Html.ActionLink("Caixa", "Index", "Caixa")</a>
</div>

<div class="but_clientes">
    @Html.ActionLink("Clientes", "Clientes", "Comercial")
</div>

However, the result is not as expected, it creates as if it were a Hyper Link in the word, and not a button:

inserir a descrição da imagem aqui

CSS:

    .but_clientes {
    width: 100px;
    height: 100px;
    background-color: transparent;
    background-image:url(../Image/clientes.png);
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid black;
    border-radius: 10px;
    }

When trying to change the html code to:

<div>
    @Html.ActionLink("Clientes", "Clientes", "Comercial")
    {
       <input type="button" class="but_clientes" />
    }
</div>

We had the result:

inserir a descrição da imagem aqui

2 answers

3


Do not use or <input>, nor @Html.ActionLink. Use:

<div>
    <a href="@Url.Action("Clientes", "Comercial")">
        <div class="but_clientes">Clientes</div>
    </a>
</div>
  • 2

    Boy, I thought I’d never see you in action...

1

Can put:

@Html.ActionLink("Clientes", "Clientes", "Comercial")
{
    <input type="button" class="but_clientes"/>
}
  • Friend, it didn’t work out, when performing the code like this, it appears the button plus the actionlink, I made a review in the question. thanks

Browser other questions tagged

You are not signed in. Login or sign up in order to post.