Auslösen einer ActionResult-Methode aus einem Kontrollkästchen umschalten

Question

Ich bin ein semi-kompetenter Winforms/WPF/MVVM/C#/vb.Net-Entwickler, versucht, ASP.Net mit MVC zu unterrichten und ich bin ein wenig verwirrt Wie Sie "Ereignisse auslösen" (ich weiß, MVC macht keine Ereignisse, aber das ist es, womit ich es gleichstelle) von allem, was nicht der Submit-Button eines Formulars ist. Ich habe eine View, Controller und ein Model für eine einfache To-Do-Liste Stil-Anwendung und ich frage mich, wie ich etwas Code in der Steuerung aus dem Wechsel des Kontrollkästchens auslösen kann. Dies ist mein Code:

Ansicht (Views/ToDo/Index.cshtml):

@{ 
ViewBag.Title = "Index"; 
} 
@model List<ToDo.Models.ToDoListItem> 
<h2>To Do List</h2> 

<form action="/ToDo/Create" method="post"> 
    <div> 
     <input name="ToDoItem" /> 
     <input type="submit" value="Add Task" /> 
    </div> 
</form> 


<div> 
    <ul> 
     @if (Model != null) 
     { 
      foreach (var item in Model) 
      { 
       <li> 
        <form action="/ToDo/Delete/@item.ItemId " method="post"> 
         <input type="checkbox" checked="@item.isChecked" /> 
         @if (item.isCompleted) 
         { 
          <label style="text-decoration-line:line-through">@item.ItemText</label> 
         } 
         else 
         { 
          <label>@item.ItemText</label> 
         } 
         <input type="submit" value="Delete" /> 
        </form> 
       </li> 
      } 
     } 

    </ul> 
</div> 

Controller (Controller/ToDoController.cs):

namespace ToDo.Controllers 
{ 
    public class ToDoController : Controller 
    { 
     // GET: ToDo 
     public ActionResult Index() 
     { 
      return View(Models.ToDoListItem.GetAll()); 
     } 

     [HttpPost] 
     public ActionResult Create(string toDoItem) 
     { 
      Models.ToDoListItem.Create(toDoItem, Models.ToDoListItem.GetNextID()); 
      return RedirectToAction("Index"); 
     } 

     [HttpPost] 
     public ActionResult Delete(string id) 
     { 
      int itemIdentifier = Convert.ToInt32(id); 
      Models.ToDoListItem.Delete(itemIdentifier); 

      return RedirectToAction("Index"); 
     } 

     [HttpPost] 
     public ActionResult CheckBoxToggle(string id) 
     { 
      int itemIdentifier = Convert.ToInt32(id); 
      Models.ToDoListItem.CompleteToggeled(itemIdentifier); 
      return RedirectToAction("Index"); 
     } 
    } 
} 

Modell (Modelle/ToDiListItem.cs): So

namespace ToDo.Models 
{ 
    public class ToDoListItem 
    { 
     #region Fields 

     private int _itemId; 
     private string _itemText; 
     private bool _isCompleted; 

     #endregion 

     #region Events 

     #endregion 

     #region Properties 

     public int ItemId 
     { 
      get 
      { 
       return _itemId; 
      } 
      set 
      { 
       _itemId = value; 
      } 
     } 

     public string ItemText 
     { 
      get 
      { 
       return _itemText; 
      } 
      set 
      { 
       _itemText = value; 
      } 
     } 

     public bool isCompleted 
     { 
      get 
      { 
       return _isCompleted; 
      } 
      set 
      { 
       _isCompleted = value; 
      } 
     } 

     public string isChecked 
     { 
      get 
      { 
       if (isCompleted) 
        return "checked"; 
       else 
        return string.Empty; 
      } 
     } 
     #endregion 


     #region Public Methods 

     public static void Create(string toDoItem, int itemId) 
     { 
      var item = new ToDoListItem(); 
      item.ItemText = toDoItem; 
      item.ItemId = itemId; 

      GlobalVariables.Tasks.Add(item); 
     } 

     public static void Delete(int id) 
     { 
      foreach (ToDoListItem item in GlobalVariables.Tasks) 
      { 
       if (item.ItemId == id) 
       { 
        GlobalVariables.Tasks.Remove(item); 
        break; 
       } 
      } 
     } 

     public static void CompleteToggeled(int id) 
     { 
      foreach (ToDoListItem item in GlobalVariables.Tasks) 
      { 
       if (item.ItemId == id) 
       { 
        item.isCompleted = !item.isCompleted; 
       } 
      } 
     } 

     public static List<ToDoListItem> GetAll() 
     { 
      return GlobalVariables.Tasks; 
     } 

     public static int GetNextID() 
     { 
      return ++GlobalVariables.CurrentID; 
     } 

     #endregion 

    } 

} 

, was ich tue bin auf der Suche nach zu können ist die „geprüft“ Zustand eines der Kästchen auf dem Formular und rufen Sie die „C hin- und herzuschalten heckBoxToggle "Methode in meinem Controller, die ID des Artikels (ähnlich wie ich es tat auf der Schaltfläche Löschen). Ich habe etwas gesehen, das mit Javascript zu tun hat (worüber ich nichts weiß), aber ich habe keine Ahnung, was ich damit mache und nichts, was ich bisher gesehen habe, erklärt es besonders deutlich.

Wenn jemand den besten Weg für mich weiß, etwas zu tun, würde einige Hilfe sehr geschätzt werden.

Answer 1

Sie zum change Ereignisse auf den Checkbox hören und veröffentlichen das Formular, die ein Eingabeformular Element mit dem gleichen Namen wie die Httppost Aktion Methodenparameter enthält.

Aktualisieren Sie Ihr Markup, so dass es eine CSS-Klasse hat, die wir als unseren jQuery-Selektor verwenden werden, um den Ereignis-Listener für das Checbox-Umschalt-Ereignis zu verkabeln. Auch können Sie die ID des Elements in einem Eingabefeld versteckt halten mit dem gleichen Namen wie die Parameter (Id)

@using (Html.BeginForm("CheckBoxToggle", "Todo")) 
{ 
    <input type="checkbox" class="myChk" name="isChecked" checked="checked"/> 
    <input type="hidden" name="id" value="@item.Id" /> 
} 

Jetzt im Grunde müssen Sie das Click-Ereignis auf dem Kontrollkästchen hören.

$(function(){ 

    $(".myChk").click(function() { 
     $(this).closest("form").submit(); 
    }); 

}); 

Angenommen, Sie jQuery-Bibliothek auf Ihrer Seite geladen haben.

Ich sehe auch, dass Sie den Parameterwert in Zeichenfolge empfangen und ihn wieder in int konvertieren. Warum nicht den int-Typ param verwenden? Sie können auch einen weiteren Parameter namens isChecked hinzufügen, um festzustellen, ob der Benutzer das Kontrollkästchen aktiviert oder deaktiviert hat. Wenn es aktiviert ist, ist der Parameterwert nicht null

[HttpPost] 
public ActionResult CheckBoxToggle(int id,string isChecked) 
{ 
    Models.ToDoListItem.CompleteToggeled(id); 
    return RedirectToAction("Index"); 
}