Voting System in ASP.NET MVC 5

Question

Ich möchte ein Wahlsystem machen, es wird ein Wort und 5 Optionen für dieses Wort geben. Diese Optionen werden abgestimmt. Hier ist mein Modell:

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 habe ich Schaltflächen zum Wählen hinzugefügt. Hier sind sie:

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

Hier ist die Steuerung:

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

Wenn ich einen Vote Button klicken, bekomme ich diese URL http://localhost:55590/WordController/Vote/1 und es sagt Quelle nicht gefunden werden kann. Nämlich HTTP 404 Fehler. Wie kann ich das beheben? Vielen Dank.

Answer 1

Es gibt ein paar Möglichkeiten, dies zu tun (Ajax ist einer von ihnen), aber die einfachste würde Link hinzufügen, die auf neue Aktion zeigt und übergeben Argumente benötigt.

Zuerst würde ich Ihr Modell ändern

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

diese Weise müssen Sie nicht mehr als 5 Mal Stimme/Optionskombination zu wiederholen.

Dann würde Ihre Ansicht wie folgt aussehen:

<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, was ich mit Argumenten übergeben eine Anfrage an neue Route hier verwendet.

In einer von Ihnen Controller fügen Sie eine neue Methode:

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

Ich hoffe, Sie bekommen die Idee.

EDIT

Hier ist ein weiterer Weg, um Ihr ursprüngliches Modell ohne AJAX zu verwenden (wie bei AJAX Methode der andere Antwort sehen)

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

Änderung YOURSCONTROLLER an der Steuerung, wo diese Methode platziert werden soll:

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

      break; 
     case "Vote2": 

      break; 
    } 

    //more logic 
} 

Answer 2

Ziemlich einfach. Sie können den Schaltflächen, die Sie verwenden, ein Attribut hinzufügen, mit dem Sie erkennen können, auf welche Schaltfläche geklickt wurde.

für die erste Taste So könnten Sie tun: <button data-option="1" ...>...</button>

Und für Ihre zweite Taste, können Sie das gleiche tun, aber den Wert des Attributs data-optionjQuery ‚2‘

verwenden könnte Sie können dies tun:

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

}); 

Also, was dieser Code tut, ist es ein Klick erfasst, und wir die Möglichkeit, Anzahl und senden es durch AJAX Ihrer Anwendung erfahren.Sie können die Methode POST für ein Skript Ihrer Anwendung verwenden und den POST Parameter 'option' abrufen, der unter Verwendung von Request.Form["option"] in dem Skript verwendet werden kann, in dem Sie in Ihrem $.ajax()$.ajax() Attribut einen Pfad festgelegt haben.