UserProfile or first page after login in Photo Gallary

Home » Photo Gallary » UserProfile or first page after login in Photo Gallary

UserProfile or first page after login in Photo Gallary

Posted by 20Fingers2Brains on Tags: Photo Gallary

The UserProfile is the first page shown to the user after successful login.
This page shows the album created by the user.
This page also allows user to add new albums.
The user can also delete the albums created earlier.

Screenshot :

The above is the UserProfile page for user after login.
The user has one album named hello world. The user can add more albums using red button under Welcome header.

Action method that renders this View :

public ActionResult UserProfile()
        {
            Gallary gallary = new Gallary();
            AlbumViewModel albumViewModel = new AlbumViewModel();
            if (Session["Username"] != null && Session["password"] != null)
            {
                string username = Session["Username"].ToString();
                string password = Session["password"].ToString();
                albumViewModel.Username = username;
                albumViewModel.Password = password;
                albumViewModel.AlbumList = gallary.GetALbumList(username, password);
            }
            return View("UserProfile", albumViewModel);
        }

The above action method is called after user is validated against the username and password provided.
This action method creates an object of AlbumViewModel. The AlbumViewModel has an property of type list which is filled by albums created by user.
The album list is fetched from database using the username and password provided by the user.

AlbumViewModel :

public class AlbumViewModel
    {
        public string AlbumName { get; set; }
        public string Username { get; set; }
        public string Password { get; set; }
        public List<Album> AlbumList { get; set; }
    }

The top 3 properties are used in form which accepts user input while creating new album. The fourt property gets the albums saved by user in the database.

Service Method GetAlbumList :

public List<Album> GetALbumList(string Username,string Password)
        {
            List<Album> listOfAlbums = null;
            using(GallaryDataContext dbContext = new GallaryDataContext())
            {
                int UserId = dbContext.LoginDetails.Where(user => user.Username == Username && user.Password == Password).Single().RegisterId;
                listOfAlbums = dbContext.Albums.Where(album => album.UserId == UserId).ToList();
                return listOfAlbums;
            }
        }

The above service method fetches the albums created by user from database.

UserProfile View :

@model PhotoGallary.ViewModels.AlbumViewModel
@{
    ViewBag.Title = "UserProfile";
}
<style type="text/css">
 body {
  background-color: #232323;
 }
 .linkClass
    {
    text-decoration:none;
    color:White;
 }
</style>

<h1 id="timepass" align="center" style="color:white;font-family: comic sans ms;font-weight:bolder">Welcome</h1>
<img id="AlbumImage" style="height:100px;width: 100px;margin-left:690px;cursor:pointer;" src='@Url.Content("~/Content/Images/downarrow.png")' alt="Add New Album"/>
<div id="AlbumDiv" style="background-color: #232323;width:300px;height:100px;margin-left:400px;margin-top:-20px;display: none;">
    @using(Html.BeginForm("CreateAlbum","LoginRegister"))
    {
        <input type="hidden" id="Username" name="Username" value="@Model.Username"/>
        <input type="hidden" id="Password" name="Password" value="@Model.Password"/>
        <table style="width:100%;margin-left: 40px;padding-top: 20px;">
            <tr>
                <td style="color:white;font-family: comic sans ms;">
                    @Html.LabelFor(album => album.AlbumName)
                </td>
                <td>
                    @Html.TextBoxFor(album => album.AlbumName)
                </td>
            </tr><tr style="height:10px;"><td></td><td></td></tr>
            <tr style="padding-top: 10px;">
                <td style="text-align: center">
                    <input type="submit" id="AlbumButton" style="cursor:pointer;" value="Create"/>
                </td>
                <td>
                    <input type="button" id="AlbumCancel" style="cursor:pointer;" value="Cancel"/>
                </td>
            </tr>
        </table>
    }
</div><br/><br/><br/>
<div style="width:90%;margin-left:40px;">
   @if (Model.AlbumList.Count != 0)
   {
       foreach (var album in Model.AlbumList)
       {
    <span style="width: 60px; height: 60px;margin-left:20px;cursor:pointer;"><img style="width: 222px;cursor:pointer; height: 220px;margin-top:32px;" src='@Url.Action("GetImageForAlbum","LoginRegister",new {albumId = album.AlbumId})' alt="@String.Concat(@album.AlbumName,'+',@album.AlbumId)" title="@album.AlbumName"  onclick="javascript:GetImagesForAlbum(this);" /></span>
           <span style="color:white;margin-left:-140px;position:absolute; margin-top:250px;">@album.AlbumName</span>
     <span style="color:white;margin-left:-140px;position:absolute; margin-top:270px;cursor:pointer;"><a onclick="javascript:DeleteAlbum(this);"  title="@String.Concat(@album.AlbumName,'+',@album.AlbumId)">Delete</a></span>
       }
   }
   else
        {
            <p align="center" style="color:white;font-size:30px;font-weight:bolder">No Album found</p>
        }
</div>
<script type="text/javascript">
    $("#AlbumImage").click(function () {
        $("#AlbumDiv").show("slow");
    });

    $("#AlbumCancel").click(function () {
        $("#AlbumDiv").hide("slow");
    });

    function GetImagesForAlbum(album) {
        var albumname = album.title;
        var myUrl = '@Url.Action("GetImages","LoginRegister")';
        window.location.href = myUrl + '?album=' + albumname;
    }

    function DeleteAlbum(album) {
        var albumSplit = album.title.split('+');
        var albumName = albumSplit[0];
        var albumId = albumSplit[1];
        var ok = confirm("Do you really want to delete album : " + albumName);
        if (ok) {
            $.ajax({
                url: '@Url.Action("DeleteAlbum","LoginRegister")',
                type: 'POST',
                data: { albumName: albumName,
                    albumId: albumId
                },
                success: function () {
                    location.href = '@Url.Action("UserProfile","LoginRegister")';
                },
                error: function (xhr, status, error) {
                    var verr = xhr.status + "\r\n" + status + "\r\n" + error;
                    alert(verr);
                }
            });
        }

    }
</script>

The view contains form for user to enter details for new album. The submit of this form created a new album in the database.

The form is posted to the below Action method :

[HttpPost]
        public ActionResult CreateAlbum(FormCollection collection, AlbumViewModel album)
        {
            Gallary gallary = new Gallary();
            string username = collection["Username"].ToString();
            string password = collection["Password"].ToString();
            bool result = gallary.CreateAlbum(username, password, album);
            return RedirectToAction("UserProfile");
        }

The above method fetches the username and password from form collection.
The action method also accepts AlbumViewModel object which is passed to the service method to insert into the database.

CreateAlbum method :

public bool CreateAlbum(string Username,string Password,AlbumViewModel createAlbum)
        {
            try
            {
                using(GallaryDataContext dbContext = new GallaryDataContext())
                {
                    int UserId = dbContext.LoginDetails.Where(user => user.Username == Username && user.Password == Password).Single().RegisterId;
                    Album album = new Album();
                    album.AlbumName = createAlbum.AlbumName;
                    album.UserId = UserId;
                    dbContext.Albums.InsertOnSubmit(album);
                    dbContext.SubmitChanges();
                }
                return true;
            }
            catch (Exception)
            {
                return false;
            }
           
        }

The above method inserts a new album into the database.

Delete album :
This view also allows user to delete album. The delete link post the album details to the action method using AJAX post. The album is deleted from database based on the album details posted.

DeleteAlbum Action Method :

[HttpPost]
        public ActionResult DeleteAlbum(string albumName, int albumId)
        {
            Gallary gallary = new Gallary();
            gallary.DeleteAlbum(albumName, albumId, Convert.ToInt32(Session["UserId"])); 
            return RedirectToAction("UserProfile");
        }

The above action method is called when user clicks on Delete link. This method accepts albumName and albumId as parameter.
This method calls DeleteAlbum Service method which accepts the albumName and albumId parameters.

DeleteAlbum Service Method :

public void DeleteAlbum(string albumName, int albumId , int userId)
        {
            using(GallaryDataContext db = new GallaryDataContext())
            {
                db.delete_Images_Album(albumId,userId);
            }
        }

The service method calls an stored procedure using DataContext object.
DBML allows us to add stored procedure which then can be called using context object.
The delete_Images_Album method accepts parameter required for stored procedure.

Stored Procedure :