Question

我的任务是将Silverlight（SL）应用程序更改为MCV，因为SL的开发生命周期已经停止。我是MVC的新手但我找不到一个很好的教程如何用MVC做一个简单的CRUD。基本上，要求是

1。）在UI中，应该有两个窗格，左右两个。

2。）在左窗格中，“学生”实体列表的网格/数据网格视图和

3。）右侧是显示学生详细信息的数据表单。

4。）右窗格中的详细信息（数据表单）将在您选择左窗格（数据网格）中的项目时更改。

5.）数据表单应该能够执行CRUD功能。

我非常渴望找到一个教程，但我找不到符合我需求的教程。我将非常感谢能够通过提供一些链接或视频教程来帮助我的人。希望阅读可能有用的评论。

Answer 1

我不打算编写一些无错误的代码，而是用一些伪代码给出一些指示。这将有助于您开始使用。

1。）在UI中，应该有两个窗格，左右两个。

如何在页面中添加2个div。尝试使用CSS（宽度50％？浮动：左等...）。该页面将是下面描述的第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代码来监听表行上的click事件，读取StudentId（您可以将其设置为tr的数据属性值）并使用该Id并进行ajax调用以获取有关该数据的数据学生，在输入字段中加载。

更新表格标记以具有数据属性

<tr class="myTr" data-studid="@item.Id"><td>@item.Name</td></tr>

用于收听tr

上的click事件的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 action方法并将其保存在那里。查看this和this以及this以供参考。

使用DataGrid进行MVC数据表单输入（CRUD）

1 个答案: