MVC Data Form Entry with DataGrid (CRUD)

Question

I am tasked to change our Silverlight(SL) application to MCV since the development lifecycle of SL has already been stopped. I am new to MVC but I can't find a good tutorial how to do a simple CRUD with MVC. Basically, the requirements are

1.) in the UI, there should be two pane, left and right.

2.) In left pane, a grid/data grid view of list of "Student" entity and on the

3.) right side is a data form which displays the Student's details.

4.) The details in right pane, the data form, will change as you select an item in left pane, the data grid.

5.) The data form should be able to do the CRUD functionality.

I am very desperate to find a tutorial but I can't find one that fits my needs. I will be very thankful to those who can help me with this by giving some links or video tutorial. Hope to read comments that could help.

you could begin reading from this https://msdn.microsoft.com/en-us/library/gg416515(v=vs.108).aspx — Buda Gavril, Dec 16 '15 at 06:10

score 1 · Accepted Answer · edited May 23 '17 at 11:44

Instead of writing some error free code, I am going to give some directions how to do this with some pseudo code. This will help you to get started.

1.) in the UI, there should be two pane, left and right.

How about adding 2 divs to your page. Try playing with the CSS (Width 50% ? float : Left etc..). This page will be the razor view of Item 2 described below.

2.) In left pane, a grid/data grid view of list of "Student" entity

You will have to create an action method called List (or whatever you like). Inside that you need to query your db and get the students, convert that to a list of view models and send it to the view. In the view, you loop through the items and display a grid, i mean an HTML table.

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

The view model is a simple POCO

public class StudentViewModel
{
  public int Id {set;get;}
  public string Name {set;get;}
}

So your List.cshtml view will be strongly typed to a list of StudentViewModel

@model List<StudentViewModel>
<table>
@foreach(var item in Model)
{
  <tr>
      <td>@item.Name</td>
  </tr>
}
</table>

3.) right side is a data form which displays the Student's details.

Add HTML markup for creating a form ,Input fields and a save button.

will change as you select an item in left pane, the data grid.

Add some jQuery code to listen to the click event on the table row, read the StudentId (you can set this as the data attribute value of the tr) and use that Id and make an ajax call to get the data about that student, load that in the input fields.

Update the table markup to have the data attribute

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

The javascript to listen to the click event on the tr

$(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);
      });
   });

});

You need to have a Details action method to give a student detail in json format

public ActionResult Details(int id)
{
  var student = new StudentViewModel();
  student.Name="Read from DB and set this";
  return Json(student,JsonReqestBehaviour.AllowGET);
}

5.) The data form should be able to do the CRUD functionality.

using jQuery ajax, post the form to an http post action method and save it there. Check this and this and this for reference.

MVC Data Form Entry with DataGrid (CRUD)

1 Answers1