In order to get started with ASP.NET MVC wrapper for jQuery UI you need to follow the steps below :

  • Download the source code
  • Create a new ASP.NET MVC Razor application.
  • Add reference to MVC.Web.UI dll
  • Modify the web.config as you add MVC.Web.UI namespace 
    1. <add namespace="System.Web.Mvc" />
    2.   <add namespace="System.Web.Mvc.Ajax" />
    3.   <add namespace="System.Web.Mvc.Html" />
    4.   <add namespace="System.Web.Routing" />
    5.   <add namespace="MVC.Web.UI"/>
  • Add jquery-ui references --css and js-- files to the _Layout page in order to make them available for all views.
    1. <link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    2. <script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
  • Add this code to index.cshtml file
    1. @{
    2.     Html.MVCUI()
    3.     .WebTab()
    4.     .Name("tb")
    5.     .Items((it) =>
    6.             {
    7.                 it.Content(@<text>some content</text>)
    8.                 .Name("Razor");
    9.             })
    10.       .Items((it) =>
    11.             {
    12.                 it.Content(@<text>teadl</text>)
    13.                 .Name("Server");
    14.             })
    15.         .Render();
    16. }

 

  • Run the application, as result you should see below screen  

 

Enjoy!

-Rado

 

 

Last edited Apr 30, 2012 at 10:59 PM by rado_minchev, version 6

Comments

No comments yet.