Re: Join two pages to view data RSS

• • Reply
  KyleO33

  Member

  2 Points

  6 Posts

  Re: Join two pages to view data

  May 06, 2020 12:14 PM|KyleO33|LINK

  Hi,

  I am very new to programing and don't  even know what it is called to the point that my Subject might be incorrect so I will explain what I would like to do and am hoping that someone will know what I am referring too.

  I am using asp.net MVC code-first approach C# and have created the following models;

  Employee Model

  <div class="ud-component--base-components--code-block" ng-non-bindable="">

  1. public class Employee
  2. {
  3. public int EmployeeId { get; set; }
  4. public string Name { get; set; }
  5. public string Surname { get; set; }
  6. public DateTime DOB { get; set; }
  7. }
     

  </div>

  EmployeeContactDetail Model

  <div class="ud-component--base-components--code-block" ng-non-bindable="">

  1. public class EmployeeContactDetail
  2. {
  3. public int ContactId { get; set; }
  4. public string MobileNo{ get; set; }
  5. public string EmailAddress{ get; set; }
  6. }


  </div>

  On the right side of the Employee Index View page I have a partial view side menu with "Employee Contact Details" link.

  What I would like to do is that when a User creates a new employee the User will capture the "Name", "Surname" and "DOB" of the newly created employee and save. Then when the User clicks on the Employee Contact Details link it will redirect the User to the EmployeeContactDetail Create page where the Employee that was just created, his/her contact details will be added.

  The "Employee Contact Details" in the side menu is a hyperlink which will navigate the user to the Contact Details view page.

  These two models do not have a relationship with each other as I don't need a dropdown list for contact details in the Employee View.

  This now brings me to my question.

  How can I link the "Employee" and the "Employee Contact Detail" to be able to add data for a specific employee and then to recall this data in edit view?

  When a User adds a new employee, they will click on the "Employee Contact Details" hyperlink in the side menu which will open the contacts page and then the employee's contact details will be added. The employee details needs to be allocated to that employee.

  How does one do this?

  I will put in the work, I just don't know where to find the answer to my question on the Web, so if anyone has a link to a YouTube video or Microsoft Forum explanation on what I am asking please could you make it available. To make things worse for myself is that I don't know the programming term for what I would like to have done as per my question above so I am not sure what to search for.

  Regards,

  Kyle

• • Reply
  DA924

  Contributor

  4973 Points

  4262 Posts

  Re: Join two pages to view data

  May 06, 2020 03:33 PM|DA924|LINK

  Where is the relationship between Employee and EmployeeContactDetail? What ties a detail record to the parent record when the records are persisted to the database? Are you familiar with the concepts of a relational database? Are you use Entity Framework? 

  Are you familiar with viewmodel?

  https://www.dotnettricks.com/learn/mvc/understanding-viewmodel-in-aspnet-mvc

  If you find the post has answered your issue, then please mark post as 'answered'.
• • Reply
  YihuiSun

  Contributor

  3040 Points

  863 Posts

  Re: Join two pages to view data

  May 07, 2020 06:39 AM|YihuiSun|LINK

  Hi,  KyleO33

  Based on your needs, I think you need to use two models on one page, I suggest you can use Tuple.

  In addition, if there is no relationship between these two tables, then you can not modify his email information for a specific user, so  I added a field “ContactEmployeeId” to store the value of “EmployeeId” so that data can be added for a specific Employee.

  I made a detailed example, you can refer to it.

  Employee

  public class Employee
  
      {
  
          [Key]
  
          [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
  
          public int EmployeeId { get; set; }
  
          public string Name { get; set; }
  
          public string Surname { get; set; }
  
          public DateTime DOB { get; set; }
  
      }
  
      public class EmployeeContactDetail
  
      {
  
          [Key]
  
          public int ContactId { get; set; }
  
          public string MobileNo { get; set; }
  
          public string EmailAddress { get; set; }
  
          public int ContactEmployeeId { get; set; }
  
  }

  EmployeeController

  public ActionResult Index()
  
          {
  
              return View(db.Employees.ToList());
  
          }
  
          //GET
  
          public ActionResult AddEmployee()
  
          {
  
              return View();
  
          }
  
          //POST
  
          [HttpPost]
  
          public ActionResult AddEmployee(Employee employee)
  
          {
  
              employee.DOB = DateTime.Now;
  
              db.Employees.Add(employee);
  
              db.SaveChanges();
  
              return RedirectToAction("Index");
  
          }
  
          //GET
  
          public ActionResult EmployeeContactDetail(int Id)
  
          {
  
              var employee = db.Employees.Where(e => e.EmployeeId == Id).SingleOrDefault();
  
              var employeeContactDetail = new EmployeeContactDetail();
  
              if (employee != null){
  
                  var result = db.EmployeeContactDetails.Where(c => c.ContactEmployeeId == Id).SingleOrDefault();
  
                  if (result != null)
  
                  {
  
                      employeeContactDetail.ContactId = result.ContactId;
  
                      employeeContactDetail.ContactEmployeeId = result.ContactEmployeeId;
  
                      employeeContactDetail.EmailAddress = result.EmailAddress;
  
                      employeeContactDetail.MobileNo = result.MobileNo;
  
                  }
  
                  else
  
                  {
  
                      employeeContactDetail.ContactEmployeeId = employee.EmployeeId;
  
                  } 
  
              }
  
              var tuple = new Tuple<Employee, EmployeeContactDetail>(employee, employeeContactDetail);
  
              return View(tuple);
  
          }
  
          //POST
  
          [HttpPost]
  
          public ActionResult EmployeeContactDetail(EmployeeContactDetail Item2)
  
          {
  
              db.EmployeeContactDetails.AddOrUpdate(Item2);
  
              db.SaveChanges();
  
              return RedirectToAction("Index");
  
          }

  Index

  @model IEnumerable<yihuisunMVC.Models.Employee>
  @{
  
      ViewBag.Title = "Index";
  
  }
  
  <h2>Index</h2>
  
  @Html.ActionLink("Add Employee", "AddEmployee", "Employee")
  
  <table class="table">
  
      <tr>
  
          <th>
  
              @Html.DisplayNameFor(model => model.Name)
  
          </th>
  
          <th>
  
              @Html.DisplayNameFor(model => model.Surname)
  
          </th>
  
          <th>
  
              @Html.DisplayNameFor(model => model.DOB)
  
          </th>
  
          <th>Operation</th>
  
      </tr>
  
   
  
      @foreach (var item in Model)
  
      {
  
          <tr>
  
              <td>
  
                  @Html.DisplayFor(modelItem => item.Name)
  
              </td>
  
              <td>
  
                  @Html.DisplayFor(modelItem => item.Surname)
  
              </td>
  
              <td>
  
                  @Html.DisplayFor(modelItem => item.DOB)
  
              </td>
  
              <td>
  
                  @Html.ActionLink("Add Employee Contact Details", "EmployeeContactDetail", new { id = item.EmployeeId })
  
              </td>
  
          </tr>
  
      }
  
  </table>

  AddEmployee

  @model yihuisunMVC.Models.Employee
  
  @{
  
      ViewBag.Title = "AddEmployee";
  
  }
  
  <h2>AddEmployee</h2>
  
  @using (Html.BeginForm())
  
  {
  
      <div class="form-horizontal">
  
          <hr />
  
          <div class="form-group">
  
              @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
  
              <div class="col-md-10">
  
                  @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
  
              </div>
  
          </div>
  
          <div class="form-group">
  
              @Html.LabelFor(model => model.Surname, htmlAttributes: new { @class = "control-label col-md-2" })
  
              <div class="col-md-10">
  
                  @Html.EditorFor(model => model.Surname, new { htmlAttributes = new { @class = "form-control" } })
  
              </div>
  
          </div>
  
          <div class="form-group">
  
              <div class="col-md-offset-2 col-md-10">
  
                  <input type="submit" value="Add" class="btn btn-primary btn-block" />
  
              </div>
  
          </div>
  
      </div>
  
  } 

  EmployeeContactDetail

  @using yihuisunMVC.Models;
  @model Tuple<Employee, EmployeeContactDetail>
  
  @{
  
      ViewBag.Title = "EmployeeContactDetail";
  
  }
  
  <h2>EmployeeContactDetail</h2>
  
  @using (Html.BeginForm())
  
  {
  
  <div class="form-horizontal">
  
      <hr />
  
      @Html.HiddenFor(tuple => tuple.Item2.ContactEmployeeId, new { htmlAttributes = new { @class = "form-control" } })
  
      @Html.HiddenFor(tuple => tuple.Item2.ContactId, new { htmlAttributes = new { @class = "form-control" } })
  
      <div class="form-group">
  
          @Html.LabelFor(tuple => tuple.Item1.Name, htmlAttributes: new { @class = "control-label col-md-2" })
  
          <div class="col-md-10">
  
              @Html.DisplayFor(tuple => tuple.Item1.Name, new { htmlAttributes = new { @class = "form-control" } })
  
          </div>
  
      </div>
  
      <div class="form-group">
  
          @Html.LabelFor(tuple => tuple.Item1.Surname, htmlAttributes: new { @class = "control-label col-md-2" })
  
          <div class="col-md-10">
  
              @Html.DisplayFor(tuple => tuple.Item1.Surname, new { htmlAttributes = new { @class = "form-control" } })
  
          </div>
  
      </div>
  
      <div class="form-group">
  
          @Html.LabelFor(tuple => tuple.Item1.DOB, htmlAttributes: new { @class = "control-label col-md-2" })
  
          <div class="col-md-10">
  
              @Html.DisplayFor(tuple => tuple.Item1.DOB, new { htmlAttributes = new { @class = "form-control" } })
  
          </div>
  
      </div>
  
      <div class="form-group">
  
          @Html.LabelFor(tuple => tuple.Item2.MobileNo, htmlAttributes: new { @class = "control-label col-md-2" })
  
          <div class="col-md-10">
  
              @Html.TextBoxFor(tuple => tuple.Item2.MobileNo, new { htmlAttributes = new { @class = "form-control" } })
  
          </div>
  
      </div>
  
      <div class="form-group">
  
          @Html.LabelFor(tuple => tuple.Item2.EmailAddress, htmlAttributes: new { @class = "control-label col-md-2" })
  
          <div class="col-md-10">
  
              @Html.TextBoxFor(tuple => tuple.Item2.EmailAddress, new { htmlAttributes = new { @class = "form-control" } })
  
          </div>
  
      </div>
  
  </div>
  
  <div class="form-group">
  
      <div class="col-md-offset-2 col-md-10">
  
          <input type="submit" value="Modify" class="btn btn-primary btn-block" />
  
      </div>
  
  </div>
  
  }

  Here is the result.

  

   
  Best Regards,

  YihuiSun

  ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >
• • Reply
  KyleO33

  Member

  2 Points

  6 Posts

  Re: Join two pages to view data

  May 07, 2020 03:58 PM|KyleO33|LINK

  Hi DA924,

  Thank-you for your response.

  In answer to your questions;

  Where is the relationship between Employee and EmployeeContactDetail? I have not created one as I don't want a dropdown list in the Employee Create/Edit View and I am not sure what relationship to have between the two classes where you don't have a dropdown list.

  What ties a detail record to the parent record when the records are persisted to the database? I have no idea how to answer this question 

  Are you familiar with the concepts of a relational database? I have a very limited knowledge as I am still teaching myself.

  Are you use Entity Framework? I am using Microsoft Visual Studio - ASP.NET Web Application (.NET Framework) MVC Code-First and then I let MVC create the CRUD functions which generates the code.

  Regards,

  Kyle

• • Reply
  DA924

  Contributor

  4973 Points

  4262 Posts

  Re: Join two pages to view data

  May 07, 2020 09:54 PM|DA924|LINK

  Where is the relationship between Employee and EmployeeContactDetail?

  I have not created one as I don't want a dropdown list in the Employee Create/Edit View and I am not sure what relationship to have between the two classes where you don't have a dropdown list.

  A relationship between the two table records in a relational database such as MS SQL Server has to exist in the database tables. How else are you to know that a Contact record for an Employee belongs to the Employee?

  What ties a detail record to the parent record when the records are persisted to the database?

  I have no idea how to answer this question

  This is basic database administration that you should know and understand.

  https://mariadb.com/kb/en/relational-databases-foreign-keys/

  Are you familiar with the concepts of a relational database?

  I have a very limited knowledge as I am still teaching myself.

  You should have some basic database administration knowledge for a relational database before you try to program against one, like MS SQL Server..

  Are you use Entity Framework?

  I am using Microsoft Visual Studio - ASP.NET Web Application (.NET Framework) MVC Code-First and then I let MVC create the CRUD functions which generates the code.

  Yes you are correct in some of it. But you are using ADO.NET Entity Framework Code First approach and not MVC Code first there is no such element called MVC code first.

  https://blog.bitsrc.io/what-is-an-orm-and-why-you-should-use-it-b2b6f75f5e2a

  https://www.entityframeworktutorial.net/what-is-entityframework.aspx

  https://www.c-sharpcorner.com/UploadFile/ff2f08/identifying-entity-framework-development-approaches/

  You should understand the basic purpose of MVC a UI design pattern.

  https://www.codeproject.com/Articles/228214/Understanding-Basics-of-UI-Design-Pattern-MVC-MVP

  In general, you should understand and know the basics of the technologies you're trying to use before you try to program with them. 

  If you find the post has answered your issue, then please mark post as 'answered'.