ASP.NET MVC 5 中的投票系统

Question

我想做一个投票系统，这个词会有一个单词和 5 个选项。这些选项经过投票。这是我的模型：

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; }

在 Word/Details 中，我添加了投票按钮。他们在这里：

    <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> 
}

这里是控制器：

[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");
    }

当我点击投票按钮时，我会得到这个 URL http://localhost:55590/WordController/Vote/1 它说找不到源。即 HTTP 404 错误。我怎样才能解决这个问题？谢谢。

Answer 1

有一些方法可以做到这一点（Ajax 就是其中之一），但最简单的方法是添加指向新操作的链接并传递所需的参数。

首先我会将您的模型更改为

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; }
}

这样您就不必重复 5 次投票/选项组合。

那么您的视图将如下所示：

<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>
}

所以我在这里使用的是一个传递参数的新路由请求。

在你的一个控制器中添加一个新方法：

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

希望你能明白。

编辑

这是另一种使用原始模型而不使用AJAX 的方法（至于AJAX 方法，请参阅其他答案）

<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> 
}

将 YOURSCONTROLLER 更改为将放置此方法的控制器：

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

            break;
        case "Vote2":

            break;
    }

    //more logic
}

Answer 2

很简单。您可以向您拥有的按钮插入一个属性，以帮助您确定单击了哪个按钮。

因此，对于您的第一个按钮，您可以：<button data-option="1" ...>...</button>

对于您的第二个按钮，您可以执行相同的操作，但属性 data-option 的值可能是 '2'

使用jQuery，您可以这样做：

$('button').on('click', function (event) {
    event.preventDefault(); // Prevent default action.

    var option = $(this).data('option');

    // Use ajax and send.

    var action = $.ajax({
        method: "POST"; // or "GET"
        url: "path/to/script", 
        data: {
            'option': option
        }
    })
    .done(function() {
        alert( "success" );
    })
    .fail(function() {
        alert( "error" );
    })
    .always(function() {
        alert( "complete" );
    });

});

所以，这段代码的作用是，它检测到一次点击，然后我们找出选项编号并通过 AJAX 将其发送到您的应用程序。您可以做的是，您可以在应用程序的脚本中使用POST 方法，并在您设置路径的脚本中使用Request.Form["option"] 获取可以使用的POST 参数“选项”。你的 $.ajax() url 属性。