Edit Item Modal - Copy this Html, Bootstrap Component to your project
<div class="modal show" style="display: block;"> <div class="modal dialog"> <div class="modal content"> <div class="modal header"> <h5 class="modal title">Edit Item</h5> <button type="button" class="btn close" aria label="Close" @onclick="CloseModal"></button> </div> <div class="modal body"> <! Form Fields > <div class="mb 3"> <label>Type</label> <div> <input type="radio" id="type1" name="type" value="Şirtet"/> <label for="type1">Şirtet</label> </div> <div> <input type="radio" id="type2" name="type" value="Şahıs"/> <label for="type2">Şahıs</label> </div> </div> <div class="mb 3"> <label>Title</label> <input type="text" class="form control" @bind="cari.TITLE" placeholder="Title" /> </div> <div class="mb 3"> <label>Name</label> <input type="text" class="form control" @bind="cari.NAME" placeholder="Name" /> </div> <div class="mb 3"> <label>Surname</label> <input type="text" class="form control" @bind="cari.SURNAME" placeholder="Surname" /> </div> <div class="mb 3"> <label>City</label> <select class="form control" @bind="cari.CITY"> @foreach (var city in new List<string> { "GİRNE", "LEFKOŞA", "MAGUSA", "GÜZELYURT", "İSKELE", "LEFKE" }) { <option value="@city">@city</option> } </select> </div> <div class="mb 3"> <label>Address</label> <input type="text" class="form control" @bind="cari.ADDRESS" placeholder="Address" /> </div> <div class="mb 3"> <label>Phone 1</label> <input type="text" class="form control" @bind="cari.TEL1" placeholder="Phone 1" /> </div> <div class="mb 3"> <label>Phone 2</label> <input type="text" class="form control" @bind="cari.TEL2" placeholder="Phone 2" /> </div> <div class="mb 3"> <label>Email</label> <input type="email" class="form control" @bind="cari.EMAIL" placeholder="Email" /> </div> <div class="mb 3"> <label>ID Number</label> <input type="text" class="form control" @bind="cari.IDNO" placeholder="ID Number" /> </div> <div class="mb 3"> <label>Tax Number</label> <input type="text" class="form control" @bind="cari.TAXNO" placeholder="Tax Number" /> </div> <div class="mb 3"> <label>Ticari Grup</label> <select class="form control" @bind="cari.TICARIGRUP"> @foreach (var group in TicariGrupOptions) { <option value="@group">@group</option> } </select> </div> <div class="mb 3"> <label>Currency</label> <select class="form control" @bind="cari.CURRENCY"> @foreach (var currency in new List<string> { "TL", "EUR", "USD", "STG" }) { <option value="@currency">@currency</option> } </select> </div> <div class="mb 3"> <label>Limit</label> <input type="number" class="form control" @bind="cari.LIMIT" placeholder="Limit" /> </div> <div class="mb 3"> <label>Vade</label> <input type="number" class="form control" @bind="cari.VADE" placeholder="Vade" /> </div> <div class="mb 3"> <label>Note</label> <textarea class="form control" @bind="cari.NOTE" placeholder="Note"></textarea> </div> </div> <div class="modal footer"> <button type="button" class="btn btn secondary" @onclick="CloseModal">Close</button> <button type="button" class="btn btn primary" @onclick="SaveChanges">Save changes</button> <button type="button" class="btn btn success" @onclick="Approve">Approve</button> <button type="button" class="btn btn danger" @onclick="Reject">Reject</button> <textarea class="form control mt 2" @bind="rejectMessage" placeholder="Reject Message"></textarea> </div> </div> </div> </div>
