Sitecore MVC Custom forms with radio group buttons

Question

I am new to Sitecore 8 and I need to create a page that collects data input from a user, the page has different radio groups such as:

Then, Select the toppings which are five choices.

In a ASP.NET MVC aplication, I would get the pizza size and the toppings from database and populate a PizzaViewModel

public Class PizzaViewModel 
{
    public List<Sizes> Sizes { get ; set;}    
    public List<Toppings> Toppings { get ; set;}    
}

Then I would have two action in my Pizza Controller

• One that returns the view which renders the radio buttons and has the PizzaViewModel as a model.
• The Other action is PostPizzaSelection which expects PizzaSelectionModel which represents the user selections (for size and toppings)

This is completely clear for me in ASP.NET MVC, but how to do that in Sitecore? How would I create the data for sizes and toppings in Sitecore and then populate the PizzaViewModel from Sitecore? Is there any form control for radio group buttons?

Answer 1

You will need to have the following data templates:

1. Pizza Size Container
   This template will have no fields. It will only have insert options to add pizza sizes

2. Pizza Size
   This template will contain one field section 'Size Details' and one field of type Single line text called Size

In your content tree, you will have to create the Pizza Size Container, and inside it, all the different sizes that you will need.

Next step is to create a Controller Rendering. In the controller rendering, you will need to get to the Pizza Size Container found in your content tree using either the path of the item or item id of Pizza Size Container. Suppose the path is sitecore\Content\xxx\Shared\Pizza Sizes.

You can get the different pizza sizes using the code below.

 var pizzaContainer = Sitecore.Context.Database.GetItem("sitecore/Content/xxx/Shared/Pizza Sizes");
        var listOfSize = new List<PizzaSize>();
        if (pizzaContainer != null)
        {
            var pizzaSizes = pizzaContainer.Children.ToList();
            if (pizzaSizes.Any())
            {
                foreach (var pizzaSize in pizzaSizes)
                {
                    listOfSize.Add(new PizzaSize
                                       {
                                           SizeId = pizzaSize.ID.ToString(),
                                           SizeName = pizzaSize.Fields["Size"].Value
                                       });
                }
            }
        }

You need to have a partial view with model List<PizzaSize>. This is a snippet of the view. Notice the Html.BeginForm where the first parameter is the method name and the second one is the controller name.

@model List<PizzaSize>
@using (Html.BeginForm("PostPizzaSize", "Pizza", FormMethod.Post, 
new { @role = "form" }))
{
  if (Model != null && Model.Any())
  {
    <p>Select a Pizza Size</p> <!--Use a resource field to store this text in Sitecore-->
    foreach (var entry in Model)
    {
        @Html.RadioButton("pizzaSize", entry.SizeID) @entry.SizeName
    }
 <button type="submit">Submit</button>
  }
}

When submitting the form, the method PostPizzaSize will be called and the form collection will be passed as parameter.

  [System.Web.Http.HttpPost]
    public ActionResult PostPizzaSize(FormCollection form)
   {
     var size= form["pizzaSize"]; //the value will be the item id of the size
   }

Answer 2

You can store the static data (sizes and toppings) as follows:

• Create data templates for Pizza Size and Pizza topping
• Create a data source folder
• Inside the data source folder, create a folder for size items (small, medium and large) and another one for topping items

To view this data

• Create an MVC controller Rendering and assign it to your page
• Populate the rendering data source field with the data source folder created above
• Create a controller method and associate it with the rendering
• In the code of this method, read the data source, its children and grand children to populate the radio buttons accordingly.

To post selected data

• Create another controller rendering and associate it with another controller method (POST method)
• In the code of this method, read the posted data and manipulate it as you need