How to Edit and Dispaly Records in Sql Server Table in asp.net core MVC C# (db First Approach EF-CORE) (Part-8)

Hello & As-salam u alikum ! , In this article we will learn to edit or modify records and display a single record on new page using query string.
Note : For Beginner Guide Articles :

https://dotnetcorecommunity.blogspot.com/p/aspnet-core-tutorials-paracticals.html

Step# 1:  

Watch previous article for creating a new record and upload Image  in asp.net core 

https://dotnetcorecommunity.blogspot.com/2019/10/how-to-add-new-records-in-sql-server.html

Step# 2:  

Add a new method "Details" in Custom Controller  and paste the following action method code.

[HttpGet]


        public async Task<IActionResult> Details(int? id)


        {

            if (id == null)

            {

                return NotFound();

            }



            TblUser u = await db.TblUser.Where(x => x.UId == id).FirstOrDefaultAsync();





            if (u == null)

            {

                return NotFound();

            }



            return View(u);

        }

Step# 3:

Now Right click on Detail action method and add view.

 Paste the below html code in that view page.

@model WebApplication7.Models.TblUser





@{


    ViewData["Title"] = "Details";


}



<h1>Details</h1>



<div>

 

    <hr />

    <dl class="row" style="border:1px solid black;box-shadow:20px 20px 50px 20px;padding:35px">

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

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

        </dt>

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

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

        </dd>

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

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

        </dt>

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

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

        </dd>

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

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

        </dt>

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

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

        </dd>

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

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

        </dt>

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

         

            <img src="~/img/@Model.UProfilePicture" style="height:100px;width:100px"/>

        </dd>

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

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

        </dt>

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

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

        </dd>

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

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

        </dt>

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

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

        </dd>

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

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

        </dt>

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

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

        </dd>

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

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

        </dt>

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

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

        </dd>

    </dl>

</div>

<div>

    <a asp-action="Edit" asp-route-id="@Model.UId">Edit</a>

    |

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

</div>

Step# :4 

Add two new method "Edit" in Custom Controller ,1st for Get Request and Second for Post request   and paste the following action method code.

[HttpGet]

        public async Task<IActionResult> Edit(int? id)

        {

            if (id == null)

            {

                return NotFound();

            }



            TblUser u = await db.TblUser.Where(x => x.UId == id).FirstOrDefaultAsync();



           

            if (u == null)

            {

                return NotFound();

            }



            return View(u);

        }







        [HttpPost]

        public async Task<IActionResult> Edit(int? id,TblUser ui, IFormFile file)

        {

            if (id == null)

            {

                return NotFound();

            }



            TblUser u = await db.TblUser.Where(x => x.UId == id).FirstOrDefaultAsync();



            if (u == null)

            {

                return NotFound();

            }





            if (file != null || file.Length != 0)

            {



                string filename = System.Guid.NewGuid().ToString() + ".jpg";

                var path = Path.Combine(

                            Directory.GetCurrentDirectory(), "wwwroot", "img", filename);



                using (var stream = new FileStream(path, FileMode.Create))

                {

                    await file.CopyToAsync(stream);

                }



                u.UProfilePicture = filename;



            }





         

                u.UUserName = ui.UUserName;

                u.UPassword = ui.UPassword;

                u.UAddedDate = DateTime.Now;

                u.UIsuseraproved = ui.UIsuseraproved;

                u.UIsuserlogin = ui.UIsuserlogin;

                u.UEmail = ui.UEmail;

             

                await db.SaveChangesAsync();

                return RedirectToAction("Index");



           

           

        }

Step# :5

Now Right click on Edit action method and add view and paste the below Html

@model WebApplication7.Models.TblUser



@{

    ViewData["Title"] = "Edit";

}



<h1>Edit</h1>





<hr />

<div class="row">

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

        <form asp-action="Edit" enctype="multipart/form-data">

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

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

            <div class="form-group">

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

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

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

            </div>

            <div class="form-group">

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

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

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

            </div>

            <div class="form-group">

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

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

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

            </div>

            <div class="form-group">

              

                <img src="~/img/@Model.UProfilePicture" style="height:200px;width:200px" />

                <input type="file" name="file" />

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

            </div>

            <div class="form-group">

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

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

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

            </div>

            <div class="form-group">

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

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

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

            </div>

            <div class="form-group">

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

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

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

            </div>

            <div class="form-group">

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

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

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

            </div>

            <div class="form-group">

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

            </div>

        </form>

    </div>

</div>



<div>

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

</div>

Step# :5

 You need to make changes on Index.cshtml  to display Edit and Detail Button .

In the above image I have highlighted the  changes on Index.cshtml page, here is the code that you need to paste in place of old table.

<table class="table table-responsive">

                <thead>

                    <tr>

                        <th>ID</th>

                        <th>Image</th>

                        <th>

                            <a asp-action="Index" asp-route-sortOrder="@ViewData["NameSortParm"]"> <span class="glyphicon glyphicon-sort"> Name</span>  </a>


                        </th>

                        <th>Email</th>

                        <th>

                            <a asp-action="Index" asp-route-sortOrder="@ViewData["DateSortParm"]"> <span class="glyphicon glyphicon-sort"> Added Date</span>  </a>



                        </th>

                        <th>Is Login</th>

                        <th>Is Approved</th>

                        <th>Details</th>

                        <th>Edit</th>


                    </tr>

                </thead>


                <tbody>


                    @foreach (var item in Model)

                    {

                        <tr>

                            <td>@item.UId</td>

                            <td><img src="~/img/@item.UProfilePicture" style="height:70px;width:70px;" /></td>

                            <td>@item.UUserName</td>

                            <td>@item.UEmail</td>

                            <td>@item.UAddedDate</td>

                            <td>@item.UIsuserlogin</td>

                            <td>@item.UIsuseraproved</td>

                            <td>

                                <a asp-action="Details" class="btn btn-warning" asp-route-id="@item.UId">Details</a>


                            </td>

                            <td>

                                <a asp-action="Edit" class="btn btn-danger" asp-route-id="@item.UId">Edit</a>

                            </td>

                        </tr>

                    }

                </tbody>



            </table>

     

Conclusion:

There you go to edit records with Image .Thank you for reading ,Have a good day ! In the next article we will learn to add a drop-down from database value   in asp.net core.

Reference:

https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/new-field?view=aspnetcore-3.0&tabs=visual-studio