lbrt.Net

Pinoy Software Engineer

ASP.NET MVC: Creating Feed Wall

Here is a simple direct approach in creating a feed wall which is similar to the wall in facebook except for the omission of the posting of statuses. i’ve created this because i wanted to present my data from a feed in a wall like approach.

First is we need to create a control that will be the parent for our wall (e.g. EventFeedsControl).

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<script type="text/javascript" src="<%= Url.Content("../../Scripts/Views/Shared/pk.eventfeeds.js") %>"></script>
<div class="div-event-feeds">
    <a href="#" id="btnEventFeed" class="dark_link">
        <span class="ui-icon ui-icon-signal-diag float-left button_link"></span>
        <label>Event Feed</label>
    </a>
    <ul id="update" class="ui-unordered-list-bullet-less"></ul>
    <a href="#" class="button_link ui-state-default" id="loadOlder">
        <label>Load Older</label>
    </a>
</div>

Next is to create the javascripts used by the control, note that make sure to point the above sample code’s js source to the correct path you would be using.


//Bind events
$(document).ready(function () {
    $("#btnEventFeed").click(function () {
        loadNotes();
    });

    $("#loadOlder").click(function () {
        loadMore();
    });

    $("#loadOlder").hover(
	function(){ 
		$(this).addClass("ui-state-hover"); 
	},
	function(){ 
		$(this).removeClass("ui-state-hover"); 
	}
)
});

//load all notes or latest
function loadNotes() {
    $.ajax({
        type: "POST",
        url: 'UploadPhotos/GetNotes',
        data: {},
        cache: false,
        dataType: "json",
        success: function (data) {
            $("ul#update").prepend(data.Html);
            $("ul#update li").slideDown("slow");
        },
        error: function (XMLHttpRequest) {
            var errorMsg = XMLHttpRequest.statusText;
        },
        complete: function (jsonData) {
            //TODO:
        }
    });
};
//end loadNotes

//load all notes or latest
function loadMore() {
    //find oldest id displayed
    var Id = $("ul#update li:last");
    if (Id[0]) {
        Id = Id.attr("id");
    } else {
        Id = 0;
    }
    //ajax call
    $.ajax({
        type: "POST",
        url: 'UploadPhotos/LoadMore',
        data: { Id : Id},
        cache: false,
        dataType: "json",
        success: function (data) {
            $("ul#update").append(data.Html);
            $("ul#update li").slideDown("slow");
        },
        error: function (XMLHttpRequest) {
            var errorMsg = XMLHttpRequest.statusText;
        },
        complete: function (jsonData) {
            //TODO:
        }
    });
};
//end LoadMore

Next is to create the control which will house the feeds (e.g. EventFeedControl). In this sample i’ve simply used a string.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<Web.ViewModel.UploadPhotosViewModel>>" %>
<% foreach(var item in Model){ %>   
<li id="<%= item.Test %>">
    <div>
        <%= item.Test %>     
    </div>
</li>
<% } %>

Next is the controller, helpers and viewmodel codes

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Web.Helper;
using Web.ViewModel;

namespace Web.Controllers
{
    public class UploadPhotosController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult Upload(HttpPostedFileBase file)
        {
            return Json(new { });
        }

        public JsonResult GetNotes()
        {
            var events = new List<UploadPhotosViewModel>();
            events.Add( new UploadPhotosViewModel() { Test = Guid.NewGuid().ToString() });

            return Json(new
            {
                Html = this.RenderPartialView("EventFeedControl", events)
            }, JsonRequestBehavior.AllowGet);
        }

        public JsonResult LoadMore(string Id)
        {
            var events = new List<UploadPhotosViewModel>();
            events.Add(new UploadPhotosViewModel() { Test = Guid.NewGuid().ToString() });

            return Json(new
            {
                Html = this.RenderPartialView("EventFeedControl", events)
            }, JsonRequestBehavior.AllowGet);
        }
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Web.ViewModel
{
    public class UploadPhotosViewModel
    {
        public string Test { get; set; }
    }
}

Helper class to render partial view in controller

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

namespace Web.Helper
{
    public static class ControllerHelper
    {
        public static string RenderPartialView(this Controller controller, string viewName, object model)
        {
            if (string.IsNullOrEmpty(viewName))
                viewName = controller.ControllerContext.RouteData.GetRequiredString("action");

            controller.ViewData.Model = model;
            using (var sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);
                var viewContext = new ViewContext(controller.ControllerContext, viewResult.View, controller.ViewData, controller.TempData, sw);
                viewResult.View.Render(viewContext, sw);

                return sw.GetStringBuilder().ToString();
            }
        }
    }
}

Now simply add this to your page and your done.

<% Html.RenderPartial("EventFeedsControl"); %>

Lastly, Note that this runs in a jqueryUI ready asp.net mvc project. Hope this helps! Thanks.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: