@page "/page4"
@inherits RolBase

<div style="margin-left:45%;margin-top:5% ;font-family:'Arial Narrow Bold'">
<p style="border:3px; color:red;">Rol Sil</p>
<input id="rolid" type="text" @bind="inputid1" placeholder="Rol ID">
<button id="rolsil" class="btn btn-warning"  @onclick="DeleteData">Sil</button>
</div>

<div style="margin-left:45%;margin-top:6%;font-family:'Arial Narrow Bold'">
<p style="border:3px; color:red;">Rol Güncelle</p>
<input id="rolid" type="text" @bind="inputid2" placeholder="Rol ID">
<input id="roladi" type="text" @bind="inputadi2" placeholder="Rol Adi">
<button id="rolgüncelle" class="btn btn-warning" @onclick="UpdateData">Güncelle</button>
</div>


<div style="margin-left:45%;margin-top:7%;font-family:'Arial Narrow Bold'">
<p style="border:3px; color:red;">Rol Ekle</p>
<input id="roladi" type="text"  @bind="inputadi3" placeholder="Rol Adi">
<button id="rolekle" class="btn btn-warning" @onclick="InsertData">Ekle</button>
</div>
<br/>
<table class="table" style="background:rgb(  207, 190, 240  );width:30%;margin-left:3%;margin-top:-35%">
    <thead>
        <tr>
            <th>Rol Id  </th>
            <th>Rol Adı</th> 
        </tr>   
    </thead>
    <tbody>
         
                @foreach(var item in roller)
                {
            <tr>
                <td>@item.rol_id</td> 
                <td>@item.rol_adi</td>
            </tr>
                }
    </tbody>
    </table>