Index.cshtml

@model RAM.Admin.Controllers.ViewModels.HomeView
@{
    ViewBag.Title = "Portfolio Management";
}
<div class="container">
    <div class="row">
        <h2 class="pull-left">Portfolio Mangement</h2>
        <div class="pull-right" style="margin-top: 20px;">
            <a href="#portfolioModal" class="editModal btn btn-success" role="button" data-toggle="modal">New Project</a>
        </div>
    </div>
    <div class="row">
        <hr />
        <div id="portfolioList">
            @Html.Partial("_PortfolioList")
        </div>
    </div>
    <div id="portfolioModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 id="modalLabel">Add/Edit Portfolio</h3>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <b>Title:</b><br />
                            <input id="modalTitle" type="text" class="form-control" placeholder="Enter Title" /><br />
                            <b>Date of Project:</b><br />
                            <input type="text" id="modalProjectDate" placeholder="Enter Project Date" class="datepicker form-control" /><br />
                            <b>Category:</b><br />
                            <select name="modalCategory" id="modalCategory" class="form-control">
                                @foreach (var item in Enum.GetValues(typeof(RAM.Core.Domain.Project.ProjectType)))
                                {
                                    <option value="@((int)item)">
                                        @item
                                    </option> 
                                }
                            </select><br />
                            <b>Description:</b><br />
                            <textarea id="modalDescription" class="form-control" rows="4" placeholder="Enter Description"></textarea>
                        </div>
                    </div>
                    <hr />
                    <form action="~/Portfolio/SavePortfolio" class="dropzone" id="dropzoneJsForm">
                        <input name="title" type="hidden" id="hdnTitle" />
                        <input name="description" type="hidden" id="hdnDescription" />
                        <input name="category" type="hidden" id="hdnCategory" />
                        <input name="projectDate" type="hidden" id="hdnProjectDate" />
                        <input name="portfolioID" type="hidden" id="hdnPortfolioID" />
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="cancelModal" type="button" class="btn">Cancel</button>
                    <button id="submit-all" type="button" class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        //TODO: Refactor all of this code out into another file and into manageble functions

        var dropZoneInstance;
        var projectImages = [];
        var projectID;


        $(".datepicker").datepicker({
            format: 'mm/dd/yyyy'
        });

        $("#portfolioList").on('click', '.editModal', function (e) {
            e.preventDefault();
            @*var banners = @Html.Raw(Json.Encode(Model.Banners));
            var banner = banners[$(this).data('id') - 1 ];*@
            projectID = $(this).data('id');
            $.ajax({
                url: '@System.Configuration.ConfigurationManager.AppSettings["BaseUrl"]' + '/Portfolio/GetPortfolioImages',
                type: 'POST',
                data: JSON.stringify({ id: $(this).data('id') }),
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    projectImages = data.Images;
                    buildImages(dropZoneInstance(), data.Images);

                }
            });


            $("#modalTitle").val($("#title_" + $(this).data('id')).text().trim());
            $("#modalDescription").val($("#description_" + $(this).data('id')).text().trim());
            $("[name=modalCategory]").val($(this).data('category'));
            $("#modalProjectDate").val($("#projectdate_" + $(this).data('id')).text().trim());
            $("#hdnPortfolioID").val($(this).data('id'));
        });

        $(".deletePortfolio").on('click', function (e) {
            e.preventDefault();
            if (!confirm("Are you sure you want to delete?")) {
                return false;
            }
            $.ajax({
                url: '@System.Configuration.ConfigurationManager.AppSettings["BaseUrl"]' + '/Portfolio/DeletePortfolio',
                type: 'POST',
                data: JSON.stringify({ id: $(this).data('id') }),
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                success: function (data) {

                    console.log(data.Message);
                    $("#portfolioList").html("");
                    $("#portfolioList").load('@System.Configuration.ConfigurationManager.AppSettings["BaseUrl"]' + '/Portfolio/PortfolioList');
                    $('#portfolioList').effect("highlight", { color: "#7fd658" }, 1000);
                },
                error: function (x, y, z) {
                    alert(x + '\n' + y + '\n' + z);
                }
            });
        });

        function buildImages(dz, imgs) {
            for (var i = 0; i < imgs.length; i++) {
                var mockFile = { name: imgs[i].ID, size: 12345 };

                // Call the default addedfile event handler
                dz.emit("addedfile", mockFile);

                // And optionally show the thumbnail of the file:
                dz.emit("thumbnail", mockFile, '@System.Configuration.ConfigurationManager.AppSettings["PublicSiteUrl"]' + imgs[i].ImagePath);
            }
            // If you use the maxFiles option, make sure you adjust it to the
            // correct amount:
            var existingFileCount = projectImages.length; // The number of files already uploaded
            dz.options.maxFiles = dz.options.maxFiles - existingFileCount;
        }

        function DeleteFileFromServer(file) {
            $.ajax({
                url: '@System.Configuration.ConfigurationManager.AppSettings["BaseUrl"]' + '/Portfolio/DeletePortfolioImage',
                type: 'POST',
                data: JSON.stringify({ id: file.name }),
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    console.log(file.name + " deleted");
                    $("#portfolioList").html("");
                    $("#portfolioList").load('@System.Configuration.ConfigurationManager.AppSettings["BaseUrl"]' + '/Portfolio/PortfolioList');
                },
                error: function (x, y, z) {
                    console.log(x + '\n' + y + '\n' + z);
                }
            });
        }

        function SavePortfolioDetails() {
            var person = {
                title: $("#modalTitle").val(),
                description: $("#modalDescription").val(),
                category: $("#modalCategory").val(),
                projectdate: $("#modalProjectDate").val(),
                id: projectID
            }

            $.ajax({
                url: '@System.Configuration.ConfigurationManager.AppSettings["BaseUrl"]' + '/Portfolio/SavePortfolioObj',
                type: 'POST',
                dataType: "json",
                data: JSON.stringify(person),
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    console.log(data.Message);
                    $("#portfolioList").html("");
                    $("#portfolioList").load('@System.Configuration.ConfigurationManager.AppSettings["BaseUrl"]' + '/Portfolio/PortfolioList');
                    $('#portfolioList').effect("highlight", { color: "#7fd658" }, 1000);
                },
                error: function (x, y, z) {
                    console.log(x + '\n' + y + '\n' + z);
                }
            });
        }


        Dropzone.options.dropzoneJsForm = {

            //prevents Dropzone from uploading dropped files immediately
            autoProcessQueue: false,
            maxFiles: 5,
            maxFilesize: 3,
            addRemoveLinks: true,
            parallelUploads: 5,

            init: function () {
                var submitButton = document.querySelector("#submit-all");
                var cancelButton = document.querySelector("#cancelModal");
                var filesadded = false;
                var myDropzone = this; //closure


                function getDropZoneInstance() {
                    return myDropzone;
                }

                dropZoneInstance = getDropZoneInstance;

                submitButton.addEventListener("click", function () {
                

                    $("#hdnTitle").val($("#modalTitle").val());
                    $("#hdnDescription").val($("#modalDescription").val());
                    $("#hdnCategory").val($("#modalCategory").val());
                    $("#hdnProjectDate").val($("#modalProjectDate").val());
                    console.log(filesadded);
                    if (filesadded) {
                        myDropzone.processQueue();
                    } else {
                        SavePortfolioDetails();
                        $("#portfolioModal").modal('hide');
                    }
                });

                document.querySelector("button#cancelModal").addEventListener("click", function () {

                    myDropzone.removeAllFiles();
                    $('#portfolioModal').modal('hide');
                    $("#portfolioList").html("");
                    $("#portfolioList").load('@System.Configuration.ConfigurationManager.AppSettings["BaseUrl"]' + '/Portfolio/PortfolioList');
                });

                this.on("processing", function () {
                    myDropzone.options.autoProcessQueue = true;
                });


                this.on("success", function(file, response){
                    if(response.Status == "success"){
                    $("#portfolioList").html("");
                    $("#portfolioList").load('@System.Configuration.ConfigurationManager.AppSettings["BaseUrl"]' + '/Portfolio/PortfolioList');
                    }
                });

                this.on("complete", function(file){
                    this.removeFile(file);
                });

                this.on("removedfile", function (file) {
                    DeleteFileFromServer(file);
                });

                this.on("drop", function (event) {
                    filesadded = true;
                });
            }
        };

    });
</script>