Upload image usng MVC 4

How to upload Image File using MVC 4



step 1

 Add New Class in  ""Product" 

  public class Products
    {
        [Key]
        [Display(Name = "ProductId")]
        public int ProductId { get; set; }

         [Display(Name = "Name")]
        public string Name { get; set; }

         [Display(Name = "Price")]
        public string Price { get; set; }

         [Display(Name = "Image")]
        public string Image { get; set; }

         public int CREATED_BY_ID { get; set; }

         public DateTime CREATED_DATE { get; set; }

         public int UPDATED_BY_ID { get; set; }

         public DateTime UPDATED_DATE { get; set; }
    }

 ------ View ------ Index


@model bootstrap_searching.Models.Products
@{
    Layout = null;
}

 <!DOCTYPE html>

 <html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)

         @Html.HiddenFor(model => model.CREATED_DATE)
        @Html.HiddenFor(model => model.UPDATED_DATE)
        @Html.HiddenFor(model => model.CREATED_BY_ID)
        @Html.HiddenFor(model => model.UPDATED_BY_ID)

         <fieldset>
            <div>
                <div>
                    @Html.LabelFor(model => model.Name)
                </div>
                <div>
                    @Html.TextBoxFor(Model => Model.Name)
                    @Html.ValidationMessageFor(model => model.Name)
                </div>
            </div>

             <div>
               <div>
                    @Html.LabelFor(model => model.Price)
                </div>
                <div>
                    @Html.TextBoxFor(Model => Model.Price)
                    @Html.ValidationMessageFor(model => model.Price)
                </div>
            </div>

             <div>
                <div>
                    @Html.LabelFor(model => model.Image)
                </div>
                <div>
                   <input type="file" name="Image" accept="image/gif, image/jpg, image/jpeg, image/png" />
                    @Html.ValidationMessageFor(model => model.Image)
                </div>
            </div>
            <div>
                <div>
                   <input type="submit" name="Save" id="submitSave" />
                </div>
            </div>
        </fieldset>
    }
</body>
</html>



---------------- end

 Your page looks like this




 * your controller should have action method which would accept HttpPostedFileBase;
----------- Controller ------ start

MainModel objModel = new MainModel();

 [HttpGet]   
public ActionResult Index()
        {
            return View();
        }

[HttpPost]
        public ActionResult Index(Products objProducts, HttpPostedFileBase Image)
        {
            Products newProduct = new Products();

             if (Image != null)
            {
                string ext = Path.GetExtension(Image.FileName).ToLower();
                if (ext == ".gif" || ext == ".jpg" || ext == ".jpeg" || ext == ".png" || ext == ".bmp")
                {
                    string filename = "Product" + DateTime.Now.ToString().Replace(":", "").Replace("/", "").Replace(" ", "") + ext;
                    Image.SaveAs(Server.MapPath("~/UploadData/Product/") + filename);
                    objProducts.Image = "/UploadData/Product/" + filename;
                }
            }
            else
            {
                objProducts.Image = objProducts.Image == "" ? "" : objProducts.Image;
            }
            newProduct.Name = objProducts.Name;
            newProduct.Price = objProducts.Price;
            newProduct.Image = objProducts.Image;
            newProduct.CREATED_DATE = DateTime.Now;
            newProduct.CREATED_BY_ID = 1;
            newProduct.UPDATED_DATE = DateTime.Now;
            newProduct.UPDATED_BY_ID = 1;
            objModel.Products.Add(newProduct);
            objModel.SaveChanges();
            return View("Index");
        }

------------------ end
Result :



Comments

Post a Comment

Popular posts from this blog

Tree view in winforms using c#

Image
Tree view in c# ms sqlserver 2008(database) __________________________ step 1 _________ CREATE TABLE [dbo].[myTable]( [ID] [int] IDENTITY(1,1) NOT NULL, [title] [varchar](255) NOT NULL, [parentID] [int] NULL,  CONSTRAINT [PK_myTable] PRIMARY KEY CLUSTERED  ( [ID] ASC )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY] ) ON [PRIMARY] step 2 _________ INSERT INTO myTable(title, parentID) VALUES('Microsoft', NULL) INSERT INTO myTable( title, parentID) VALUES('C#', 1) INSERT INTO myTable( title, parentID) VALUES('VB.net', 1) INSERT INTO myTable( title, parentID) VALUES('Open Source', NULL) INSERT INTO myTable( title, parentID) VALUES('Python', 4) INSERT INTO myTable( title, parentID) VALUES('Ruby', 4) INSERT INTO myTable( title, parentID) VALUES('PHP', 4) INSERT INTO myTable( title, parentID) VALUES('Perl...
Read more

how to Replace null value with 0 Using C#

how to Replace null value with 0 Using C# //here we suppose that objDataTable have data collection as table now access this //datatable object. decimal  j = 0;  j = objDataTable.Rows[0]["Qty"] ==  DBNull .Value ? 0 :  Convert .ToDecimal(objDataTable.Rows[0]["Qty"]); NOTE :- //if   DBNull.value is null  then   "0 " else  "your code here")  // ? = then // : = else Thank You [Sumit Singh Shekhawat]
Read more

how to fetch all HTML Table Records and modify all records accordingly using jquery and Javascript

In my example, I have fetch HTML Table Records and Convert to Class List Object for C# Result: Click Here < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js" ></ script > < script >   $ ( document ). ready ( function () {     // Get the table element     const table = document . getElementsByTagName ( "table" )[ 0 ];     // Get all the table rows     const rows = table . rows ;     // Create an empty array to store the table data     const data = [];     // Loop through each row and get the cell data     for ( let i = 0 ; i < rows . length ; i ++) {       const cells = rows [ i ]. cells ;       const rowData = {};       //new Columns { CharacterName = "", Char = "", Code = "", Decimal = "", Binary = "", Hex = "" },       var stringCon = "new Columns {" ;       /...
Read more