我的任务是将我们的 Silverlight(SL) 应用程序更改为 MCV，因为 SL 的开发生命周期已经停止。我是 MVC 的新手，但我找不到一个很好的教程如何使用 MVC 做一个简单的 CRUD。基本上，要求是
1.) 在 UI 中，应该有左右两个窗格。
2.) 在左窗格中，“学生”实体列表的网格/数据网格视图和
3.) 右侧是显示学生详细信息的数据表。
4.) 当您在左窗格（数据网格）中选择一个项目时，右窗格（数据表单）中的详细信息将发生变化。
5.) 数据表单应该能够执行 CRUD 功能。
我非常渴望找到一个教程，但我找不到适合我需要的教程。我将非常感谢那些可以通过提供一些链接或视频教程来帮助我的人。希望阅读可以提供帮助的 cmets。
【问题讨论】：
我不会编写一些无错误的代码，而是会给出一些指导如何使用一些伪代码来做到这一点。这将帮助您入门。
1.) 在 UI 中，应该有左右两个窗格。
如何向您的页面添加 2 个 div。尝试使用 CSS（宽度 50% ? float : Left 等）。此页面将是下面描述的第 2 项的剃刀视图。
2.) 在左侧窗格中，“学生”实体列表的网格/数据网格视图
您必须创建一个名为 List 的操作方法（或任何您喜欢的方法）。在里面，您需要查询您的数据库并获取学生，将其转换为视图模型列表并将其发送到视图。在视图中，您遍历项目并显示一个网格，我的意思是一个 HTML 表格。
public ActionResult List()
{
var list= new List<StudentViewModel>();
//Hard coded for demo. you may replace with values from your db
list.Add(new StudentViewModel { Id=1, Name="Shyju" });
return View(list);
}
视图模型是一个简单的 POCO
public class StudentViewModel
{
public int Id {set;get;}
public string Name {set;get;}
}
因此您的 List.cshtml 视图将被强类型化为 StudentViewModel 列表
@model List<StudentViewModel>
<table>
@foreach(var item in Model)
{
<tr>
<td>@item.Name</td>
</tr>
}
</table>
3.) 右侧是显示学生详细信息的数据表单。
添加用于创建表单、输入字段和保存按钮的 HTML 标记。
当您在左窗格（数据网格）中选择一个项目时，将会发生变化。
添加一些 jQuery 代码来监听表格行上的点击事件，读取 StudentId（您可以将其设置为 tr 的数据属性值）并使用该 Id 并进行 ajax 调用以获取有关该数据的数据学生，将其加载到输入字段中。
更新表格标记以具有数据属性
<tr class="myTr" data-studid="@item.Id"><td>@item.Name</td></tr>
在tr上监听点击事件的javascript
$(function(){
$("tr.myTr").click(function(e){
e.preventDefault();
var studId=$(this).data("stupid");
var url ="@Url.Action("Details","Student")";
//make an ajax call to get the student details
$.getJSON(url+"?id="+studId,function(res){
$("#NameFieldId").val(res.Name);
});
});
});
您需要有一个 Details 操作方法以 json 格式提供学生详细信息
public ActionResult Details(int id)
{
var student = new StudentViewModel();
student.Name="Read from DB and set this";
return Json(student,JsonReqestBehaviour.AllowGET);
}
5.) 数据表单应该能够执行 CRUD 功能。
使用 jQuery ajax，将表单发布到 http post 操作方法并保存在那里。检查this 和this 和this 以供参考。
【讨论】：