c# - Mvc Razor 在同一视图中列出和编辑每个列表项的提交按钮
问题描述
我是 MVC Razor 的新手,请帮我实现这个,我有 MVC Razor 视图我需要在同一个视图中实现列表和编辑在视图中,有一个列表将列出集合中的记录
@foreach (var item in Model.IncidentListmodel).
该列表包含每个记录的 TextArea、Button。
@Html.TextAreaFor(modelItem => item.Note, 2, 20, new { maxlength = 50 })
<input type="button" title="Save" value="Save" onclick="location.href='@Url.Action("Updateinc", "Incident", new { id = item.Id, name = item.Name, note = item.Note})'" />
我的目的是对于每个列表项记录,用户应该能够编辑填充在文本区域中的内容并修改内容,并且可以使用相应的按钮保存(该特定记录)。
更多细节:
下面是我正在尝试实现的详细信息每个列表项都包含一个文本区域(此处正确列出数据)和每个列表项的按钮。点击按钮时,文本区域中的新内容(我从 UI 修改)应该更新(我可以编写更新代码)。但是在点击按钮时,在更改文本区域的内容后,控制器只会获取旧值。
看法:
<table>
@foreach (var item in Model.IncidentListmodel)
{
string class1 = item.Id % 2 == 0 ? "orangeRaw" : "blueRaw";
<tr class="@class1">
<td>@Html.DisplayFor(modelItem => item.Name)</td>
<td>@Html.DisplayFor(modelItem => item.Title)</td>
<td>
@Html.TextAreaFor(modelItem => item.Note, 2, 20, new { maxlength = 50 })
</td>
<td>
<input type="button" title="Save" value="save" onclick="location.href='@Url.Action("Updateinc", "Incident", new { id = item.Id, name = item.Name, note = item.Note})'" />
</td>
</tr>
}
</table>
控制器:
public ActionResult Updateinc(int id,string name,string note,int? status )
{
return View();
}
解决方案
正如斯蒂芬穆克所说,你需要form
标签才能做到这一点。诀窍是要么使用for 循环生成正确的Ids,要么创建Partial View。HttpPost
我喜欢使用局部视图,因为它更干净一些。
楷模
public class SampleViewModel
{
public IList<IncidentListmodel> IncidentListmodel = new List<IncidentListmodel>();
}
public class IncidentListmodel
{
public int Id { get; set; }
public string Name { get; set; }
public string Title { get; set; }
public string Note { get; set; }
}
看法
@model AspNetMvc.Models.SampleViewModel
@foreach (var item in Model.IncidentListmodel)
{
@Html.Partial("_UpdatePartial", item)
}
局部视图 (_UpdatePartial.cshtml)
@model AspNetMvc.Models.IncidentListmodel
@using (Html.BeginForm("Updateinc", "Home"))
{
@Html.HiddenFor(m => m.Id)
@Html.HiddenFor(m => m.Name)
@Html.DisplayFor(m => m.Name)
@Html.DisplayFor(m => m.Title)
@Html.TextAreaFor(m => m.Note, 2, 20, new { maxlength = 50 })
<button type="submit">Update</button>
}
控制器
public class HomeController : Controller
{
public ActionResult Updateinc()
{
var model = new SampleViewModel
{
IncidentListmodel = new List<IncidentListmodel>
{
new IncidentListmodel {Id = 1, Name = "One", Note = "Sample text"},
new IncidentListmodel {Id = 2, Name = "Two"},
new IncidentListmodel {Id = 3, Name = "Three"},
}
};
return View(model);
}
[HttpPost]
public ActionResult Updateinc(IncidentListmodel viewModel)
{
// Rediret to different page.
return RedirectToAction("Index");
}
}
推荐阅读
- c# - 数据表第一行到二维数组 C#
- c# - Asp.Net Core 端点路由
- python-3.x - 如何将矩阵返回到向量
- c++ - 强制 Visual Studio 进入 STL 类/函数
- java - Java将匹配模式的文件从许多文件夹复制到另一个文件夹
- google-cloud-firestore - 当另一个字段更改时,如何使用谷歌云功能更新 Firestore 数据库中的字段?
- javascript - 如何修复“超出最大更新深度。在 componentWillUpdate 或 componentDidUpdate 中调用 setState。” 反应错误?
- python - 整个 tan() 函数的长度在 Python 中被两行截断?
- java - java.lang.OutOfMemoryError:在 maven 中运行 findbugs 时超出了 GC 开销限制
- laravel - Laravel 如何使用服务器发送事件捕获事件