ASP.NET MVC MonthYearPicker Setup

Home >Shield UI Documentation >MonthYearPicker >ASP.NET MVC >ASP.NET MVC MonthYearPicker Setup

ShieldUI MonthYearPicker for ASP.NET MVC is a server-side wrapper component implemented in the ASP.NET MVC HTML helper pattern. Getting started with the component is a breeze. Simply add a reference to the Shield.Mvc.UI assembly in your ASP.NET MVC 3 or MVC 4 project and add the Shield.Mvc.UI namespace to the <pages> node of the <system.web.webpages.razor> section in your ~/Views/Web.config configuration file:

<?xml version="1.0"?>

<configuration>
  <configSections>
    <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
      <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
      <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
    </sectionGroup>
  </configSections>

  <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Optimization"/>
        <add namespace="System.Web.Routing" />
        <add namespace="Shield.Mvc.UI"/>
      </namespaces>
    </pages>
  </system.web.webPages.razor>
...

Since the ShieldUI Month/Year Picker for MVC is a wrapper of javascript Month/Year Picker component you need to include the references to the CSS and JavaScript resources in the HEAD section of your webpage:

<head>
    <link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="js/shieldui-all.min.js" type="text/javascript"></script>
</head>

The javascript resources for client side component you can find on the download page under “ShieldUI JavaScript” section.

The ShieldUI Month/Year Picker code for ASP.NET MVC follows the MVC helper pattern by providing a set of chainable methods that configure the widgets. The C# helpers API is a 1:1 reflection of the JavaScript widgets configuration, so you only have to get familiar with a single set of configuration options:

// JavaScript Month/Year Picker demo
$("#datepicker1").shieldMonthYearPicker();

// ASP.NET MVC Month/Year Picker demo
@(Html.ShieldMonthYearPicker()
    .Name("datepicker1")
)

To see the configuration options in action, please refer to our online demos.