Image Upload and View in MVC3 Or Upload Image and Display in Web Grid using Entity Framework in MVC3

Image Upload and View in MVC3 Or Upload Image and Display in Web Grid using Entity Framework in MVC3

Model Class:

public class Crickaters

    {

        public int? Crckt_ID { get; set; }

        public string  PlayerName { get; set; }

        public string Photo { get; set; }

        public string TeamName { get; set; }

        public int? RefrenceId { get; set; }

    }

Player Create Controller Class :

public ActionResult PlayerCreate()

        {

            return View();

        }

        [HttpPost]

        public ActionResult PlayerCreate(Crickaters model, HttpPostedFileBase file)

        {

            string path = "";

            string fileextension = "";

            if (file != null && file.ContentLength > 0)

            {

                if ((file.ContentType == "image/jpeg") || (file.ContentType == "image/gif") || (file.ContentType == "image/png"))//check allow jpg, gif, png

                {

                    fileextension = Path.GetExtension(file.FileName);

                    string directory = Server.MapPath("~/Content/UploadImages/Players/");

                    if (!Directory.Exists(directory))

                    {

                        Directory.CreateDirectory(directory);

                    }

                    path = Path.Combine(Server.MapPath(Url.Content("~/Content/UploadImages/Players/")), "Player" + model.RefrenceId + fileextension);

                    file.SaveAs(path);//Save image to signature folder in Application.

                }

                else

                {

                   // TempData["MessageScorer"] = Resources.Messages.InvalidImage;

                }

            }

              PlayersDetail pd = new PlayersDetail();             

              pd.Player_Name = model.PlayerName;

              pd.Player_Photo = "Player" + model.RefrenceId + fileextension; ;

              pd.Team_Name = model.TeamName;

              pd.Reference_Id = model.RefrenceId;

              db.PlayersDetails.AddObject(pd);

              db.SaveChanges();

              return RedirectToAction("Index");

        }

Create A View:

@model ImageUpload.Models.Crickaters

@{

    ViewBag.Title = "PlayerCreate";

}

<h2>PlayerCreate</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

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

{

    @Html.ValidationSummary(true)

    <fieldset>

        <legend>Crickaters</legend>

        <div class="editor-label">

            @Html.LabelFor(model => model.PlayerName)

        </div>

        <div class="editor-field">

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

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

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.Photo)

        </div>

         <div class="editor-field">

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

                    <input id="file1S" type="file" name="file" onchange="readURL(this);" class="Class"

                        style="width: 119px; left: 238px; position: absolute; top: 41px; visibility: hidden;" />

                </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.TeamName)

        </div>

        <div class="editor-field">

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

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

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.RefrenceId)

        </div>

        <div class="editor-field">

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

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

        </div>

        <p>

            <input type="submit" value="Create" />

        </p>

    </fieldset>

}

<div>

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

</div>

View display :

@model ImageUpload.Models.Crickaters

@{

    ViewBag.Title = "Index";

}

<style>

    #main {

    padding: 20px 20px 30px 0 !important;

}

    .grid tr td:nth-child(7)

    {

        text-align: center;

    }

   

    .grid { margin:0 auto;}

.grid_footer {

   

    margin-top: 25px;

}

.grid_footer1 {40+

0    margin-left: 50px;

    margin-top: 20px;

}

.plid_row { width:95px;}

.mobnum_row {width:70px;}

.ref_row {width:70px;}

.playername_row {width:1 30px;}

.teamname_row {width:70px;}

.header_row_Name {width:70px;}

.image_row {width:120px;}

.header_Actions {width:36x;}

</style>

@Html.ActionLink("Add Player ", "PlayerCreate", null, new { @class = "" })

<h2>Index</h2>

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

{

    var listOfProducts = (List<ImageUpload.Models.Crickaters>)Session["PlayerView"];

    var grid = new WebGrid(source: (List<ImageUpload.Models.Crickaters>)Session["PlayerView"], canPage: true, rowsPerPage: 5);

    var columns = new List<WebGridColumn>();

    columns.Add(grid.Column("Crckt_ID", "Cricketrs Id", canSort: true, style: "plid_row"));

    columns.Add(grid.Column("PlayerName", "Players Name", canSort: true, style: "playername_row"));

    columns.Add(grid.Column("Photo", header: "Image", format: @<text><img style=" text-align: center;margin: 0 10px;" src="../../Content/UploadImages/Players/@item.Photo" alt="@item.Photo" width="60px" height="60px"></img></text>, style: "image_row"));

    columns.Add(grid.Column("TeamName", "TeamName", canSort: true, style: "teamname_row"));

    columns.Add(grid.Column("RefrenceId", "RefrenceId", canSort: true, style: "ref_row"));

    columns.Add(grid.Column(header: "Edit", format: (item) =>

                   {

                       return Html.Raw(

                       string.Format("<text class=\"req_ico\"> <a href=\"{1}\"><img src=\"{0}\" Title=\"Edit\" alt=\"Image\"/></a>  </text>", Url.Content("~/Content/images/Edit.png"), Url.Action("PlayerEdit", new { id = item.Crckt_ID }))

                       );

                   }

                   , style: "header_Actions"));

    var pager = grid.Pager(mode: WebGridPagerModes.All, numericLinksCount: 7,

                            firstText: "<< First",

                            previousText: "< Prev",

                            nextText: "Next >",

                            lastText: "Last >>").ToString();

    var newPager = System.Text.RegularExpressions.Regex.Replace(pager, "(\\d+) ", "<span class='current'>$1</span>");

    var grid1 = grid.GetHtml(tableStyle: "grid", footerStyle: "grid_footer1", mode: WebGridPagerModes.All, numericLinksCount: 7,

                            firstText: "<< First",

                            previousText: "< Prev",

                            nextText: "Next >",

                            lastText: "Last >>",

    columns: grid.Columns(grid.Columns(columns.ToArray()))).ToString();

    grid1 = System.Text.RegularExpressions.Regex.Replace(grid1, "<tfoot>([^<]*|<[^/]*|</[^t]*)*</tfoot>", "");

             

                          

            @(new HtmlString(grid1))

            <div class="grid_footer">

                @(new HtmlString(newPager))

            </div>

}