معرفی
این مقاله ادامه مقاله “ Inserting Data Into Insert Database SQL Server Using ASP.NET Core 3 Razor Pages ” است که در آن صفحه create razor را برای درج رکورد در داخل پایگاه داده پیاده سازی کرده ایم. در این مقاله، ما بر روی ویرایش و حذف یک صفحه تیغ کار خواهیم کرد تا عملکرد ویرایش و حذف عملیات خام روی اشیاء BookList در صفحات ASP.Net Core Razor را انجام دهیم.
ایجاد صفحه ویرایش تیغ
اکنون صفحه ای به نام Edit ایجاد می کنیم تا داده های ایجاد شده از قبل در پایگاه داده SQL Server را ویرایش و به روز رسانی کنیم.
برای اینکه این اتفاق بیفتد، باید در فایل Ind.cshtml تغییراتی ایجاد کنیم. در داخل تگ انکر دکمه ویرایش، باید مسیریابی را پاس کنیم که صفحه asp یک صفحه ویرایش خواهد بود که به زودی ایجاد خواهیم کرد.
- @page
- @model BookList.IndModel
- <br />
- <div class="container row p-0 m-0">
- <div class="col-10">
- <h2 class="text-info">Book List</h2>
- </div>
- <div class="col-2">
- <a asp-page="Create" class="btn btn-info form-control text-white">Create New Book</a>
- </div>
- <div class="col-12 border p-3 mt-3">
- <form method="post">
- @if(Model.Books.Count()>0)
- {
- <table class="table table-striped border">
- <tr class="table-secondary">
- <th>
- <label asp-for="Books.FirstOrDefault().Name"></label>
- </th>
- <th>
- <label asp-for="Books.FirstOrDefault().Author"></label>
- </th>
- <th>
- <label asp-for="Books.FirstOrDefault().ISBN"></label>
- </th>
- <th>
- </th>
- </tr>
- @foreach(var item in Model.Books)
- {
- <tr>
- <td>
- @Html.DisplayFor(m => item.Name)
- </td>
- <td>
- @Html.DisplayFor(m => item.Author)
- </td>
- <td>
- @Html.DisplayFor(m => item.ISBN)
- </td>
- <td>
- <button asp-page-handler="Delete" asp-route-id="@item.Id" onclick="return confirm('Are you sure you want to delete?')" class="btn btn-danger btn-sm">Delete</button>
- <a asp-page="Edit" asp-route-id="@item.Id" class="btn btn-success btn-sm text-white">Edit</a>
- </td>
- </tr>
- }
- </table>
- }
- else
- {
- <p>No Books Available.</p>
- }
- </form>
- </div>
- </div>
هر زمان که کاربر روی دکمه ویرایش کلیک می کند، می خواهیم شناسه فیلدی را که در حال ویرایش آن است، ارسال کنیم. در این صورت این شناسه کتاب خواهد بود. بنابراین برای عبور از آن، از یک تگ کمکی دیگر استفاده می کنیم که مسیر asp و نام خاصیتی است که می خواهیم عبور کنیم.
در اینجا می خواهیم شناسه کتاب را پاس کنیم. به این ترتیب وقتی کاربر بر روی ویرایش کلیک می کند، به صفحه ویرایش تیغ می رود و همچنین شناسه را به عنوان پارامتر ارسال می کند.
بنابراین اکنون باید یک صفحه تیغ جدید به نام Edit ایجاد کنیم که در آن قابلیت ویرایش و همچنین یک رابط کاربری برای بازیابی اطلاعات کتاب برای ویرایش و به روز رسانی آن بر اساس نیاز کاربر تعریف می کنیم.
- @page
- @model BookList.EditModel
- <br />
- <h2 class="text-info">Edit Book</h2>
- <br />
- <div class="border container" style="padding:30px;">
- <form method="post">
- <input type="hidden" asp-for="Book.Id" />
- <div class="form-group row">
- <div class="col-4">
- <label asp-for="Book.Name"></label>
- </div>
- <div class="col-6">
- <input asp-for="Book.Name" class="form-control" />
- </div>
- </div>
- <div class="form-group row">
- <div class="col-4">
- <label asp-for="Book.Author"></label>
- </div>
- <div class="col-6">
- <input asp-for="Book.Author" class="form-control" />
- </div>
- </div>
- <div class="form-group row">
- <div class="col-4">
- <label asp-for="Book.ISBN"></label>
- </div>
- <div class="col-6">
- <input asp-for="Book.ISBN" class="form-control" />
- </div>
- </div>
- <div class="form-group row">
- <div class="col-3 offset-4">
- <input type="submit" value="Update" class="btn btn-primary form-control" />
- </div>
- <div class="col-3">
- <a asp-page="Ind" class="btn btn-success form-control">Back to List</a>
- </div>
- </div>
- </form>
- </div>
در داخل فایل Edit.cshtml.cs، ما در حال ایجاد یک get handler هستیم که پارامتری به نام Id را دریافت می کند که فقط آن را پاس می کنیم. از نوع عدد صحیح خواهد بود و بر این اساس کتاب را بازیابی می کنیم.