C# ASP.NETMVC5中的投票系统

我想做一个投票系统，有一个单词和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> 
}

当我点击投票按钮时，我得到了这个URL

---

它说找不到来源。即HTTP404错误。我怎样才能解决这个问题？谢谢。

有一些方法可以做到这一点（

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

我希望你能明白

编辑

下面是另一种不用

AJAX

而使用原始模型的方法（至于

AJAX

方法，请参见另一个答案）

---

有一些方法可以做到这一点（

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

我希望你能明白

编辑

下面是另一种不用

AJAX

而使用原始模型的方法（至于

AJAX

方法，请参见另一个答案）

---

很简单。您可以将一个属性插入到您拥有的按钮中，以帮助您识别单击了哪个按钮

因此，对于第一个按钮，您可以执行：

…

对于第二个按钮，您可以执行相同的操作，但是属性

数据选项的值可以是'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
方法，并在脚本中获得
POST
参数“option”，该参数可以使用
Request.Form[“option”]
在
$.ajax（）中设置路径。
url
属性中使用。
非常简单。您可以将一个属性插入到您拥有的按钮中，以帮助您识别单击了哪个按钮

因此，对于第一个按钮，您可以执行：
…

对于第二个按钮，您可以执行相同的操作，但是属性
数据选项的值可以是'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
方法，并在脚本中获得
POST
参数“option”，该参数可以使用
Request.Form[“option”]
，您在
$.ajax（）中设置了
url
属性中的路径，模型应该是VoteOption吗？所以你建议使用链接而不是按钮，对吗？我们怎么能用这个按钮呢？我们如何用我的模型做到这一点？谢谢。我刚刚展示了其中一种方法。我将在今天晚些时候编辑我的答案以满足您的要求。我根据您的答案编辑了我的问题。它还不起作用。请看我编辑的问题。非常感谢。更改控制器中的参数顺序。查看我的编辑。在您的模型中，模型应该是VoteOption吗？所以您建议使用链接而不是按钮，对吗？我们怎么能用这个按钮呢？我们如何用我的模型做到这一点？谢谢。我刚刚展示了其中一种方法。我将在今天晚些时候编辑我的答案以满足您的要求。我根据您的答案编辑了我的问题。它还不起作用。请看我编辑的问题。非常感谢。更改控制器中的参数顺序。查看我的编辑。我应该为
url:“path/to/script”
编写什么？谢谢。你的GET/POST路线调用了你控制器中的一个方法。你能发送一个该路线的示例吗？谢谢。@jason类似于
/poll/submit/
的东西。您可以向该URL设置发出POST请求。我应该为
URL:“path/to/script”
编写什么？谢谢。你的GET/POST路线调用了你控制器中的一个方法。你能发送一个该路线的示例吗？谢谢。@jason类似于
/poll/submit/
的东西，您可以向该URL设置发出POST请求。
<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> 
}

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

            break;
        case "Vote2":

            break;
    }

    //more logic
}

$('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" );
    });

});