触发复选框切换的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有关的东西(我对它一无所知)被提到,但我不知道我在用它做什么,到目前为止我所看到的都没有特别清楚地解释它。
如果有人知道我做这件事的最好方法,我将非常感激。
你可以监听复选框上的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");
}