Apr 12, 2018

MVC - Strongly Typed - Drop Down - Checkbox - Partial View - image - Approve - Multiselect - Remote Validation - Unobtrusive Validation

Models

    public class User1
    {
        public int User_ID { get; set; }

        [Required(ErrorMessage = "Required..")]
        public string FName { get; set; }

        [Required(ErrorMessage = "Required..")]
        public string LName { get; set; }

        [Required(ErrorMessage = "Required..")]
        public string Mobile { get; set; }

        [RegularExpression("^[a-zA-Z0-9_\\.-]+@([a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,6}$", ErrorMessage = "E-mail is not valid")]
        [Remote("IsUserExists", "Home", HttpMethod = "POST", ErrorMessage = "User name Already taken...")]
        public string Email { get; set; }

        public string Gender { get; set; }

        public string ImageUrl { get; set; }

        public string isApproved { get; set; }

        public List<GameType1> GameTypeList { get; set; }
        public int GameTypeId { get; set; }

        public List<SelectListItem> GameList1 { get; set; }
        public IList<int> GameSelected { get; set; }

        public List<GameList1> GameList2 { get; set; }
        public string GameList { get; set; }
    }

    public class GameType1
    {
        public bool Selected { get; set; }
        public int GameType_Id { get; set; }
        public string GameType { get; set; }
    }

    public class GameList1
    {
        public int Game_Id { get; set; }
        public string GameName { get; set; }
        public bool IsTrue { get; set; }
    }

Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Reg_Img_Approve.Models;
using System.IO;

namespace Reg_Img_Approve.Controllers
{
    public class HomeController : Controller
    {
        Reg_MultiSelectEntities _dbContext = new Reg_MultiSelectEntities();
        public ActionResult Index()
        {
            User1 user1 = new User1();
            List<GameType1> info1 = (from a in _dbContext.tblGameTypes
                                     select new GameType1
                                     {
                                         GameType_Id = a.GameType_ID,
                                         GameType = a.GameType
                                     }).ToList();
            user1.User_ID = 0;
            user1.GameTypeList = info1;
            user1.GameTypeId = 1;
            user1.GameList1 = new List<SelectListItem>();
            return View(user1);
        }

        [HttpPost]
        public ActionResult addEditUserDetail(User1 model, HttpPostedFileBase files)
        {
            string path1 = "";
            if (model.User_ID == 0)
            {
                var image = files;
                if (image != null)
                {
                    //string extension1 = Path.GetExtension(image.FileName);
                    //var filename1 = n.ToString() + extension1;
                    path1 = Path.Combine(Server.MapPath("~/Upload/"), image.FileName);
                    model.ImageUrl = "Upload/" + image.FileName; ;
                }
                var user1 = new tblUser()
                {
                    FName = model.FName,
                    LName = model.LName,
                    Email = model.Email,
                    Mobile = model.Mobile,
                    Gender = model.Gender,
                    isApproved = 2,
                    ImageUrl = model.ImageUrl
                };
                _dbContext.tblUsers.Add(user1);
                foreach (var item in model.GameSelected)
                {
                    var data1 = new tblUserGame()
                    {
                        User_ID = user1.User_ID,
                        Game_ID = item
                    };
                    _dbContext.tblUserGames.Add(data1);
                }


                image.SaveAs(path1);
                _dbContext.SaveChanges();

            }
            else
            {
                try
                {
                    var user1 = _dbContext.tblUsers.FirstOrDefault(x => x.User_ID == model.User_ID);
                    var image = files;
                    if (image != null)
                    {
                        path1 = Path.Combine(Server.MapPath("~/Upload/"), image.FileName);
                        model.ImageUrl = "Upload/" + image.FileName;
                    }
                    var user2 = new tblUser()
                    {
                        User_ID = model.User_ID,
                        FName = model.FName,
                        LName = model.LName,
                        Email = model.Email,
                        Mobile = model.Mobile,
                        Gender = model.Gender,
                        isApproved = int.Parse(model.isApproved),
                        ImageUrl = model.ImageUrl
                    };
                    _dbContext.Entry(user1).CurrentValues.SetValues(user2);
                    //_dbContext.SaveChanges();
                    List<int> GameSelected = _dbContext.tblUserGames.Where(p => p.User_ID == model.User_ID).Select(p => p.Game_ID).ToList(); ;


                    if (model.GameSelected != null)
                    {
                        foreach (var item in model.GameSelected)
                        {
                            if (!GameSelected.Contains(item))
                            {
                                var data2 = new tblUserGame()
                                {
                                    User_ID = user1.User_ID,
                                    Game_ID = item
                                };
                                _dbContext.tblUserGames.Add(data2);
                            }
                        }

                        foreach (var item in GameSelected)
                        {
                            if (!model.GameSelected.Contains(item))
                            {
                                var data3 = _dbContext.tblUserGames.FirstOrDefault(x => x.User_ID == model.User_ID && x.Game_ID == item);
                                _dbContext.tblUserGames.Remove(data3);
                            }
                        }
                    }
                    else
                    {
                        foreach (var item in GameSelected)
                        {
                            var data3 = _dbContext.tblUserGames.FirstOrDefault(x => x.User_ID == model.User_ID && x.Game_ID == item);
                            _dbContext.tblUserGames.Remove(data3);
                        }
                    }

                    if (path1 != "")
                        image.SaveAs(path1);
                    _dbContext.SaveChanges();
                }
                catch (Exception ex) { }
            }
            var result = new { Success = "False", Message = "Error Message" };
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        public ActionResult getGameList(string gameTypeId, string userId)
        {
            List<SelectListItem> gameLists1 = new List<SelectListItem>();
            List<int> GameSelected = new List<int>();
            try
            {
                if (userId != null && userId != "")
                {
                    int userID = int.Parse(userId);
                    GameSelected = _dbContext.tblUserGames.Where(p => p.User_ID == userID).Select(p => p.Game_ID).ToList();
                }
                int n = int.Parse(gameTypeId);
                gameLists1 = (from a in _dbContext.tblGames.Where(x => x.GameType_ID == n)
                              select new SelectListItem
                              {
                                  Value = a.Game_ID.ToString(),
                                  Text = a.GameName,
                                  Selected = GameSelected.Contains(a.Game_ID)
                              }).ToList();
            }
            catch (Exception ex) { }
            return PartialView("~/Views/Home/_partialGameList.cshtml", gameLists1);
        }

        public ActionResult loadUserGrid()
        {
            List<tblUser> userData1 = new List<tblUser>();
            List<User1> userData2 = new List<User1>();
            try
            {
                userData1 = _dbContext.tblUsers.ToList();

                foreach (var item in userData1)
                {
                    List<int> GameSelected = _dbContext.tblUserGames.Where(p => p.User_ID == item.User_ID).Select(p => p.Game_ID).ToList();
                    List<tblGame> gameList = (_dbContext.tblGames.Where(x => GameSelected.Contains(x.Game_ID))).ToList();
                    var data = new User1
                    {
                        User_ID = item.User_ID,
                        FName = item.FName,
                        Email = item.Email,
                        Mobile = item.Mobile,
                        ImageUrl = item.ImageUrl,
                        isApproved = item.isApproved.Value.ToString(),
                        GameList = string.Join(" , ", gameList.Select(x => x.GameName))
                    };
                    userData2.Add(data);
                }
            }
            catch (Exception ex) { }
            return Json(new { data = userData2 }, JsonRequestBehavior.AllowGet);
        }

        public string RetrieveImage1(string id)
        {
            int ID = int.Parse(id);
            string imagePath = (from temp in _dbContext.tblUsers where temp.User_ID == ID select temp.ImageUrl).FirstOrDefault();
            if (imagePath != null)
            {
                return "~/Upload/" + imagePath;
            }
            else
            {
                return "~/Upload/default.png";
            }
        }

        public ActionResult getUserData(string id)
        {
            tblUser user = new tblUser();
            User1 user1 = new User1();

            int GameType_ID1 = 0;
            try
            {
                int n = int.Parse(id);
                user = _dbContext.tblUsers.FirstOrDefault(x => x.User_ID == n);

                List<GameType1> info1 = (from a in _dbContext.tblGameTypes
                                         select new GameType1
                                         {
                                             GameType_Id = a.GameType_ID,
                                             GameType = a.GameType
                                         }).ToList();

                List<int> gamesId = (from a in _dbContext.tblUserGames.Where(x => x.User_ID == n) select a.Game_ID).ToList();
                List<int> GameType_ID = (from a in _dbContext.tblGames.Where(x =>gamesId.Contains(x.Game_ID)) select a.GameType_ID.Value).ToList() ;
                
                GameType_ID1 = GameType_ID.Count != 0 ? GameType_ID[0] : 1;
                user1.User_ID = user.User_ID;
                user1.FName = user.FName;
                user1.LName = user.LName;
                user1.Mobile = user.Mobile;
                user1.Email = user.Email;
                user1.Gender = user.Gender;
                user1.GameTypeList = info1;
                user1.GameTypeId = GameType_ID1;
                user1.ImageUrl = user.ImageUrl;

                user1.GameSelected = _dbContext.tblUserGames.Where(p => p.User_ID == user.User_ID).Select(p => p.Game_ID).ToList();
                List<SelectListItem> gameLists1 = new List<SelectListItem>();
                gameLists1 = (from a in _dbContext.tblGames.Where(x => x.GameType_ID == GameType_ID1)
                              select new SelectListItem
                              {
                                  Value = a.Game_ID.ToString(),
                                  Text = a.GameName,
                                  Selected = user1.GameSelected.Contains(a.Game_ID)
                              }).ToList();

                user1.GameList1 = gameLists1;
            }
            catch (Exception ex) { }
            return PartialView("_partialUserAdd", user1);
        }

        [HttpPost]
        public ActionResult creatApproveMemberList(string[] memberIDs)
        {
            try
            {
                foreach (string id in memberIDs)
                {
                    string[] words = id.Split('_');

                    if (words[1] == "A")
                    {
                        int id1 = int.Parse(words[0]);
                        var user1 = _dbContext.tblUsers.FirstOrDefault(x => x.User_ID == id1);
                        user1.isApproved = 1;
                        _dbContext.SaveChanges();

                        //Guid memberId = Guid.Parse(words[0]);
                        //Gang_MemberDetails member1 = _dbContext.Gang_MemberDetails.FirstOrDefault(x => x.MemberId == memberId);
                        //member1.MemberStatus = 1;
                        //member1.ReviewbyAgentId = User.Identity.GetUserId();
                        //member1.ReviewDate = DateTime.Today;
                        //_dbContext.SaveChanges();
                    }
                    else
                    {
                        int id1 = int.Parse(words[0]);
                        var user1 = _dbContext.tblUsers.FirstOrDefault(x => x.User_ID == id1);
                        user1.isApproved = 0;
                        _dbContext.SaveChanges();
                    }
                }
            }
            catch (Exception ex) { }
            return Json(new { success = true, responseText = "Your message successfuly sent!" }, JsonRequestBehavior.AllowGet);
        }


        [HttpPost]
        public JsonResult IsUserExists(string Email)
        {
            bool isValid = !_dbContext.tblUsers.Any(x => x.Email == Email);
            return Json(isValid, JsonRequestBehavior.AllowGet);
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

Views

_Layout.cshtml


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/jqueryval")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

   
    @RenderSection("scripts", required: false)
</body>
</html>

Index.cshtml

@model Reg_Img_Approve.Models.User1
@{
    ViewBag.Title = "Home Page";
}

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>
<link href="~/Content/jquery.growl.css" rel="stylesheet" />
<script src="~/Scripts/jquery.growl.js"></script>

<div class="row">
    <div class="col-sm-12">
        <div id="addModalUser">
            @if (Model == null)
            {
                Html.RenderPartial("_partialUserAdd", new Reg_Img_Approve.Models.User1());
            }
            else
            {
                Html.RenderPartial("_partialUserAdd", Model);
            }
        </div>
    </div>
</div>
<div class="row" style="background-color:#f5f5f5;margin-bottom:5px;">
    &nbsp;
</div>
<div class="row">
    <div class="col-sm-12">
        <div id="UserGrid">
            @Html.Partial("_partialUserGrid")
        </div>
    </div>
</div>


_partialUserAdd.cshtml

@model Reg_Img_Approve.Models.User1

@using (Html.BeginForm("addEditUserDetail", "Home", FormMethod.Post, new { @id = "frm_User_Modal", @ReturnUrl = ViewBag.ReturnUrl }))
{
    @Html.HiddenFor(m => m.User_ID)
    @Html.HiddenFor(m => m.isApproved)
    @Html.HiddenFor(m => m.ImageUrl)
    <h2>Game User Form</h2>
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-12">
                    <label for="">FirstName</label>
                    @Html.TextBoxFor(model => model.FName, new { @class = "form-control", @placeholder = "Enter.." })
                    @Html.ValidationMessageFor(m => m.FName, "", new { @class = "text-danger" })
                </div>
                <div class="col-sm-12">
                    <label for="">LastName</label>
                    @Html.TextBoxFor(model => model.LName, new { @class = "form-control", @placeholder = "Enter.." })
                    @Html.ValidationMessageFor(m => m.LName, "", new { @class = "text-danger" })
                </div>
                <div class="col-sm-12">
                    <label for="">PhoneNo</label>
                    @Html.TextBoxFor(model => model.Mobile, new { @class = "form-control", @placeholder = "Enter.." })
                    @Html.ValidationMessageFor(m => m.Mobile, "", new { @class = "text-danger" })
                </div>
                <div class="col-sm-12">
                    <label for="">Email</label>
                    @Html.TextBoxFor(model => model.Email, new { @class = "form-control", @placeholder = "Enter.." })
                    @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
                </div>
                <div class="col-sm-12">
                    <label>Gender</label>
                    <div class="form-group" style="border:1px solid;border-radius:10px; padding:5px;border-color: #d3d3d3;">
                        <div class="radio radio-primary">
                            @Html.RadioButtonFor(m => m.Gender, "Male", new { @tabindex = 9, @id = "radio1" })
                            <label for="radio1">
                              Male
                            </label>
                        </div>
                        <div class="radio radio-primary">
                            @Html.RadioButtonFor(m => m.Gender, "Female", new { @id = "radio2" })
                            <label for="radio2">
                                Female
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <label for="">Game Type</label>
                    @Html.DropDownListFor(model => model.GameTypeId, new SelectList(Model.GameTypeList, "GameType_Id", "GameType", 0), new { @class = "form-control", @Id = "ddlGameType" })
                </div>  
                <div class="col-sm-12">
                    <div id="displayGameList" style="display:none;padding:0px 50px 0px 50px;">
                        @Html.Partial("_partialGameList", Model.GameList1)
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="form-group">                    
                        <label for="">Select Image</label>
                        <input type='file' id="imgInp1" name="files" /><br />
                        <img id="blah1" src=@Model.ImageUrl height="100" width="100" />                       
                    </div>
                </div>
                <div class="col-sm-12">
                   <hr />
                </div>
                <br />
                <div class="col-sm-12">
                    <div class="form-group text-right m-b-0">
                        <button class="btn btn-primary waves-effect waves-light" type="submit" id="btnsubmit">
                            Submit
                        </button>
                        <button type="reset" class="btn btn-default waves-effect waves-light m-l-5" onClick="window.location.reload();">
                            Cancel
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
}
<script>
    $(function () {
        $('#frm_User_Modal').ajaxForm({
            beforeSubmit: ShowRequestAddress,
            success: SubmitSuccesfulPoints,
            error: AjaxErrorAddress
        });
    });
    function ShowRequestAddress(formData, jqForm, options) { }

    function AjaxErrorAddress() { }

    function SubmitSuccesfulPoints(result, statusText) {
        $.growl.notice({ title: "Success", message: "User Saved Successfully" });
        $('#userTable').DataTable().ajax.reload();
        clearAllFields();
    }

    function clearAllFields() {
        $('#User_ID').val('');
        $('#FName').val('');
        $('#Mobile').val('');
        $('#Email').val('');
        $('#LName').val('');      
        $('input:checkbox').removeAttr('checked');
        $('#blah1').attr('src', '');

        var op1 = $("#btnsubmit").html();
        if (op1 == "Update")
            $("#btnsubmit").html('Submit');

    }
</script>

<script>
    $(function () {
        $("#ddlGameType").change(function () {
            var userId = $('#User_ID').val();
            var gameTypeId = $('option:selected', this).val();

            $.get('@Url.Action("getGameList", "Home")?gameTypeId=' + gameTypeId + '&userId=' + userId, function (data) {
                $('#displayGameList').html(data);
            });
            $("#displayGameList").show();
        });
    });

    $(function () {
        var userId = $('#User_ID').val();
        if (userId == "0") {
            var data1 = $('#ddlGameType').val();
            $.get('@Url.Action("getGameList", "Home")?gameTypeId=' + data1 + '', function (data) {
                $('#displayGameList').html(data);
            });
            $("#displayGameList").show();
        }
    });

    function readURL1(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah1').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp1").change(function () {
        readURL1(this);
    });
</script>

_partialUserGrid.cshtml


<div class="panel panel-default">
    <div class="panel-body">
        <div class="card-box table-responsive">
            <h4 class="m-t-0 header-title"><b>User List</b></h4>
            <table id="userTable" class="table table-bordered"></table>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        BindUserTable();
    });

    function BindUserTable() {
        if ($.fn.DataTable.isDataTable("#userTable")) {
            $('#userTable').dataTable().fnDestroy();
            $('#userTable').html('<table cellspacing="0" class="table grid table-hover table-bordered" width="100%"  id="userTable"></table>');
        }

        $("#userTable").DataTable({
            "ajax": {
                "url": '@Url.Action("loadUserGrid", "Home")',
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                { "title": "UserId", "data": "User_ID", "autoWidth": true },
                { "title": "Name", "data": "FName", "autoWidth": true },
                { "title": "Email", "data": "Email", "autoWidth": true },
                { "title": "Approved", "data": "isApproved", "autoWidth": true },               
                { "title": "Game", "data": "GameList", "autoWidth": true },
                  {
                      "title": "Image",
                      "data": "ImageUrl",
                      "searchable": false,
                      "sortable": false,
                      "autoWidth": true,
                      "render": function (data, type, full, meta) {
                          return '<img src="' + data + '" height="45" width="45" class="img-circle" />';
                      }
                  },
                {
                    "title": "Action",
                    "data": "User_ID",
                    "searchable": false,
                    "sortable": false,
                    "render": function (data, type, full, meta) {
                        return '<a href="#" onclick="editUserData(\'' + data + '\')" class="btn-sm btn-icon waves-effect waves-light btn-success m-b-5" title="Edit"> <i class="fa fa-edit fa-lg"></i> </a>&nbsp; '
                            + '<a href="#" onclick="myfunction(\'' + data + '\')" class="btn-sm btn-icon waves-effect waves-light btn-danger m-b-5" title="Delete"> <i class="fa fa-remove fa-lg"></i> </a>';
                    }
                }
            ],
            "columnDefs": [
                { "width": "10%", "targets": 5 },
            ],

        });

        $('#userTable tbody').on('click', 'tr', function () {
            $('#userTable tr').removeClass('highlighted');
            $(this).addClass('highlighted');
        });
    }

    function myfunction(id1) {
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this Record!",
            type: "warning",
            showCancelButton: true,
            confirmButtonClass: "btn-danger",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel plx!",
            closeOnConfirm: false,
            closeOnCancel: false
        },
            function (isConfirm) {
                if (isConfirm) {
                    $.post('@Url.Action("deleteUserDetails", "Home")', { userId: id1, }, function (data) { });
                    swal("Deleted!", "Your imaginary file has been deleted.", "success");
                    $('#userTable').DataTable().ajax.reload();
                } else {
                    swal("Cancelled", "Your Record is safe ", "error");
                }
            });
    }
    function editUserData(id1) {
        $.get('@Url.Action("getUserData", "Home")?id=' + id1 + '', function (data) {
            $('#addModalUser').html(data);
            $("#btnsubmit").html('Update');
            $("#displayGameList").show();
        });
    }
</script>


_partialGameList.cshtml

@model List<SelectListItem>
@{
    int n = Model.Count;  
}

<div class="row">
    <h4>Select Game</h4>
    <table class="table table-bordered  m-0">
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @item.Text
                </td>
                <td>
                    <input type="checkbox" id="@item.Value" name="GameSelected" value="@item.Value" @(item.Selected ? "checked" : "") />
                </td>
            </tr>
        }
    </table>
</div>

Contact.cshtml

@{
    ViewBag.Title = "Contact";
}

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>
<link href="~/Content/jquery.growl.css" rel="stylesheet" />
<script src="~/Scripts/jquery.growl.js"></script>

<div class="card-box table-responsive">
    <div class="row">
        <div class="col-sm-12" style="margin-bottom:10px;margin-top:40px;">
            <div class="col-sm-3">
                <h4><b>Member List</b></h4>
            </div>
            <div class="col-sm-9 pull-right clearfix">
                <a class="btn waves-effect waves-light form-control" style="background-color:#3bafda;color:white;" id="approveGangMember">Submit</a>&nbsp;
            </div>
        </div>
        <br />
        <div class="col-sm-12">
            <table id="gMApprovalTable1" class="table table-bordered">
                <thead>
                    <tr>
                        <th rowspan="2">UserId</th>
                        <th rowspan="2">Name</th>
                        <th rowspan="2">Email</th>
                        <th rowspan="2">Game</th>   
                        <th rowspan="2">Image</th>    
                        <th><label>AP</label></th>
                        <th><label>RE</label></th>
                    </tr>
                    <tr>
                        <th><div class="chkboxClass checkbox checkbox-danger checkbox-single"><input type="checkbox" name="chkAllGangMemberApprove" id="chkAllGangMemberApprove" value=""><label></label></div></th>
                        <th><div class="chkboxClass checkbox checkbox-danger checkbox-single"><input type="checkbox" name="chkAllGangMemberReject" id="chkAllGangMemberReject" value=""><label></label></div></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#gMApprovalTable1").DataTable({
            "ajax": {
                "url": '@Url.Action("loadUserGrid", "Home")',
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                { "data": "User_ID", "autoWidth": true, "sortable": false },
                { "data": "FName", "autoWidth": true, "sortable": false },
                { "data": "Email", "autoWidth": true, "sortable": false },
                { "data": "GameList", "autoWidth": true, "sortable": false },              
                {                 
                  "data": "ImageUrl",
                  "searchable": false,
                  "sortable": false,
                  "autoWidth": true,
                  "render": function (data, type, full, meta) {
                      return '<img src="' + data + '" height="45" width="45" class="img-circle" />';
                  }
                }                
            ],
            "columnDefs": [
                { "width": "3%", "targets": 0 },
                { "width": "11%", "targets": 4 },
                {
                    'targets': 5,
                     data: null,
                    "width": "2%",
                    'searchable': false,
                    'orderable': false,
                    'className': 'dt-body-center',
                    'render': function (data, type, full, meta) {
                        return '<div class="chkboxClass checkbox checkbox-danger checkbox-single"><input type="checkbox"  name="chkGangMemberApprove" id="\'' + data.User_ID + '\'_A" value="" ><label></label></div >';
                    }
                },
                 {
                     'targets': 6,
                      data: null,
                     "width": "2%",
                     'searchable': false,
                     'orderable': false,
                     'className': 'dt-body-center',
                     'render': function (data, type, full, meta) {
                         return '<div class="chkboxClass checkbox checkbox-danger checkbox-single"><input type="checkbox" name="chkGangMemberReject" id="\'' + data.User_ID + '\'_R" value="" ><label></label></div >';
                     }
                 },
            ]
        });
        $('#gMApprovalTable1 tbody').on('click', 'tr', function () {
            $('#gMApprovalTable1 tr').removeClass('highlighted');
            $(this).addClass('highlighted');
        });
    });

    function detailOfItems(id1) {
        $.get('@Url.Action("getGangPersonImages", "Gang")?gangMemberId=' + id1 + '', function (data) {
            $('#gangMemberPersonImageModel').html(data);
            $('#gangMemberPersonImageModel').modal('show');
        });
    }
     function editGangMemberPoints1(id1) {
        $.get('@Url.Action("_partialGangQualification", "Gang")?memberId=' + id1 + '', function (data) {
                $('#gangMemberQualificationModel1').html(data);
                $('#gangMemberQualificationModel1').modal('show');
                $('.overlay').hide();
        });
     }

    $(document).ready(function () {
        var oTable = $('#gMApprovalTable1').dataTable();

        $(document).on("click", "input[name='chkGangMemberApprove']", function (event) {
            var targetId = event.target.id;
            console.log(targetId);
            if ($(this).closest('td').next().find("input[type=checkbox]:checked").length) {
                $.growl.error({ title: "Error", message: "Reject is Selected" });
               // $.Notification.autoHideNotify('error', 'top right', 'Error', 'Reject is Selected');
                $(this).prop('checked', false);
            }
        });
        $(document).on("click", "input[name='chkGangMemberReject']", function (event) {
            var targetId = event.target.id;
            console.log(targetId);
            if ($(this).closest('td').prev().find("input[type=checkbox]:checked").length) {
                //$.Notification.autoHideNotify('error', 'top right', 'Error', 'Approve is Selected');
                $.growl.error({ title: "Error", message: "Approve is Selected" });
                $(this).prop('checked', false);
            }
        });

        $('#chkAllGangMemberApprove').click(function (event) {
            if ($("#chkAllGangMemberReject").prop('checked') == true) {
                $.growl.error({ title: "Error", message: "Reject-All is Selected" });
                //$.Notification.autoHideNotify('error', 'top right', 'Error', 'Reject-All is Selected');
                $('#chkAllGangMemberApprove').prop('checked', false);
            }
            else {
                var allPages = oTable.fnGetNodes();
                if (this.checked) {
                    $('input[name=chkGangMemberApprove]', allPages).each(function () {
                        this.checked = true;
                    });
                }
                else {
                    $('input[name=chkGangMemberApprove]', allPages).each(function () {
                        this.checked = false;
                    });
                }
            }
        });

        $('#chkAllGangMemberReject').click(function (event) {
            if ($("#chkAllGangMemberApprove").prop('checked') == true) {
                $.growl.error({ title: "Error", message: "Approve-All is Selected" });
                //$.Notification.autoHideNotify('error', 'top right', 'Error', 'Approve-All is Selected');
                $('#chkAllGangMemberReject').prop('checked', false);
            }
            else {
                var allPages = oTable.fnGetNodes();
                if (this.checked) {
                    $('input[name=chkGangMemberReject]', allPages).each(function () {
                        this.checked = true;
                    });
                }
                else {
                    $('input[name=chkGangMemberReject]', allPages).each(function () {
                        this.checked = false;
                    });
                }
            }
        });

        $('#approveGangMember').click(function (e) {
            var selected = [];
            var arrData = [];
            var i = 0;
            var count = 0;

            var allPages = oTable.fnGetNodes();
            $('input[name=chkGangMemberApprove]:checked', allPages).each(function () {
                var $item = $(this);
                selected.push({
                    id: $item.attr("id")
                });
                count++;
            });

            $('input[name=chkGangMemberReject]:checked', allPages).each(function () {
                var $item = $(this);
                selected.push({
                    id: $item.attr("id")
                });
                count++;
            });

            console.log(count);
            jQuery.each(selected, function (index, item) {
                var item_id = item.id;
                item_id = item_id.replace(/'/g, "");
                arrData[i++] = item_id;
                console.log(item_id);
            });
            console.log(i);
            if (i > 0) {
                $.ajax({
                    type: "POST",
                    url: "/Home/creatApproveMemberList/",
                    datatype: "json",
                    traditional: true,
                    data: {
                        'memberIDs': arrData
                    },
                    success: function (response) {
                        //swal("Here's the title!", "...and here's the text!");
                        $.Notification.autoHideNotify('success', 'top right', 'Success', 'Member Approved Successfully..');
                        if (response.success) {
                            $('#gMApprovalTable1').DataTable().ajax.reload();
                        } else {
                        }
                    },
                    error: function (jqXHR, exception, errMsg) {
                    }
                });
            }
            else {
                $.Notification.autoHideNotify('error', 'top right', 'Error','Select Member..' );
            }
        });
    });
</script>


Database

CREATE TABLE [dbo].[tblGame](
[Game_ID] [int] IDENTITY(1,1) NOT NULL,
[GameName] [nvarchar](50) NULL,
[GameType_ID] [int] NULL)

CREATE TABLE [dbo].[tblGameType](
[GameType_ID] [int] IDENTITY(1,1) NOT NULL,
[GameType] [nvarchar](50) NULL);

CREATE TABLE [dbo].[tblUser](
[User_ID] [int] IDENTITY(1,1) NOT NULL,
[FName] [nvarchar](50) NULL,
[LName] [nvarchar](50) NULL,
[Mobile] [nvarchar](50) NULL,
[ImageUrl] [nvarchar](max) NULL,
[Gender] [nvarchar](50) NULL,
[isApproved] [int] NULL,
[Email] [nvarchar](max) NULL)

CREATE TABLE [dbo].[tblUserGame](
[GameUser_ID] [int] IDENTITY(1,1) NOT NULL,
[User_ID] [int] NOT NULL,
[Game_ID] [int] NOT NULL)


INSERT [dbo].[tblGame] ([Game_ID], [GameName], [GameType_ID]) VALUES (1, N'Cricket', 1)
INSERT [dbo].[tblGame] ([Game_ID], [GameName], [GameType_ID]) VALUES (2, N'Hockey', 1)
INSERT [dbo].[tblGame] ([Game_ID], [GameName], [GameType_ID]) VALUES (3, N'FootBall', 1)
INSERT [dbo].[tblGame] ([Game_ID], [GameName], [GameType_ID]) VALUES (4, N'Carrom', 2)
INSERT [dbo].[tblGame] ([Game_ID], [GameName], [GameType_ID]) VALUES (5, N'TableTennis', 2)
INSERT [dbo].[tblGame] ([Game_ID], [GameName], [GameType_ID]) VALUES (6, N'Pool', 2)
INSERT [dbo].[tblGame] ([Game_ID], [GameName], [GameType_ID]) VALUES (7, N'Cards', 2)


INSERT [dbo].[tblGameType] ([GameType_ID], [GameType]) VALUES (1, N'OutDoor')
INSERT [dbo].[tblGameType] ([GameType_ID], [GameType]) VALUES (2, N'InDoor')

INSERT [dbo].[tblUser] ([User_ID], [FName], [LName], [Mobile], [ImageUrl], [Gender], [isApproved], [Email]) VALUES (1, N'keshav', NULL, N'111111', N'Upload/2017_11_07_018_Bochasan.jpg', NULL, 1, N'keshav@akdm.com')
INSERT [dbo].[tblUser] ([User_ID], [FName], [LName], [Mobile], [ImageUrl], [Gender], [isApproved], [Email]) VALUES (2, N'Amit', NULL, N'12123', N'Upload/avatar-5.jpg', NULL, 0, N'amitmech@gmail.com')
INSERT [dbo].[tblUser] ([User_ID], [FName], [LName], [Mobile], [ImageUrl], [Gender], [isApproved], [Email]) VALUES (3, N'Roshni', N'Patel', N'23423', N'Upload/20.jpg', N'Female', 0, N'roshnishah2611@gmail.com')

INSERT [dbo].[tblUserGame] ([GameUser_ID], [User_ID], [Game_ID]) VALUES (1, 1, 4)
INSERT [dbo].[tblUserGame] ([GameUser_ID], [User_ID], [Game_ID]) VALUES (2, 1, 5)
INSERT [dbo].[tblUserGame] ([GameUser_ID], [User_ID], [Game_ID]) VALUES (10, 3, 1)
INSERT [dbo].[tblUserGame] ([GameUser_ID], [User_ID], [Game_ID]) VALUES (11, 3, 2)
INSERT [dbo].[tblUserGame] ([GameUser_ID], [User_ID], [Game_ID]) VALUES (12, 2, 4)
INSERT [dbo].[tblUserGame] ([GameUser_ID], [User_ID], [Game_ID]) VALUES (13, 2, 5)
INSERT [dbo].[tblUserGame] ([GameUser_ID], [User_ID], [Game_ID]) VALUES (14, 2, 6)
INSERT [dbo].[tblUserGame] ([GameUser_ID], [User_ID], [Game_ID]) VALUES (15, 2, 7)

BundleConfig

 public class BundleConfig
    {
        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/jquery.form.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
    }

EDMX

Files 


No comments:

Image Gallery - Image Add/Delete/Preview - Single Page App -

https://github.com/TheKalin/jQuery-File-Upload.MVC5 Helper Class / Models   public class FilesHelperDB     {         dbImageGallery...