How to Add New Records in Sql Server Table and Upload Image in asp.net core MVC C# (db First Approach EF-CORE) (Part-7)

Hello & As-salam u alikum ! , In this article we will learn to add new Records in Sql server Table and Upload Image on server.

Note : For Beginner Guide Articles :

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

Step# 1:  

Watch previous article for applying Pagination and display data on asp.net core view page from sql server table.

https://dotnetcorecommunity.blogspot.com/2019/10/how-to-implement-pagination-in-aspnet.html

Step# 2:  

Go to View--->Custom--> Index.cshtml

and Paste the below html to add a new button which will navigate you to a new page for adding new records.

--------------------------------------------------------------------------------------------------------

 <a asp-action="Create" class="btn btn-primary btn-block">Create New</a>

--------------------------------------------------------------------------------------------------------

Step# 2:  

Go to Controller and add a new method named as Create and paste the following code.

------------------------------------------------------------------------------------------------------

[HttpGet]

        public IActionResult Create()

        {

            TblUser u = new TblUser();

            return View(u);

        }

        [HttpPost]

        public async Task<IActionResult>  Create(TblUser ui, IFormFile file)

        {

            TblUser u = new TblUser();

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

            {

                u.UProfilePicture = "noimage.png";

            }

            else

            {

                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;

             db.TblUser.Add(u);

            await db.SaveChangesAsync();

            return RedirectToAction("Index");

        }

------------------------------------------------------------------------------------------------------

Http Get Method: 

Http Post Method: 

This Highlighted Code represents the Image Uploading Code.

Step# 3:  

Now  Right Click on Create Action method and click on Add view & add a new page named As Create and paste the following HTML code.

----------------------------------------------------------------------------------------------------

@model WebApplication7.Models.TblUser

@{

    ViewData["Title"] = "Create";

}

<h1 style="text-align:center">Add New User</h1>

<hr />

<div class="row">

    

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

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

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

            <div class="form-group">

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

                

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

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

            </div>

            <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" type="password" 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">

                <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="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="Create" class="btn btn-primary" />

            </div>

        </form>

    </div>

</div>

<div>

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

</div>

----------------------------------------------------------------------------------------------------

Conclusion:

There you go to Add new records with Image .Thank you for reading ,Have a good day ! In the next article we will learn to apply Edit records  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