Voting System in ASP.NET MVC 5

Jason Published at Dev

jason

I want to make a voting system, there will be one word and 5 options for that word. Those options are voted. Here is my model :

public int WordID { get; set; }
public string WordName { get; set; }
public string Option1 { get; set; }
public int Vote1 { get; set; }
public string Option2 { get; set; }
public int Vote2 { get; set; }
public string Option3 { get; set; }
public int Vote3 { get; set; }
public string Option4 { get; set; }
public int Vote4 { get; set; }
public string Option5 { get; set; }
public int Vote5 { get; set; }

In Word/Details, I added buttons for voting. Here they are :

    <dt>
       Word Name 
    </dt>

    <dd>
        @Html.DisplayFor(model => model.WordName)
    </dd>
  @using (Html.BeginForm("Vote", "WordController", new { id = Model.WordID}, FormMethod.Post))
        {

    <dt>
      1st Option
    </dt>

    <dd>
        @Html.DisplayFor(model => model.Option1) <button type="submit" name="submit1" value="Vote1"> Vote</button>
    </dd>

    <dt>
        @Html.DisplayNameFor(model => model.Vote1)
    </dt>

    <dd>
        @Html.DisplayFor(model => model.Vote1)
    </dd>

    <dt>
        2nd option
    </dt>

    <dd>
        @Html.DisplayFor(model => model.Option2) <button type="submit" name="submit2" value="Vote2"> Vote</button>
    </dd>

    <dt>
        @Html.DisplayNameFor(model => model.Vote2)
    </dt>

    <dd>
        @Html.DisplayFor(model => model.Vote2)
    </dd> 
}

Here is the controller :

[HttpPost]
    public ActionResult Vote(string submit, int? id)
    {
        Word word = db.Word.Find(id);


        if(submit == "Vote1")
        {
            word.Vote1++;
        }
        else if (submit == "Vote2")
        {
            word.Vote2++;
        }
        else if (submit == "Vote3")
        {
            word.Vote3++;
        }
        else if (submit == "Vote4")
        {
            word.Vote4++;
        }
        else if (submit == "Vote5")
        {
            word.Vote5++;
        }

        return RedirectToAction("Index");
    }

When I click a Vote button, I get this URL http://localhost:55590/WordController/Vote/1 and it says source cannot be found. Namely HTTP 404 error. How can I fix this? Thanks.

gzaxx

There are a bit of ways of doing this (Ajax is one of them), but the simplest one would be to add link pointing to new action and pass arguments needed.

First I'd change your model to

public sealed class Word
{
    public int WordID { get; set; }
    public string WordName { get; set; }

    public Enumerable<VoteOption> Options { get; set; }
}

public sealed class VoteOption
{
    public int Vote { get; set; }
    public string Option { get; set; }
}

this way you don't have to repeat 5 time vote/option combination.

Then your view would look like this:

<dt>
   Word Name 
</dt>

<dd>
    @Html.DisplayFor(model => model.WordName)
</dd>

@foreach (var vote in Model.Options)
{
  <dt>
    1st Option
  </dt>

  <dd>
      @Html.DisplayFor(model => model.Option)
      <button type="button"> Vote</button>
      <a href='@Url.RouteUrl('vote', new { wordId = Model.WordId, vote = option.Vote })'> vote</a>
  </dd>

  <dt>
      @Html.DisplayNameFor(model => model.Vote)
  </dt>

  <dd>
      @Html.DisplayFor(model => model.Vote)
  </dd>
}

so what I used here is a request to new route with arguments passed.

In one of yours controllers add a new method:

[HttpGet]
[Route("vote-{wordId:int}-{vote:int}", Name = "vote")
public ActionResult Vote(int wordId, int vote)
{
    //handle request here
}

I hope you get the idea.

EDIT

Here is another way using your original model without using AJAX (as for AJAX method see the other answer)

<dt>
    Word Name
</dt>

<dd>
    @Html.DisplayFor(model => model.WordName)
</dd>

@using (Html.BeginForm("Vote", "Word", new { id = Model.WordID}, FormMethod.Post))
{
    <dt>
        1st Option
    </dt>

    <dd>
        @Html.DisplayFor(model => model.Option1) <button type="submit" name="submit" value="Vote1"> Vote</button>
    </dd>

    <dt>
        @Html.DisplayNameFor(model => model.Vote1)
    </dt>

    <dd>
        @Html.DisplayFor(model => model.Vote1)
    </dd>

    <dt>
        2nd option
    </dt>

    <dd>
        @Html.DisplayFor(model => model.Option2)<button type="submit" name="submit" value="Vote2"> Vote</button>
    </dd>

    <dt>
        @Html.DisplayNameFor(model => model.Vote2)
    </dt>

    <dd>
        @Html.DisplayFor(model => model.Vote2)
    </dd> 
}

change YOURSCONTROLLER to controller where this method will be placed:

[HttpPost]
public ActionResult Vote(int? id, string submit)
{
    switch(submit)
    {
        case "Vote1":

            break;
        case "Vote2":

            break;
    }

    //more logic
}

Collected from the Internet

Please contact [email protected] to delete if infringement.