MVC app sample

index.cshtml

@model ViewModels.IProjectViewModel

@{
    var projects = Model.GetProjects(Model.ProjectModel.Id);
    ViewBag.Title = "All Projects View";
}

@section scripts {
    <script>
        $(function () {
            var projects = @Html.Raw(Json.Encode(projects));

            // Models
            var ProjectModel = Backbone.Model.extend({
                url: '/Projects/AddNewProject',
                idAttribute: 'Id',
                defaults: {
                    Name: '',
                    ProjectId: ''
                },
                validate: function (attrs, options) {
                    if (attrs.name == '') {
                        return "Project name is required";
                    }

                    if (attrs.projectId == '') {
                        return "Project ID is required";
                    }
                }
            });

            var ProjectCollection = Backbone.Collection.extend({
                model: ProjectModel
            });

            var projectCollection = new ProjectCollection(projects);

            // Views
            var EditProjectView = Backbone.View.extend({
                template: _.template($('#newProjectTemplate').html()),
                tagName: 'form',
                initialize: function () {

                },
                render: function () {
                    this.$el.html(this.template(_.extend(this.model.toJSON(), {IsNew: this.model.isNew()})));
                    return this;
                },
                createProjectStep1: function () {
                    this.model.set(this.serialize());

                    if (this.model.isValid()) {
                        if (this.model.isNew()) { // New project
                            this.model.save().success(function(newId) {
                                window.location = '/Project/Index/' + newId;
                            });
                        } else { // Editing project
                            this.model.url = '/Projects/SaveProject';
                            this.model.save().success(function() {
                                
                            });
                        }
                        
                    }
                },
                serialize: function () {
                    return {
                        Name: this.$('#name').val(),
                        ProjectId: this.$('#projectId').val()
                    }
                }
            });

            

            var ProjectView = Backbone.View.extend({
                template: _.template($('#projectTemplate').html()),
                initialize: function() {
                    this.listenTo(this.model, 'change', this.render, this);
                },
                render: function() {
                    this.$el.html(this.template(this.model.toJSON()));
                    return this;
                },
                events: {
                    'click .editProject': 'editProject',
                    'click .deleteProject': 'deleteProject'
                },
                editProject: function(e) {
                    e.preventDefault();

                    var me = this;
                    var that = $(e.currentTarget);
                    var proj = new EditProjectView({
                        model: this.model
                    });
                    bootbox.dialog({
                        title: 'Edit Project',
                        message: proj.render().el,
                        buttons: {
                            success: {
                                label: "Save Project",
                                className: "btn-success",
                                callback: function () {
                                    proj.createProjectStep1();
                                    if (!me.model.isValid()) {
                                        return false;
                                    }

                                }
                            },
                            danger: {
                                label: "Cancel",
                                className: "btn-danger",
                                callback: function () {

                                }
                            }
                        }
                    });

                },
                deleteProject: function(e) {
                    e.preventDefault();
                    var me = this;
                    var that = $(e.currentTarget);

                    console.log(me.model.id);
                    bootbox.confirm('Are you sure that you want to delete the "'+ me.model.get('Name') +'" project?',function(res) {
                        if (res) {
                            me.model.destroy({
                                url: '/Projects/DeleteProject/' + me.model.id,
                                success: function (model, response) {
                                    me.remove();
                                }
                            });
                        }
                    });
                },
                serialize: function() {
                    
                }
            });

            _.each(projects, function(proj) {
                $('#projectsList').append(new ProjectView({
                    model: new ProjectModel(proj)
                }).render().el);
            });
            

            // Handlers
            $('body').on('click', '#newProject', function () {
                var mod = new ProjectModel();
                var proj = new EditProjectView({
                    model: mod
                });
                bootbox.dialog({
                    title: 'Create New Project',
                    message: proj.render().el,
                    buttons: {
                        success: {
                            label: "Create Project",
                            className: "btn-success",
                            callback: function () {
                                proj.createProjectStep1();
                                if (!mod.isValid()) {
                                    return false;
                                }

                            }
                        },
                        danger: {
                            label: "Cancel",
                            className: "btn-danger",
                            callback: function () {

                            }
                        }
                    }
                });
            });
        });

    </script>
}

<div class="page-header">
    <h2>@ViewBag.TItle</h2>
</div>

<div class="row">
    <div class="col-md-3">
        <ul class="list-group">
            <li class="list-group-item"><a href="#">Account Information</a></li>
            <li class="list-group-item"><a href="#">Settings</a></li>
            <li class="list-group-item">
                <a href="#" data-target="#newProjectModal" data-toggle="modal" id="newProject">
                    <i class="glyphicon glyphicon-plus"></i> Create new project
                </a>
            </li>
        </ul>
    </div>
    <div class="col-md-9">
        <div class="row" id="projectsList">
          
        </div>
    </div>
</div>

<script id="newProjectTemplate" type="text/x-html">
    <div class="form-group">
        <label form="projectName">Project Name</label>
        <input type="text" id="name" name="name" class="form-control" value="<%- Name %>" required />
    </div>
    <div class="form-group">
        <label form="projectName">Project ID</label>
        <input type="text" id="projectId" name="projectId" class="form-control" value="<%- ProjectId %>" required />
    </div>
    <% if (IsNew) { %>
    <div class="form-group">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="width: 33%;">
                Step 1/3
            </div>
        </div>
    </div>
    <% } %>
</script>

<script id="projectTemplate" type="text/x-html">
    <div class="col-md-6" data-id="<%- Id %>">
        <div class="panel panel-default">
            <div class="panel-body">
                <a data-id="<%- Id %>" class="editProject" href="#" style="font-size: 17px; color: #008000;"><i class="glyphicon glyphicon-edit"></i></a>
                <a data-id="<%- Id %>" class="deleteProject" href="#" style="color: #e94444; font-size: 17px;"><i class="glyphicon glyphicon-trash"></i></a>
                <a href="/Project/Index/<%- Id %>"><%- Name %></a>

            </div>
        </div>
    </div>
</script>