Asp.Net Core 2.2 Web Api Client ile CRUD İşlemleri 3

Yazımızın son kısmına geldik. Şimdi View sayfalarını oluşturalım.

Category/Index için View oluşturalım.

@model ICollection<AspNetCoreWebApi.Client.Models.Category>

@{    ViewData["Title"] = "Index"; }

<div class="contentBody">

    <h1>Kategoriler</h1>

    <div id="table">

        <table class="table ">

            <thead class="thead-dark">

                <tr>

                    <th scope="col">İsim</th>

                    <th scope="col">Durum</th>

                    <th scope="col">Düzenle</th>

                    <th scope="col">Sil</th>

                </tr>

            </thead>

            <tbody>

                @foreach (var item in Model)

                {

                    <tr>

                        <td>@item.CategoryName</td>

                        <td>@item.IsActive</td>

                        <td><a asp-action="Edit" asp-route-id="@item.Id">

                            <i class="far fa-edit " style="font-size:16px;"></i></a></td>

                        <td><a asp-action="Delete" asp-route-id="@item.Id">

                            <i class="far fa-trash-alt " style="font-size:16px;"></i></a></td>

                    </tr>

                }

            </tbody>

        </table>

        <br />

        <br />

        <p>

            <a class="btn btn-primary" asp-action="Create">Yeni Kategori Oluştur</a>

        </p>

    </div>

</div>

Category/Create için View oluşturalım.

@model AspNetCoreWebApi.Client.ViewModels.EditCategoryViewModel

@{

    ViewData["Title"] = "Create";

}

<div class="contentBody">

    <h1>Kategori Oluştur</h1>

    <hr />

    <div class="col-md-3">

        <form asp-action="Create">

            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <div class="form-group">

                <label asp-for="CategoryName" class="control-label"></label>

                <input asp-for="CategoryName" class="form-control" />

                <span asp-validation-for="CategoryName" class="text-danger"></span>

            </div>          

            <div class="form-group form-check">

                <label class="form-check-label">

                    <input class="form-check-input" asp-for="IsActive" /> 

                        @Html.DisplayNameFor(model => model.IsActive)

                </label>

            </div>

            <div class="form-group">

                <input type="submit" value="Create" class="btn btn-primary" />

            </div>

        </form>

    </div>

    <div>

        <a asp-action="Index">Kategorilere geri dön</a>

    </div>

</div>

Category/Edit için View oluşturalım.

@model AspNetCoreWebApi.Client.ViewModels.EditCategoryViewModel

@{

    ViewData["Title"] = "Edit";

}

<div class="contentBody">

    <h1>Kategori Düzenle</h1>

    <div class="col-md-3">

        <form asp-action="Edit">

            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <input type="hidden" asp-for="Id" />

            <div class="form-group">

                <label asp-for="CategoryName" class="control-label"></label>

                <input asp-for="CategoryName" class="form-control" />

                <span asp-validation-for="CategoryName" class="text-danger"></span>

            </div>         

            <div class="form-group form-check">

                <label class="form-check-label">

                    <input class="form-check-input" asp-for="IsActive" /> 

                        @Html.DisplayNameFor(model => model.IsActive)

                </label>

            </div>

            <div class="form-group">

                <input type="submit" value="Create" class="btn btn-primary" />

            </div>

        </form>

    </div>

    <div>

        <a asp-action="Index">Kategorilere geri dön</a>

    </div>

</div>

Category/Details için View oluşturalım.

@using AspNetCoreWebApi.Client.Components.CategoryComponents

@model AspNetCoreWebApi.Client.Models.Category

@{

    ViewData["Title"] = "Details";

}

<div class="contentBody">

    <h3>@Model.CategoryName</h3>

    <br />

    <br />

    <h4>Kategori Bilgileri</h4>

    <hr />

    <div class="row col-md 12">

        <div class="col-md-6">

            <div id="açıklama">

                <div class="col-md-8"><h5>Kategori İsmi</h5></div>

                <div class="col-md-8">@Model.CategoryName</div>

                <br />

                <div class="col-md-8"><h5>Açıklama</h5></div>

                <div class="col-md-11">@Model.Description</div>

            </div>           

        </div>

        <div class=" col-md-6">

        @await Component.InvokeAsync("CategoryProducts", new { id=Model.Id})

        </div>

    </div>

</div>

NOT: @await Component.InvokeAsync("CategoryProducts", new { id=Model.Id}) ile ViewComponents çağırımı yapıyoruz. bu kısmı tekrardan bur da yazmayacağım.  ayrıca bakmak için daha önceki yazımı inceleyin.


Category/Delete için View oluşturalım.

@model AspNetCoreWebApi.Client.Models.Category

@{

    ViewData["Title"] = "Delete";

}

<div class="contentBody">

    <h3>Bu kategoriyi silmek istediğinizden emin misiniz?</h3>

    <br />

    <br />

    <h4>Ürün Sil</h4>

    <hr />

    <dl class="row">

        <dt class="col-sm-2">

            @Html.DisplayNameFor(model => model.CategoryName)

        </dt>

        <dd class="col-sm-10">

            @Html.DisplayFor(model => model.CategoryName)

        </dd>

        <dt class="col-sm-2">

            @Html.DisplayNameFor(model => model.IsActive)

        </dt>

        <dd class="col-sm-10">

            @Html.DisplayFor(model => model.IsActive)

        </dd>

    </dl>

    <form asp-action="Delete">

        <input type="hidden" asp-for="Id" />

        <input type="submit" value="Delete" class="btn btn-danger" /> |

        <a asp-action="Index">Kategorilere geri dön</a>

    </form>

</div>

Product/Index için View oluşturalım.

@model ICollection<AspNetCoreWebApi.Client.Models.Product>

@{

    ViewData["Title"] = "Ürünler";

}

<div class="contentBody">

    <h1>Ürünler</h1>

    <div id="table">

        <table class="table ">

            <thead class="thead-dark">

                <tr >

                    <th scope="col" >İsim</th>

                    <th scope="col">Durum</th>

                    <th scope="col">Stok</th>

                    <th scope="col">Fiyat</th>

                    <th scope="col">Düzenle</th>

                    <th scope="col">Sil</th>

                </tr>

            </thead>

            <tbody>

                @foreach (var item in Model)

                {

                <tr>

                    <td>@item.Name</td>

                    <td>@item.IsActive</td>

                    <td>@item.Stock</td>

                    <td>@item.Price</td>

                    <td><a asp-action="Edit" asp-route-id="@item.Id">

                        <i class="far fa-edit " style="font-size:16px;"></i></a></td>

                    <td><a asp-action="Delete" asp-route-id="@item.Id">

                        <i class="far fa-trash-alt " style="font-size:16px;"></i></a></td>

                </tr>

                }

            </tbody>

        </table>

        <br />

        <br />

        <p>

            <a class="btn btn-primary"  asp-action="Create">Yeni Ürün Oluştur</a>

        </p>

    </div>

</div>

Product/Create için View oluşturalım.

@model AspNetCoreWebApi.Client.ViewModels.EditProductViewModel

@{

    ViewData["Title"] = "Create";

}

<div class="contentBody">

    <h1>Ürün Oluştur</h1>

    <hr />

    <div class="col-md-3">

        <form asp-action="Create">

            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <div class="form-group">

                <label asp-for="Name" class="control-label"></label>

                <input asp-for="Name" class="form-control" />

                <span asp-validation-for="Name" class="text-danger"></span>

            </div>

            <div class="form-group">

                <label asp-for="Stock" class="control-label"></label>

                <input asp-for="Stock" class="form-control" />

                <span asp-validation-for="Stock" class="text-danger"></span>

            </div>

            <div class="form-group">

                <label asp-for="Price" class="control-label"></label>

                <input asp-for="Price" class="form-control" />

                <span asp-validation-for="Price" class="text-danger"></span>

            </div>

            <div class="form-group">

                <label class="control-label">Kategori</label>

                <select asp-for="CategoryId" asp-items="@(new                                                                                                     SelectList(Model.Categories,"Id","CategoryName"))" class="form-control">

                    <option>Kategori Seçiniz</option>

                </select>

                <span asp-validation-for="CategoryId" class="text-danger"></span>

            </div>

            <div class="form-group form-check">

                <label class="form-check-label">

                    <input class="form-check-input" asp-for="IsActive" />

                        @Html.DisplayNameFor(model => model.IsActive)

                </label>

            </div>

            <div class="form-group">

                <input type="submit" value="Create" class="btn btn-primary" />

            </div>

        </form>

    </div>

    <div>

        <a asp-action="Index">Ürünlere geri dön</a>

    </div>

</div>

Product/Edit için View oluşturalım.

@model AspNetCoreWebApi.Client.ViewModels.EditProductViewModel

@{

    ViewData["Title"] = "Edit";

}

<div class="contentBody">

    <h1>Ürün Düzenle</h1>

    <div class="col-md-3">

        <form asp-action="Edit">

            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <input type="hidden" asp-for="Id" />

            <div class="form-group">

                <label asp-for="Name" class="control-label"></label>

                <input asp-for="Name" class="form-control" />

                <span asp-validation-for="Name" class="text-danger"></span>

            </div>

            <div class="form-group">

                <label asp-for="Stock" class="control-label"></label>

                <input asp-for="Stock" class="form-control" />

                <span asp-validation-for="Stock" class="text-danger"></span>

            </div>

            <div class="form-group">

                <label asp-for="Price" class="control-label"></label>

                <input asp-for="Price" class="form-control" />

                <span asp-validation-for="Price" class="text-danger"></span>

            </div>

            <div class="form-group">

                <label class="control-label">Kategori</label>

                <select asp-for="CategoryId" asp-items="@(new                                                                                                     SelectList(Model.Categories,"Id","CategoryName"))" class="form-control"></select>

                <span asp-validation-for="CategoryId" class="text-danger"></span>

            </div>

            <div class="form-group form-check">

                <label class="form-check-label">

                    <input class="form-check-input" asp-for="IsActive" /> 

                        @Html.DisplayNameFor(model => model.IsActive)

                </label>

            </div>

            <div class="form-group">

                <input type="submit" value="Create" class="btn btn-primary" />

            </div>

        </form>

    </div>

    <div>

        <a asp-action="Index">Ürünlere geri dön</a>

    </div>

</div>

Product/Delete için View oluşturalım.

@model AspNetCoreWebApi.Client.Models.Product

@{

    ViewData["Title"] = "Delete";

}

<div class="contentBody">

    <h3>Bu ürünü silmek istediğinizden emin misiniz?</h3>

    <br />

    <br />

    <h4>Ürün Sil</h4>

    <hr />

    <dl class="row">

        <dt class="col-sm-2">

            @Html.DisplayNameFor(model => model.Name)

        </dt>

        <dd class="col-sm-10">

            @Html.DisplayFor(model => model.Name)

        </dd>

        <dt class="col-sm-2">

            @Html.DisplayNameFor(model => model.Stock)

        </dt>

        <dd class="col-sm-10">

            @Html.DisplayFor(model => model.Stock)

        </dd>

        <dt class="col-sm-2">

            @Html.DisplayNameFor(model => model.Price)

        </dt>

        <dd class="col-sm-10">

            @Html.DisplayFor(model => model.Price)

        </dd>

        <dt class="col-sm-2">

            @Html.DisplayNameFor(model => model.CategoryId)

        </dt>

        <dd class="col-sm-10">

            @Html.DisplayFor(model => model.CategoryId)

        </dd>

        <dt class="col-sm-2">

            @Html.DisplayNameFor(model => model.IsActive)

        </dt>

        <dd class="col-sm-10">

            @Html.DisplayFor(model => model.IsActive)

        </dd>

    </dl>

    <form asp-action="Delete">

        <input type="hidden" asp-for="Id" />

        <input type="submit" value="Delete" class="btn btn-danger" /> |

        <a asp-action="Index">Back to List</a>

    </form>

</div>

Çalışmamızın kod kısmı bu kadar. Şimdi çalıştırıp sonucu görelim.

Category/Index sayfası ekran çıktısı.

Category/Create sayfası ekran çıktısı. 

Category/Edit sayfası ekran çıktısı. 





Category/Details sayfası ekran çıktısı.

Category/Delete sayfası ekran çıktısı.

Product/Create sayfası ekran çıktısı.

Başka bir yazıda görüşmek üzere.

Uygulama kodları AspNetCoreWebApiClient