ASP.NET MVC 5'de Oylama Sistemi

Question

Bir oylama sistemi kurmak istiyorum, bu kelime için bir kelime ve 5 seçenek olacak. Bu seçenekler oylanır. İşte benim modelim:

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/Ayrıntılar'da, oylama için düğmeler ekledim. İşte onlar: Bir Oy düğmesini tıkladığınızda

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

, bu URL'yi http://localhost:55590/WordController/Vote/1 olsun ve kaynak bulunamıyor diyor ki: Burada

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

denetleyici olduğunu. Yani HTTP 404 hatası. Bunu nasıl düzeltebilirim? Teşekkürler.

Answer 1

Bunu yapmanın birkaç yolu vardır (Ajax bunlardan biridir), ancak en basit olanı yeni eylemi işaret eden bağlantı eklemektir ve gerekli argümanları iletir.

Önce

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

ila 5 sefer oylama/opsiyon kombinasyonunu tekrarlamak Eğer yoksa bu şekilde modelinizi değiştirmek istiyorum.

Sonra görünümü şu şekilde görünecektir: geçti argümanlarla yeni rota için bir istek olduğunu burada kullanılan yani ne

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

Ben anladınız umut: senin denetleyicileri birinde

yeni bir yöntem ekleyin. İşte DÜZENLEME

bu yöntem konulacağı yere

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

değişim YOURSCONTROLLER kontrolöre (AJAX yöntemi için olduğu gibi diğer yanıt bakın) AJAX kullanmadan orijinal modeli kullanılarak başka bir yoludur:

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

      break; 
     case "Vote2": 

      break; 
    } 

    //more logic 
} 

Answer 2

Oldukça kolay. Hangi düğmenin tıklandığını tanımlamanıza yardımcı olan düğmelere bir özellik ekleyebilirsiniz.

Yani, ilk düğmenin, bunu yapabilirsiniz: <button data-option="1" ...>...</button>

Ve ikinci düğme için, sen data-option olmak '2'

jQuery kullanma olabilir aynı şeyi ama özelliğin değerini yapabileceği

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

}); 

Yani, bu kodu mu kadarıyla, tıklama algılar ve biz seçenek sayısını öğrenmek ve uygulamanıza AJAX yoluyla gönderebilir:, bunu yapabilirsiniz.Yapabilecekleriniz, uygulamanızın bir betiğine POST yöntemini kullanabilir ve $.ajax()url özniteliğinizde bir yol belirlediğiniz komut dosyasında Request.Form["option"] kullanarak kullanılabilen POST parametresini 'seçenek' olarak kullanabilirsiniz.