How to Upload Image And Display Image in Asp.Net Mvc

Make an Images folder

db 1st approach se banaye to hi sahi rahega error nhi ayega, d/b table me (id, title, ImagePath) take hi dena h bad me jab model create ho jayega tab  public HttpPostedFileBase ImageFile { get; set; } ye line add kar dena h

Models :-> 

Images.cs

 public class Images

    {

    public int ImageID { get; set; }

    public string Title { get; set; }

    [DisplayName("Upload File")]

    public string ImagePath { get; set; }

    public HttpPostedFileBase ImageFile { get; set; }

    }

Data :->

ApplicationDbContext.cs

 public class ApplicationDbContext : DbContext

    {

        public ApplicationDbContext()

            : base("name=MySqlConnection")

        {

        }

        public DbSet<Images> Images { get; set; }

    }

web.config

<connectionStrings>

<add name="MySqlConnection" connectionString="Data Source=DESKTOP-JJDFFJA\SQLEXPRESS;Integrated Security=true;Initial Catalog=ImagesDB" providerName="System.Data.SqlClient" />

</connectionStrings>

PCM(Package manager Console)

enable-migrations

add-migration addtable

update-database

ImagesController.cs

    public class ImageController : Controller

    {

        [HttpGet]

        public ActionResult Add()

        {

            return View();

        }

        [HttpPost]

        public ActionResult Add(Images imageModel)

        {

            string fileName = Path.GetFileNameWithoutExtension(imageModel.ImageFile.FileName);

            string extension = Path.GetExtension(imageModel.ImageFile.FileName);

            fileName = fileName + DateTime.Now.ToString("yymmssfff") + extension;

            imageModel.ImagePath = "~/Image/" + fileName;

            fileName = Path.Combine(Server.MapPath("~/Image/"), fileName);

            imageModel.ImageFile.SaveAs(fileName);

            using (DbModels db = new DbModels())

            {

                db.Images.Add(imageModel);

                db.SaveChanges();

            }

            ModelState.Clear();

            return View();

        }

        [HttpGet]

        public ActionResult View(int id)

        {

            Image imageModel = new Image();

            using (DbModels db = new DbModels())

            {

                imageModel = db.Images.Where(x => x.ImageID == id).FirstOrDefault();

            }

            return View(imageModel);

        }

    }

}

Add.cshtml

@model Uploadimage.Models.Image

@{

    ViewBag.Title = "Add";

}

<h2>Add</h2>

@using (Html.BeginForm("Add", "Image", FormMethod.Post, new {enctype = "multipart/form-data" }))

{

    @Html.AntiForgeryToken()

    

    <div class="form-horizontal">

        <h4>Image</h4>

        <hr />

        @Html.ValidationSummary(true)

        <div class="form-group">

            @Html.LabelFor(model => model.Title, new { @class = "control-label col-md-2" })

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

                @Html.EditorFor(model => model.Title)

                @Html.ValidationMessageFor(model => model.Title)

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.ImagePath, new { @class = "control-label col-md-2" })

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

                <input type="file" name="ImageFile" required></div>

        </div>

        <div class="form-group">

            <div class="col-md-offset-2 col-md-10">

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

            </div>

        </div>

    </div>

}

<div>

    @Html.ActionLink("Back to List", "Index")

</div>

@section Scripts {

    @Scripts.Render("~/bundles/jqueryval")

}

view.cshtml

@model Uploadimage.Models.Image

@{

    ViewBag.Title = "View";

}

<h2>View</h2>

<div>

    <h4>Image</h4>

<hr />

    <dl class="dl-horizontal">

        <dt>

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

        </dt>

        <dd>

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

        </dd>

        <dt>

            

        </dt>

        <dd>

            <img src="@Url.Content(Model.ImagePath)" width="250" height="250" multiple/>

        </dd>

    </dl>

</div>

<p>

    @Html.ActionLink("Edit", "Edit", new { id = Model.ImageID }) |

    @Html.ActionLink("Back to List", "Index")

</p>

https://www.youtube.com/watch?v=5L5W-AE-sEs&t=783s&ab_channel=CodAffection