触发复选框切换的ActionResult方法

本文关键字:ActionResult 方法 复选框 | 更新日期: 2023-09-27 18:04:04

我是一个半称职的Winforms/WPF/MVVM/c#/vb。Net开发,尝试自学ASP。Net与MVC,我有点困惑,你如何"引发事件"(我知道MVC不做事件,但这就是我把它等同于)的任何东西,不是一个表单的提交按钮。我有一个视图,控制器和一个简单的待办事项列表样式的应用程序模型,我想知道我如何能触发一些代码在控制器关闭复选框的切换。这是我的代码:

视图(视图/备忘录/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>

控制器(控制器/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");
        }
    }
}

模型(模型/ToDiListItem.cs):

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

所以,我要做的是能够切换"选中"状态表单上的复选框之一,并在我的控制器中调用"CheckBoxToggle"方法,传递项目的ID(类似于我如何在删除按钮上做到这一点)。我已经看到了一些与Javascript有关的东西(我对它一无所知)被提到,但我不知道我在用它做什么,到目前为止我所看到的都没有特别清楚地解释它。

如果有人知道我做这件事的最好方法,我将非常感激。

触发复选框切换的ActionResult方法

你可以监听复选框上的change事件并发送表单,其中包含一个与你的HttpPost操作方法参数同名的输入表单元素

更新你的标记,使它将有一个css类,我们将使用我们的jQuery选择器来连接复选框切换事件的事件监听器。您还可以将项目的Id保留在与参数(Id)同名的输入隐藏字段中

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

现在基本上你需要监听复选框上的click事件。

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

假设您已经将jQuery库加载到您的页面。

我也看到你正在接收字符串中的参数值并将其转换回int。为什么不使用int类型参数呢?您还可以添加一个名为isChecked的参数,以了解用户是否选中了复选框。选中后,参数值为非空

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