• Overview
• Scenarios
• What is widget zone?
• Extend Action
  • What is shared page
    • One Action many web page - Including route values
    • One Action One web pages - Ignore route values
• WidgetZone helper method

Overview

---

This document is describe how to extend the existing Actions as DotNetAge web pages to enable widgets.

Scenarios

---

• DotNetAge provide 12 page layout for widgets, some times developers want to create another layouts for their needs.
• Migrate the existing Mvc web application to DotNetAge.

In these scenarios developers can use Ajax.Dna().WidgetZone() to define the web page layouts to enable widgets on page.

What is widget zone?

---

WidgetZone is a kind of layout element and it's a container for widgets. It only avalidable in DotNetAge web page. Users can drag and drop widgets among widget zones or change the widget position in zone.

Extend Action

---

As mentioned previously, WidgetZone only avalidable in DotNetAge web page how to deal with the existing Actions? DotNetAge provide a simple way to extend the existing Action as web page to enable widgets.

Developers only need to specfied the SiteMapActionAttribute on the Action.
Example：

public class MyArticleController:Controller
{
   [SiteMapAction]
   public ActionResult List()
   {
      return View();
   }
}

The first time user requried the List action after SiteMapAction specified, DotNetAge will create a web page instance for List action. And the List will become a web page and has all ablility of web page.

For more about dynamic web page please refer to [creating and managing webpages]

The following table list the properties for the SiteMapActionAttribute class:

Property	Type	Description
IsShared	bool	Gets/Sets a value to identity the action is shared and only create page for this action once time.
ShowInMenu	bool	Gets/Sets the whether the web page can shows in the main menu.
ParentAction	string	Gets/Sets the parent web page action name.
Title	string	Gets/Sets the web page title text.
Description	string	Gets/Sets the web page description text.
Template	string	Gets/Sets the web page template file url.
IgnoreRouteDataKeys	string array	Gets/Sets which route data value should be ignored.

What is shared page

---

In DotNetAge every web page has their unique url the Action web page is created by DotNetAge. What will happend when Action has paramater (route values or querystring) ?

For example we have a ProductsController and there is a Detail Action in it.

public class ProductsController:Controller
{
   public ActionResult Detail(int id)
   { 
      return View();
   }
}

The user requests the Detail Action from browser maybe like below:

http://www.domain.com/products/detail/1
http://www.domain.com/products/detail/2

There are two situations developer must be know :

1. One Action has One web page - Create a web page for Detail action this is call shared page.
2. One Action has Many web pages - Create web pages for each requests of Detail action.

One Action many web page - Including route values

---

DotNetAge will create webpages for each request has different route values.
From the example above , the DotNetAge will create two pages for Detail action , one is product id=1 the other is product id=2. That means every product has their own web page and widgets and users can be

customized each of theme.

One Action One web pages - Ignore route values

---

The other scenario is all products use one page to show their detail. Now we should set the IsShared to true and must set the ignore route data key(s).

public class ProductsController:Controller
{
   [SiteMapAction(IgnoreRouteDataKey=new string[] {"id"}, IsShared=true)]
   public ActionResult Detail(int id)
   { 
      return View();
   }
}

WidgetZone helper method

---

Developers can use the WidgetZone helper method to define widget zones. The WidgetZone helper method has two parameters:

• title - Gets/Sets the widget zone display text.
• name - Gets/Sets the widget zone name, it must be unique in current page.

Examlpe:

<table style="width: 100%;">
    <colgroup>
        <col valign="top" width="33%" />
        <col valign="top" width="33%" />
        <col valign="top" width="33%" />
    colgroup>
    <tr>
        <td>
            @{ Ajax.Dna().WidgetZone("Left zone", "zone0").Render();  }
        td>
        <td>
            @{  Ajax.Dna().WidgetZone("Middle zone", "zone1").Render(); }
        td>
        <td>
            @{ Ajax.Dna().WidgetZone("Right zone", "zone3").Render(); }
        td>
    tr>
table>

 

---

• Average:
• Читает
  (1557)
• Trackback
  (0)
• Постоянная ссылка