• Working with ambigious controller names in MVC3

    by Venkata Koppaka | Apr 30, 2011

    If you are working with ASP.NET MVC2 or above you might want to have same controller name across multiple areas. For example you might have an Home Controller on your root of your website and also a Home Controller on the Admin Area of your website. Looks like a a reasonable thing to have

     

    But if you run your application you will have an error saying "Multiple Types were found that match the controller..." or like the screenshot below

     

    To overcome this error you need register a route specific to the area with the namespace. Use the code snippet below-

    public static void RegisterRoutes(RouteCollection routes) 
            { 
                routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); 
     
                //General Route 
                routes.MapRoute( 
                    "Default", // Route name 
                    "{controller}/{action}/{id}", // URL with parameters 
                    new { controller = "Home", action = "Index", id = UrlParameter.Optional }, // Parameter defaults 
                    new string[] { "AmbiguousControllers.Controllers" } 
                ); 
     
                //Route for Admin Area 
                routes.MapRoute( 
                    "Admin Default", // Route name 
                    "{controller}/{action}/{id}", // URL with parameters 
                    new { area = "Admin", controller = "Home", action = "Index", id = UrlParameter.Optional }, // Parameter defaults 
                    new string[] { "AmbiguousControllers.Areas.Admin.Controllers" } 
                ); 
     
            } 

    And now you can have multiple controllers with the same name.

     Hope this helps,

    Cheers

    Venkata

    Go comment!

  • Json Request Behaviour in MVC2

    by Venkata Koppaka | Nov 23, 2010

    If you are working with a MVC2 project, or happen to upgrade a MVC1 Project to a MVC2 Project you might run to some issues while getting Json data using AJAX calls.

    Specifically MVC 2 will give you an error which says

    This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet.

    To get past this error all you need to do is Allow Json data to be gettable in your Controller Action method.

    You can obtain this by the following line –

    1 return Json(data, JsonRequestBehavior.AllowGet); 

    The above line will solve your problem.

    Hope this helped,

    Cheers,

    Venkata


    Go comment!

  • How to add Twitter Stream to your ASP.NET MVC Website

    by Venkata Koppaka | Oct 24, 2010

    This post will walk you through how to add twitter stream to your ASP.NET MVC Website.

    First go to  http://twitter.com/widgets, then in left side bar under "Widgets for..." select "My Website"

    From the widgets page, choose "Profile Widget" -

    You should end up in a "Customize your Profile Widget" page -

    1. In the settings tab enter your twitter username.
    2. In the preferences tab choose your preferences ideally the number of tweets can be adjusted here.
    3. From the Appearance tab choose the colors of your widget.
    4. From the Dimensions tab choose your Dimensions of the widget.

    Once you are done, hit finish and grab code.

    Copy the script in the textbox.

    Now to integrate it to your ASP.NET MVC Website, Add new MVC Partial View and paste the code from the above step in to your partial view.

    Then simply call Html.RenderPartial and render the Partial View where ever you want.

    Hope this helped,

    Cheers,

    Venkata

    Go comment!

  • Using TinyMCE Editor with ASP.NET MVC

    by Venkata Koppaka | Aug 30, 2010

    In this post I will walk through on how to get TinyMCE editor, one of the best WYSIWYG (What YouSee Is What You Get) editors, to work in a ASP.NET MVC application

    Go to TinyMce website and download the latest Main Package, at the time of writing it is version 3.3.8. Here is a link for direct download  - Click to Download

    I will use a ASP.NET MVC2 App to demonstrate TinyMCE.

    Create a New ASP.NET MVC2 Web Application. Unzip the contents of JScripts folder in TinyMCE zip folder that you downloaded earlier to say /Scripts/Tiny_Mce/

    After you unzip the contents of JScripts folder to your application, your Scripts folder should look something similar to this -

    Include a Script reference of TinyMCE javascript file in your view where you want to use the TinyMCE Editor -

    1 <script src="/Scripts/tiny_mce/tiny_mce.js" type="text/javascript"></script> 

    Then copy the following javascript in to your view to initialize TinyMCE -

    1 <script type="text/javascript"> 
    2         tinyMCE.init({ 
    3             // General options 
    4             mode: "textareas", 
    5             theme: "advanced", 
    6             plugins: "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager", 
    7  
    8             // Theme options 
    9             theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect", 
    10             theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", 
    11             theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", 
    12             theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage", 
    13             theme_advanced_toolbar_location: "top", 
    14             theme_advanced_toolbar_align: "left", 
    15             theme_advanced_statusbar_location: "bottom", 
    16             theme_advanced_resizing: true, 
    17  
    18             // Example content CSS (should be your site CSS) 
    19             content_css: "css/example.css", 
    20  
    21             // Drop lists for link/image/media/template dialogs 
    22             template_external_list_url: "js/template_list.js", 
    23             external_link_list_url: "js/link_list.js", 
    24             external_image_list_url: "js/image_list.js", 
    25             media_external_list_url: "js/media_list.js" 
    26  
    27             
    28         }); 
    29     </script> 
    30  
    31  

    You would need a TextArea HTML Control to view TinyMCE editor. Use the following code to add a TextArea to your view.

    1  
    2     <form> 
    3         <textarea name="tinyMCEContent" style="width: 100%"> 
    4         </textarea> 
    5     </form> 

    Run the application, and you should see the TinyMCE Editor like this -

    Hope this helps,

    Cheers,

    Venkata

    Go comment!

  • Sorting Tabular Data in ASP.NET MVC

    by Venkata Koppaka | Apr 17, 2010

    In this post I will talk about how to use TableSorter Plugin (http://tablesorter.com/docs/) in a ASP.NET MVC application.

    I will be using .NET 4 and ASP.NET MVC2 for the demo code in this post.

    I will be using AdventureWorks database that can be downloaded from codeplex as a sample database for SQL Server 2008.

     Add a ADO.NET Entity Data Model, for this demo purpose I have added Product table to the data designer.

    Add a Controller to the MVC Application, call it ProductsController.

    Create a Index Action Method in the controller and use the following code to get the data.

    1 namespace TableSorter_MVC.Controllers 
    2 { 
    3     public class ProductsController : Controller 
    4     { 
    5          
    6         AdventureWorksEntities db = new AdventureWorksEntities(); 
    7  
    8         public ActionResult Index() 
    9         { 
    10             IList<Product> products = db.Products.Take(200).ToList(); 
    11  
    12             return View(products); 
    13         } 
    14  
    15     } 
    16 } 

    Add a View to show a List of products and strongly type it to Product Table.

    Here is how a view code for the list would look like -

    1 <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<TableSorter_MVC.Models.Product>>" %> 
    2  
    3 <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 
    4     Index 
    5 </asp:Content> 
    6 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
    7     <h2> 
    8         Index</h2> 
    9     <table class="tablesorter"> 
    10         <thead> 
    11             <tr> 
    12                 <th> 
    13                     ProductID 
    14                 </th> 
    15                 <th> 
    16                     Name 
    17                 </th> 
    18                 <th> 
    19                     ProductNumber 
    20                 </th> 
    21                 <th> 
    22                     MakeFlag 
    23                 </th> 
    24                 <th> 
    25                     FinishedGoodsFlag 
    26                 </th> 
    27                 <th> 
    28                     Color 
    29                 </th> 
    30                 <th> 
    31                     SafetyStockLevel 
    32                 </th> 
    33                 <th> 
    34                     ReorderPoint 
    35                 </th> 
    36                 <th> 
    37                     StandardCost 
    38                 </th> 
    39                 <th> 
    40                     ListPrice 
    41                 </th> 
    42             </tr> 
    43         </thead> 
    44         <tbody> 
    45             <% foreach (var item in Model) 
    46                { %> 
    47             <tr> 
    48                 <td> 
    49                     <%: item.ProductID %> 
    50                 </td> 
    51                 <td> 
    52                     <%: item.Name %> 
    53                 </td> 
    54                 <td> 
    55                     <%: item.ProductNumber %> 
    56                 </td> 
    57                 <td> 
    58                     <%: item.MakeFlag %> 
    59                 </td> 
    60                 <td> 
    61                     <%: item.FinishedGoodsFlag %> 
    62                 </td> 
    63                 <td> 
    64                     <%: item.Color %> 
    65                 </td> 
    66                 <td> 
    67                     <%: item.SafetyStockLevel %> 
    68                 </td> 
    69                 <td> 
    70                     <%: item.ReorderPoint %> 
    71                 </td> 
    72                 <td> 
    73                     <%: String.Format("{0:F}", item.StandardCost) %> 
    74                 </td> 
    75                 <td> 
    76                     <%: String.Format("{0:F}", item.ListPrice) %> 
    77                 </td> 
    78             </tr> 
    79             <% } %> 
    80         </tbody> 
    81     </table> 
    82 </asp:Content> 
    83  

    Please Note : For the table sorter plugin to work the table should have a <thead> and <tbody> for heading and body respectively.

    Download the tablesorter.zip file from table sorter website. Add jquery.tablesorter.js file that comes in tablesorter.zip . For this example I picked the blue theme that comes in with tablesorter.

    Add the site.css file that is in the blue theme of tablesorter to the content folder of the MVC application. Add the 3 images(asc.gif,desc.gif,bg.gif) to the content folder of the application as well.

    Add these lines to include scripts and styles in the ASP.NET MVC master page.

    1 <head runat="server"> 
    2     <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title> 
    3     <link href="../../Content/Site.css" rel="stylesheet" type="text/css" /> 
    4     <link href="../../Content/tablsorter.css" rel="stylesheet" type="text/css" /> 
    5     <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
    6     <script src="../../Scripts/jquery.tablesorter.js" type="text/javascript"></script> 
    7 </head> 

    Once these are done, you just need to add a single line of script in Index.aspx view to make the table sortable.

    1     <script type="text/javascript"> 
    2         $(document).ready(function () { 
    3  
    4             $('.tablesorter').tablesorter(); 
    5  
    6         }); 
    7     </script> 

    Here is how the page is going to look like

    By default -

    After Sorting -

    And 

    Hope this helps

    I will be writing another post on how to use tablesorter in  ASP.NET application shortly.

    Cheers,

    Venkata

    Go comment!