Click here to Skip to main content
15,891,951 members
Articles / Web Development / HTML

Webpart/Portlet development in ASP.NET MVC Framework

Rate me:
Please Sign up or sign in to vote.
4.84/5 (40 votes)
5 Feb 2015CPOL5 min read 206.1K   7.3K   163  
Solution adorned with drag and drop Portlet/Webpart customization feature in ASP.NET MVC Framework. It summoned JQuery for better user experience evading inclusive page refresh during personalization.
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Disabled Portlet
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript"> 
        var current_Column_ID = "";
        var portlet_Header_Icon;
        var portlet_Item_Name = "";
        $(function() {
		    var $tabs = $("#tabs").tabs();
		    var $tab_items = $("ul:first li",$tabs).droppable({
			    accept: '.column div' ,
			    tolerance: 'pointer',
			    opacity: 1,
			    containment: '.container',
                cursor: 'move',
                cursorAt: { cursor: 'move', top: -155, left: -55, bottom: 0 }, 
                hoverClass: 'drophover', 
    			revert: 'valid',
    			greedy: true,
    			over: function(event, ui) 
    			{ 
    			    
    			},

			    drop: function(ev, ui) { 
    			    
    			    ui.draggable.attr("style","opacity: 1;");
    			    ui.draggable.addClass("portlet ui-state-default");
    			    
    			    
    			    var $item = $(this);
			        
				    var $list = $($item.find('a').attr('href')).find('.column')[0];
                    
                    PortletsPlacementManager($($item.find('a').attr('href')).find('.column').attr("id"),current_Column_ID,portlet_Item_Name,0,1);
                    
				    ui.draggable.hide('slow', function() {
					    $tabs.tabs('select', $tab_items.index($item));
					    $(this).appendTo($list).show('slow');
					    $('#' +portlet_Item_Name).find(".portlet-content").toggle(true);
				    });
			    }
		    });
	    });
        
        function PortletsPlacementManager(column_ID,sender_Column_ID,portlet_ID,row_No,is_Drop) {
         
         jQuery.ajax({
         type:"POST",
         url:"<%= WebApplication.Models.Utility.Get_Path() %>/Portlet/PortletsPlacementManager/" + column_ID + "/" + portlet_ID +"/" + row_No + "/" + is_Drop  , 
         success: function(result) {
                       
                      if(result.isOk != false)
                      {
                        if( is_Drop = 1 )
                        {
                          TotalCatetogoryPortlets(column_ID);
                          TotalCatetogoryPortlets(sender_Column_ID);
                        }
                      }   
                  },
         async: true
        }); 
        }
        
        function PortletsStatusManager(column_ID,portlet_ID,is_Active) {
         jQuery.ajax({
         type:"POST",
         url:"<%= WebApplication.Models.Utility.Get_Path() %>/Portlet/PortletsStatusManager/" + portlet_ID +"/" + is_Active , 
         success: function(result) {
                      if(result.isOk != false)
                      {
                        TotalCatetogoryPortlets(column_ID);
                        TotalPortlets();
                      }   
                  },
         async: true
        }); 
        }
        
        
        function TotalPortlets() {
         jQuery.ajax({
         type:"POST",
         url:"<%= WebApplication.Models.Utility.Get_Path() %>/Portlet/TotalPortlets/false", 
         success: function(result) {
                      if(result.isOk != false)
                      {
                        $("#currentActivePortlets").html( result );
                      }   
                  },
         async: true
        }); 
        }
        
        
        
        function TotalCatetogoryPortlets(column_ID) {
        
         jQuery.ajax({
         type:"POST",
         url: "<%= WebApplication.Models.Utility.Get_Path() %>/Portlet/TotalCatetogoryPortlets/" + column_ID + "/false", 
         success: function(result) {
                      if(result.isOk != false)
                      {
                          var name = "#tab" + column_ID.substring(14);
                          $(name).html( result );
                      }   
                  },
         async:   true
        }); 
        }
         
    
        function OpenDialog(portlet_ID,item_No,title) {
           
	       $("#dialog").attr("title",title);
    	   $("#dialog").dialog('option', 'position', 'center');
    	   $("#dialog").dialog({
			    height: 500,
			    width: 450,
			    modal: true
		    });
    		
            var url = "<%= WebApplication.Models.Utility.Get_Path() %>/Portlet/GetItemDetail/" + portlet_ID +"/" + item_No
            $("#dialog").html('<image src= "../../ajax-loader.gif" alt="Loading, please wait"/>');
        
             jQuery.ajax({
             type:"GET",
             url:"<%= WebApplication.Models.Utility.Get_Path() %>/Portlet/GetItemDetail/" + portlet_ID +"/" + item_No, 
             success: function(result) {
                          if(result.isOk == false)
                          {
                              $("#dialog").html(result.message);
                          }    
                          else
                          {
                              $("#dialog").html(result);
                          }   
                      },
             async:   true
            }); 
   	    }
   	
  	    $(function() {
		    $(".column").sortable({
			    connectWith: '.column'
			    
		    });
		    
		   
    		
		    $(".portlet").addClass("")
			    .find(".portlet-header")
			        .addClass("ui-widget-header")
				    .prepend('<span class="ui-icon ui-icon-minusthick"></span>')
				    .end()
			    .find(".portlet-content");
			    
			$(".portlet").addClass("")
			    .find(".portlet-header")
			        .addClass("ui-widget-header")
				    .prepend('<span class="ui-icon ui-icon-extlink"></span>')
				    .end()
			    .find(".portlet-content")
			    
			    
			 $(".portlet-header .ui-icon-extlink").click(function() {
			    
			    var column_ID = $(this).parents(".portlet:first").parents(".column:first").attr("id");
			    var portlet_ID = $(this).parents(".portlet:first").attr("id"); 
			    
			    PortletsStatusManager(column_ID,portlet_ID,true)
			    
			    $(this).parents(".portlet:first").fadeOut('slow', function() {
                $(this).remove();
                
                });
		    });
     
		    $(".portlet-header .ui-icon-minusthick").click(function() {
			    $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
			    if(  $(this).parents(".portlet:first").find(".portlet-content").is(":visible")  )
			    {
			    
			    }
			    //
			    var options = {};
			    
			    $(this).parents(".portlet:first").find(".portlet-content").toggle();
		    });
		    
		    $(".portlet-header .ui-icon-plusthick").click(function() {
			    $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
			    if(  $(this).parents(".portlet:first").find(".portlet-content").is(":visible")  )
			    {
			    
			    }
			    //
			    var options = {};
			    
			    $(this).parents(".portlet:first").find(".portlet-content").toggle();
		    });
    		
    		
     
		    $(".column").disableSelection();
    		
		    $('.column').sortable({
    		    cursor:'move',
    		    forcePlaceholderSize: true,
    		    placeholder: 'ui-state-highlight',
    		    opacity: 0.6,
		        start: function(event, ui) {
		                current_Column_ID = $(event.target).attr("id");
	                    portlet_Item_Name = $(event.target).find(".portlet").attr("id");
	                    //$(event.target).find(".portlet").attr("style","cursor:move");
	                }, 
    		     
                 receive: function(event, ui) { 
                        PortletsPlacementManager(event.target.id,$(ui.sender).attr("id"),$(event.target).find(".portlet").attr("id") ,ui.item.index(),0);
                        }      
                  
                });
	    });
    </script> 
    <% ViewDataDictionary vdd = new ViewDataDictionary();
       vdd["is_Active_Portlets"] = false;
       Html.RenderPartial("TabPage", vdd);
    %>
    <div class="demo-description"> 
</div>
<div style="color:White" id="dialog" title="-----">
</div>

</asp:Content>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Pakistan Pakistan
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.
This is a Organisation

33 members

Comments and Discussions