Voting Control using MVC5 and Razor

• Download source files - 398.3 KB

Introduction

This is a simple voting control for MVC projects. It is implemented as a partial view, and so can be included wherever required. It was created in Visual Studio 2013 using MVC5.

Background

I originally wrote an article describing a voting control using MVC2. I decided it would be a good idea to update it to use MVC5 and Razor. I started by creating a new ASP.NET web application project in Visual Studio 2013. I opened the original MVC2 project in Visual Studio 2008 (it failed to convert in VS2013) and copied the files across as required. To start with assume that I have done all the changes, and everything works. That way I can show you how to use the code, and see what it looks like. Later in the article I'll describe how it all works and how I ported it from the MVC2 version.

Using the code

In the default Index.aspx page I removed the existing contents of the main div and replaced it with the following:

<div class="row">
    <div style="float:left">
        @{
            VoteDataModel petModel = (VoteDataModel)ViewData[VoteDataModel.GetViewDataName("Pet")];
            petModel.ControlWidth = 200;
            Html.RenderPartial("VoteControl", petModel);
        }
    </div>
    <p style="width:300px;padding-left:10px;overflow:hidden">
        This is a simple control with a width of 200px. Click on the button to vote,
        or click <b>Skip to Results</b> to see the results without voting.
    </p>
    <div style="clear:both"></div>
    <p>
        This next control has a long question and long answers. The width has been set
        to 400px.
    </p>
    @{
        VoteDataModel longQuestionModel = (VoteDataModel)ViewData[VoteDataModel.GetViewDataName("LongQuestionsAndAnswers")];
        longQuestionModel.ControlWidth = 400;
        Html.RenderPartial("VoteControl", longQuestionModel);
    }
    <p>
        You can get back to the questions by clicking on the <b>Back to Voting</b>
        link, or see the actual number of votes (instead of the percentages) by
        clicking on <b>Show Counts</b>
    </p>
</div>

In this example we are displaying two voting controls. You can see that we specify how the control appears (in this case just the width, but we could add any customisations that we wanted) and where to get the data from. The data - questions, answers and voting counts are all stored in a single XML file.

We need to add a reference to the model namespace at the top of the file:

@using VoteControlWebApp.Models

The controller (in this case HomeController.cs) needs to be modified in order to create the models:

public ActionResult Index()
{
    VoteDataModel model = new VoteDataModel("Pet", Request.PhysicalApplicationPath + "App_Data\\");
    model.Open();
    ViewData[model.ViewDataName] = model;
    model = new VoteDataModel("LongQuestionsAndAnswers", Request.PhysicalApplicationPath + "App_Data\\");
    model.Open();
    ViewData[model.ViewDataName] = model;

    return View();
} 

The entire page (having voted on both polls) then looks like:

So having seen how to use it, lets get back to how I implemented it.

The Voting Control Implementation

The control itself is implemented as a partial view in the Views::Shared folder - VodeControl.cshtml. All the data is passed in as the model - VoteModel.cs in the Models folder.

The XML files containing the data for each instance of the voting control are in the App_Data folder. There is one XML file per voting control instance.

There is a controller - VoteController.cs, in the Controllers folder. It's sole purpose is to process the incoming request when the Vote button is clicked. In order to route the request through to the VoteController, the following route was added to the RouteConfig.cs file:

routes.MapRoute(
    "VoteButton", // Route name
    "DoVote/{uniqueName}/{voteId}", // URL with parameters
    new { controller = "Vote", action = "DoVote" },
    new { voteId = @"\d{1,3}" } // voteId can only be numeric, and less than 1000
);

The voting control requires a style sheet and javascript (in the Content and Scripts folders), so I added references to them in _Layout.cshtml.

The entire list of files that I had to create or modify is shown below:

Under The Hood

static string GetViewDataName(string uniqueName) and string ViewDataName

public VoteDataModel(string name, string path)

public bool Open()

public bool DoVote(int voteId, string ipAddr)

public int GetPercentage(int index)

public int GetBarLength(int index, int controlWidth)

Points of Interest

Converting the code from MVC2 was relatively straightforward. The views required the most work - converting to Razor syntax, and there were some style sheet issues. The model required no modification.

History