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>

}

Seach Engine in MVC3 or AutoComplete Method in MVC3 Or Cascading Drop Down in MVC3 Or Search Engine And Display Data in MVC3

Search Engine in MVC3 or

AutoComplete Method and Cascading Dropdown in MVC3 Or AutoComplete And Search Data And Display in View 

AutoComplete Method and Cascading Dropdown According the search method in MVC3.

I’m going to create two tables in Entity frame work. Employee and Department Tables. Here according the employee name search department will be cascade and displaying the details in a web grid view.

Tables Data:  

Employee:

Emp_Id int(pk)

Emp_Name   varchar2(50)

Designation varchar2(50)

Emp_Email_Id   varchar2(50)

Dept_Id   int

2) Department

Dept_Id int(pk)

Dept_Name varchar2(50)

Name of Connection sting for entity framework.

MVC3JoinsEntities db = new MVC3JoinsEntities();

In Model class I’m creating a two class for data searching employees.

Model Class:

public class EmployeeDept

    {

        public int Employee_ID { get; set; }

        public string Employee_Name { get; set; }

        public string Emp_Designtion { get; set; }

        public string Employee_Emial_ID { get; set; }

        public int Department_Id { get; set; }

        public string Dept_Name { get; set; }

    }

    public class SearchEmployee

    {

        public string SearchType { get; set; }

        [Display(Name = "Search Text")]

        public string searchText { get; set; }

        public int? Dept_Id { get; set; }

    }

Controller Class ::

Displaying the results and search the employee name and display results.

public ActionResult Index(SearchEmployee model)

        {

            var EmpList = (from em in db.Employees

                           join dep in db.Departments on em.Dept_Id equals dep.Dept_Id into gd

                           from gd2 in gd.DefaultIfEmpty()

                           select new EmployeeDept

                           {

                               Employee_ID =em.Emp_Id,

                               Employee_Name = em.Emp_Name,

                               Emp_Designtion = em.Designation,

                               Employee_Emial_ID = em.Emp_Email_Id,

                               Department_Id = gd2.Dept_Id,

                               Dept_Name = gd2.Dept_Name,

                           });

            Session["EmployeeList"] = EmpList.ToList();

            if (model.Dept_Id != null)

            {

                EmpList = EmpList.Where(m => m.Department_Id == model.Dept_Id && m.Employee_Name.Contains(model.searchText));

                Session["EmployeeList"] = EmpList.ToList();

              

            }

            TempData["EmployeeListSearchModel"] = model;

            ViewBag.EmpList = new SelectList(EmpSearchList(), "Value", "Text");

            EmployeeDept emd = new EmployeeDept();

            var Dept = db.Departments.Select(dd => new { dd.Dept_Id, dd.Dept_Name });

            @ViewBag.DeptList = new SelectList(Dept.AsEnumerable(), "Dept_Id", "Dept_Name",0);

            return View();

        }

        public ActionResult SearchModel(SearchEmployee model)

        {

            var EmpList = (from em in db.Employees

                           join dep in db.Departments on em.Dept_Id equals dep.Dept_Id into gd

                           from gd2 in gd.DefaultIfEmpty()

                           select new EmployeeDept

                           {

                               Employee_ID = em.Emp_Id,

                               Employee_Name = em.Emp_Name,

                               Emp_Designtion = em.Designation,

                               Employee_Emial_ID = em.Emp_Email_Id,

                               Department_Id = gd2.Dept_Id,

                               Dept_Name = gd2.Dept_Name,

                           });

            Session["EmployeeList"] = EmpList.ToList();

            EmpList = EmpList.Where(m => m.Department_Id == model.Dept_Id && m.Employee_Name.Contains(model.searchText));

            Session["EmployeeList"] = EmpList.ToList();

            return View();

        }

        public ActionResult Search(SearchEmployee model)

        {

            SearchModel(model);

            return RedirectToAction("Index", model);

        }

Employee Search List :

        private List<SelectListItem> EmpSearchList()

        {

            var options = new List<SelectListItem>();

            options.Add(new SelectListItem { Value = "Emp_Name", Text = "Empire Name" });

            options.Add(new SelectListItem { Value = "Dept_Id", Text = "Dept Id" });           

            return options;

        }

Employee Autosuggestions :

        public JsonResult AutocompleteSuggestions(string term, string Emp)

        {

            if (Emp != null && Emp != "")

            {

                int EmpId = Convert.ToInt32(Emp);

               

                var suggestions = from u in db.Employees

                                  //join dd in db.Departments on u.Dept_Id equals dd.Dept_Id

                                  where u.Emp_Id == EmpId

                                  select u.Emp_Name;

                var namelist = suggestions.Where(ml => ml.ToUpper().StartsWith(term.ToUpper())).Distinct();

                return Json(namelist, JsonRequestBehavior.AllowGet);

            }

            else

            {

                var suggestions = from u in db.Employees

                                  select u.Emp_Name;

                var namelist = suggestions.Where(ml => ml.ToUpper().StartsWith(term.ToUpper())).Distinct();

                return Json(namelist, JsonRequestBehavior.AllowGet);

            }

        }

Department List cascading According Autosuggestion of employee list:

        public JsonResult EmployeeDeptDropDownList(string DeptName)

        {

            var Dept = from m in db.Employees

                        join g in db.Departments on m.Dept_Id equals g.Dept_Id

                        select new

                        {

                            Emp = m.Emp_Name,

                            DeptsName = g.Dept_Name,

                            DeptId  = g.Dept_Id,

                        };

            var SelectedDept = Dept.Where(m => m.Emp.ToUpper().Equals(DeptName.ToUpper()));

            return Json(SelectedDept, JsonRequestBehavior.AllowGet);

        }

Dropdown List Binding :

        private void DeptList(EmployeeDept upd)

        {

            var Grade = db.Departments.Select(gz => new { gz.Dept_Id, gz.Dept_Name });

            @ViewBag.EmpList = new SelectList(Grade.AsEnumerable(), "Dept_Id", "Dept_Name", 0);

        }

View :

Index :

@{

    ViewBag.Title = "Index";

}

<script type="text/javascript" src="@Url.Content("~/content/js/custom.js")"></script>

<script type="text/javascript" src="@Url.Content("~/content/js/jquery-ui-1.10.0.custom.js")"></script>

<style>

   

#main {

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

}

    .create {

    margin: 20px 0 0 0px;

    width: 100%;

}

    .grid tr td:nth-child(7)

    {

        text-align: center;

    }

   

    .grid { margin:0 auto;}

   

.grid_footer {

   

    margin-top: 25px;

}

.grid_footer1 {

    margin-left: 50px;

    margin-top: 20px;

}

.emp_row { width:100px;}

.emp_desig {width:150px;}

.mailid_row {width:120px;}

.dept_id_row {width:60px;}

.dept_name_row {width:80px;}

</style>

<div>

    <div>

        <h3>

            Employee</h3>

        @Html.Partial("SearchEmployeeList", TempData["EmployeeListSearchModel"])

    </div>

    <div id="umpire_tble">

        @{

            if (Session["EmployeeList"] != null)

            {

                <br />

            <br />

                var listOfProducts = (List<JoinsView.Models.EmployeeDept>)Session["EmployeeList"];

              

            <div style="float: left; text-align: left; background-color: White; width: 80%">

            </div>

           

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

                var columns = new List<WebGridColumn>();

                // The column would be visible to all users 

                columns.Add(grid.Column("Employee_Name", "Emp Name", canSort: true, style: "emp_row"));

                columns.Add(grid.Column("Emp_Designtion", "Employee Desig.", canSort: true, style: "emp_desig"));

                columns.Add(grid.Column("Employee_Emial_ID", "Emp Email Id.", canSort: true, style: "mailid_row"));

                columns.Add(grid.Column("Department_Id", "Dept Id", canSort: true, style: "dept_id_row"));

                columns.Add(grid.Column("Dept_Name", "Dept Name", canSort: true, style: "dept_name_row"));

               

                // The column would be not display only to users       

                // in the user role    

            

                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>

            }

            else

            {

            <div class="error_message_signin" style="margin-left: 8px; margin-bottom: 8px;">

                <span style="color: #FF0000">@TempData["_RecordnotFoundMessage"]</span>

            </div>

            } }

    </div>

</div>

Partial View For According to display search by employee..

@model JoinsView.Models.SearchEmployee

@{

    ViewBag.Title = "SearchEmployeeList.cshtml";

}

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

<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>

<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />

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

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

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

          

<script type="text/javascript">

    $(function () {

        $("#SearchText").focus(function () {

            var Dept = $("#ddl").val();

            $("#SearchText").autocomplete({

                source: "/Employees/AutocompleteSuggestions/?Emp=" + Dept,

                minLength: 1,

                select: function (event, ui) {

                    if (ui.item) {

                        $("#SearchText").val(ui.item.value);

                        //                    $("form").submit();

                        var selectedValue = ui.item.value;

                        var url = "/Employees/EmployeeDeptDropDownList";

                        $.ajax({

                            type: "GET",

                            url: url,

                            data: { DeptName: selectedValue },

                            contentType: "application/json; charset=utf-8",

                            dataType: "json",

                            success: function (result) {

                                var items = "";

                                var selectedDept = "";

                                $.each(result, function (i, val) {

                                    items += "<option value='" + val.DeptName + "'>" + val.Dept + "</option>";

                                    selectedDept = val.Dept;

                                });

                                $("#ddl option").each(function () {

                                    if ($(this).text() == selectedDept) {

                                        $(this).attr('selected', 'selected');

                                    }

                                });

                                //$("form").submit();

                            }

                        });

                    }

                }

            });

        });

    });

</script>

<style>

    .ui-autocomplete {

        cursor: default;

        max-height: 200px;

        overflow-y: scroll;

        width:150px;

        overflow-x:auto;

    }

/* IE 6 doesn't support max-height

 * we use height instead, but this forces the menu to always be this tall

 */

    * html .ui-autocomplete {

        height: 200px;

    }

</style>

@{ Html.EnableClientValidation(); }

@using (Html.BeginForm("Search", "Employees", FormMethod.Post))

{

    <table cellpadding="0" cellspacing="0" border="0" id="umpire_list">          

            <tr>

                <td style="font-weight: bold;"> Search By &nbsp;&nbsp;&nbsp;</td>

                <td class="search_td1">

                    <label>Employee Name:&nbsp;&nbsp;</label>

                    @Html.TextBox("SearchText", null, new { @class = "mr_bot_0", id = "SearchText", style = "width: 170px; margin-right:10px;" })

                </td>

                <td class="search_td">

                    <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Deptartment: &nbsp;&nbsp;</label>

                     @Html.DropDownListFor(model => model.Dept_Id, (IEnumerable<SelectListItem>)ViewBag.DeptList, "--Select--", new { id = "ddl", @onchange = "hideTextBox(this)", style = "width: 100px !important" })                    

                </td>

                <td class="search_td" valign=middle>

                    <input id="search" name="search" onclick="return validate();" type="submit" value="" class="search_icon" style="margin-left: 10px;margin-top:-7px;" />

                </td>

            </tr>

        </table>

}