Get two tables data on a single MVC View - asp.net-mvc

Question

I am not so much experienced with MVC in ASP.NET. Currently working on Visual Studio 2015 Community on a demo MVC project.
I am having difficulties having two tables combined in a view.
Following are two tables of concern from few tables.
I want to show data from both the tables at the same time in a single View(HTML Page).
TABLE - COMPLAIN
CREATE TABLE [dbo].[COMPLAIN](
[JOBSHEET_NO] [int] IDENTITY(1,1) NOT NULL,
[COMPANY_NAME] [nvarchar](50) NULL,
[MODEL_NAME] [nvarchar](50) NULL,
[IMEI_SRNO] [nvarchar](50) NULL,
[BATTERY_WITH_MOBILE] [nvarchar](50) NULL,
[MEMORYCARD_WITH_MOBILE] [nvarchar](50) NULL,
[FAULT_ID] [int] NOT NULL,
[CUSTOMER_NAME] [nvarchar](50) NULL,
[CUSTOMER_MOBILE] [nvarchar](50) NULL,
[ASSIGNED_TO_TECHNICIAN] [nvarchar](50) NULL,
[REMARKS] [nvarchar](500) NULL,
[CREATE_TIMESTAMP] [datetime] NULL,
[LAST_EDIT_TIMESTAMP] [datetime] NULL,
[IN_TIMESTAMP] [datetime] NULL,
[USER_ID] [nvarchar](50) NULL,
[ESTIMATE_AMOUNT] [float] NULL,
[ESTIMATE_AMOUNT_OK_FROM_CUSTOMER] [nvarchar](50) NULL,
[OUT_TIMESTAMP] [datetime] NULL,
[JOBSHEET_COMPLETE_STATUS] [nvarchar](50) NULL,
[NARRATION] [nvarchar](500) NULL,
CONSTRAINT [PK_COMPLAIN] PRIMARY KEY CLUSTERED
(
[JOBSHEET_NO] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
TABLE - REPAIRING
CREATE TABLE [dbo].[REPAIRING](
[JOBSHEET_NO] [int] NOT NULL,
[IN_TIMESTAMP] [datetime] NULL,
[CREATE_TIMESTAMP] [datetime] NULL,
[LAST_EDIT_TIMESTAMP] [datetime] NULL,
[ESTIMATE_AMOUNT] [float] NULL,
[ESTIMATE_AMOUNT_OK_FROM_CUSTOMER] [nvarchar](50) NULL,
[START_REPAIRING_TIMESTAMP] [datetime] NULL,
[END_REPAIRING_TIMESTAMP] [datetime] NULL,
[OUT_TIMESTAMP] [datetime] NULL,
[USER_ID] [nvarchar](50) NULL,
[NARRATION] [nvarchar](500) NULL,
CONSTRAINT [PK_REPAIRING] PRIMARY KEY CLUSTERED
(
[JOBSHEET_NO] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
ALTER TABLE [dbo].[REPAIRING] WITH CHECK ADD CONSTRAINT [FK_REPAIRING_COMPLAIN] FOREIGN KEY([JOBSHEET_NO])
REFERENCES [dbo].[COMPLAIN] ([JOBSHEET_NO])
GO
ALTER TABLE [dbo].[REPAIRING] CHECK CONSTRAINT [FK_REPAIRING_COMPLAIN]
GO
I am having FK relationship between those two tables.
I would also like to know if data from both the tables can be available without any FK relationship.
Following are my models.
COMPLAIN.cs
namespace WebMSM.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
public partial class COMPLAIN
{
[Key]
[ReadOnly(true)]
[Required]
[DisplayName("JOBSHEET NO")]
public int JOBSHEET_NO { get; set; }
[Required]
[DisplayName("COMPANY NAME")]
public string COMPANY_NAME { get; set; }
[Required]
[DisplayName("MODEL NAME")]
public string MODEL_NAME { get; set; }
[Required]
[DisplayName("IMEI")]
public string IMEI_SRNO { get; set; }
[Required]
[DisplayName("BATTERY WITH MOBILE")]
public string BATTERY_WITH_MOBILE { get; set; }
[Required]
[DisplayName("MEMORY CARD WITH MOBILE")]
public string MEMORYCARD_WITH_MOBILE { get; set; }
[Required]
[DisplayName("FAULT")]
public int FAULT_ID { get; set; }
[Required]
[DisplayName("CUSTOMER NAME")]
public string CUSTOMER_NAME { get; set; }
[Required]
[DisplayName("CUSTOMER MOBILE")]
public string CUSTOMER_MOBILE { get; set; }
[Required]
[DisplayName("TECHNICIAN")]
public string ASSIGNED_TO_TECHNICIAN { get; set; }
[DisplayName("REMARKS")]
public string REMARKS { get; set; }
public Nullable<System.DateTime> CREATE_TIMESTAMP { get; set; }
public Nullable<System.DateTime> LAST_EDIT_TIMESTAMP { get; set; }
public Nullable<System.DateTime> IN_TIMESTAMP { get; set; }
[Required]
[DisplayName("USER ID")]
public string USER_ID { get; set; }
[DisplayName("ESTIMATE AMOUNT")]
public Nullable<double> ESTIMATE_AMOUNT { get; set; }
[DisplayName("ESTIMATE AMOUNT OK?")]
public string ESTIMATE_AMOUNT_OK_FROM_CUSTOMER { get; set; }
public Nullable<System.DateTime> OUT_TIMESTAMP { get; set; }
[DisplayName("STATUS")]
public string JOBSHEET_COMPLETE_STATUS { get; set; }
[Required]
[DisplayName("NARRATION")]
public string NARRATION { get; set; }
public virtual MASTER_FAULT MASTER_FAULT { get; set; }
public virtual REPAIRING REPAIRING { get; set; }
}
}
REPAIRING.cs
namespace WebMSM.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
public partial class REPAIRING
{
[Required]
[DisplayName("JOBSHEET NO")]
public int JOBSHEET_NO { get; set; }
public Nullable<System.DateTime> IN_TIMESTAMP { get; set; }
public Nullable<System.DateTime> CREATE_TIMESTAMP { get; set; }
public Nullable<System.DateTime> LAST_EDIT_TIMESTAMP { get; set; }
[Required]
[DisplayName("ESTIMATE AMOUNT")]
public Nullable<double> ESTIMATE_AMOUNT { get; set; }
[Required]
[DisplayName("ESTIMATE AMOUNT OK?")]
public string ESTIMATE_AMOUNT_OK_FROM_CUSTOMER { get; set; }
[DisplayName("START REPAIR TIME")]
public Nullable<System.DateTime> START_REPAIRING_TIMESTAMP { get; set; }
[DisplayName("END REPAIR TIME")]
public Nullable<System.DateTime> END_REPAIRING_TIMESTAMP { get; set; }
[DisplayName("OUT TIME")]
public Nullable<System.DateTime> OUT_TIMESTAMP { get; set; }
public string USER_ID { get; set; }
[DisplayName("NARRATION")]
public string NARRATION { get; set; }
public virtual COMPLAIN COMPLAIN { get; set; }
}
}
Now I have created a RepairingController which displays list of COMPLAINs on its index View.
From that View, by Clicking 'Edit' link, I would like to go to Edit view in which data from both the tables about that record should be available.
Following is RepairingController.cs
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using WebMSM.Models;
namespace WebMSM.Controllers
{
public class RepairingController : Controller
{
private MSMContext db = new MSMContext();
// GET: Repairing
public ActionResult Index()
{
return View(db.COMPLAINs.ToList());
}
// GET: Repairing/Details/5
public ActionResult Details(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
REPAIRING rEPAIRING = db.REPAIRINGs.Find(id);
if (rEPAIRING == null)
{
return HttpNotFound();
}
return View(rEPAIRING);
}
// GET: Repairing/Create
public ActionResult Create()
{
return View();
}
// POST: Repairing/Create
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "JOBSHEET_NO,IN_TIMESTAMP,CREATE_TIMESTAMP,LAST_EDIT_TIMESTAMP,ESTIMATE_AMOUNT,ESTIMATE_AMOUNT_OK_FROM_CUSTOMER,START_REPAIRING_TIMESTAMP,END_REPAIRING_TIMESTAMP,OUT_TIMESTAMP,USER_ID,NARRATION")] REPAIRING rEPAIRING)
{
if (ModelState.IsValid)
{
db.REPAIRINGs.Add(rEPAIRING);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(rEPAIRING);
}
// GET: Repairing/Edit/5
public ActionResult Edit(int? id)
{
var lstOKNOTOK = new List<SelectListItem>()
{
new SelectListItem {Text="OK",Value="OK" },
new SelectListItem {Text="NOT_OK",Value="NOT_OK" },
};
ViewBag.ESTIMATE_AMOUNT_OK_FROM_CUSTOMER = lstOKNOTOK;
REPAIRING rEPAIRING = db.REPAIRINGs.Find(id);
if (rEPAIRING == null)
{
return HttpNotFound();
}
return View(rEPAIRING);
}
// POST: Repairing/Edit/5
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "JOBSHEET_NO,IN_TIMESTAMP,CREATE_TIMESTAMP,LAST_EDIT_TIMESTAMP,ESTIMATE_AMOUNT,ESTIMATE_AMOUNT_OK_FROM_CUSTOMER,START_REPAIRING_TIMESTAMP,END_REPAIRING_TIMESTAMP,OUT_TIMESTAMP,USER_ID,NARRATION")] REPAIRING rEPAIRING)
{
if (ModelState.IsValid)
{
db.Entry(rEPAIRING).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(rEPAIRING);
}
// GET: Repairing/Delete/5
public ActionResult Delete(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
REPAIRING rEPAIRING = db.REPAIRINGs.Find(id);
if (rEPAIRING == null)
{
return HttpNotFound();
}
return View(rEPAIRING);
}
// POST: Repairing/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed(int id)
{
REPAIRING rEPAIRING = db.REPAIRINGs.Find(id);
db.REPAIRINGs.Remove(rEPAIRING);
db.SaveChanges();
return RedirectToAction("Index");
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
}
}
Following is Edit.cshtml View For RepairingController.cs
#model WebMSM.Models.REPAIRING
#{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>REPAIRING</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.JOBSHEET_NO)
<div class="form-group">
#Html.LabelFor(model => model.JOBSHEET_NO, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-6">
#Html.TextBoxFor(model => model.JOBSHEET_NO, new { #class = "form-control" ,#readonly="readonly"} )
#Html.ValidationMessageFor(model => model.JOBSHEET_NO, "", new { #class = "text-danger" })
</div>
</div>
#*<div class="form-group">
#Html.LabelFor(model => model.IN_TIMESTAMP, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-6">
#Html.EditorFor(model => model.IN_TIMESTAMP, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.IN_TIMESTAMP, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CREATE_TIMESTAMP, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-6">
#Html.EditorFor(model => model.CREATE_TIMESTAMP, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CREATE_TIMESTAMP, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.LAST_EDIT_TIMESTAMP, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-6">
#Html.EditorFor(model => model.LAST_EDIT_TIMESTAMP, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.LAST_EDIT_TIMESTAMP, "", new { #class = "text-danger" })
</div>
</div>*#
<div class="form-group">
#Html.LabelFor(model => model.ESTIMATE_AMOUNT, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-6">
#Html.EditorFor(model => model.ESTIMATE_AMOUNT, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ESTIMATE_AMOUNT, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ESTIMATE_AMOUNT_OK_FROM_CUSTOMER, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-6">
#Html.DropDownListFor(model => model.ESTIMATE_AMOUNT_OK_FROM_CUSTOMER,ViewBag.ESTIMATE_AMOUNT_OK_FROM_CUSTOMER as SelectList, new { #class = "form-control" } )
#Html.ValidationMessageFor(model => model.ESTIMATE_AMOUNT_OK_FROM_CUSTOMER, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.START_REPAIRING_TIMESTAMP, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-6">
#Html.EditorFor(model => model.START_REPAIRING_TIMESTAMP, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.START_REPAIRING_TIMESTAMP, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.END_REPAIRING_TIMESTAMP, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-6">
#Html.EditorFor(model => model.END_REPAIRING_TIMESTAMP, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.END_REPAIRING_TIMESTAMP, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.OUT_TIMESTAMP, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-6">
#Html.EditorFor(model => model.OUT_TIMESTAMP, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.OUT_TIMESTAMP, "", new { #class = "text-danger" })
</div>
</div>
#*<div class="form-group">
#Html.LabelFor(model => model.USER_ID, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-6">
#Html.EditorFor(model => model.USER_ID, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.USER_ID, "", new { #class = "text-danger" })
</div>
</div>*#
<div class="form-group">
#Html.LabelFor(model => model.NARRATION, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-6">
#Html.EditorFor(model => model.NARRATION, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.NARRATION, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-5 col-md-6">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Thanks in advance.

Answer 1

You should create a new view model class which has properties to represent data from both the tables
public class ComplaintDetailsVm
{
public Int JobSheetNo {set;get;}
public string CompanyName {set;get;}
public string CustomerName {set;get;}
public Decimal EsitmatedAmount {set;get;}
//Add other properties AS NEEDED
}
And use that for your view.
public ActionResult Edit(int id)
{
var vm = new ComplaintDetailsVm();
var r =db.REPAIRINGs.Find(id);
if(r!=null)
{
vm.JobSheetNo = r.JOBSHEET_NO;
vm.CustomerName= r.CUSTOMER_NAME;
//Map other properties here as needed
if(r.REPAIRING !=null)
{
vm.EstimatedAmount = r.ESTIMATED_AMOUNT;
//Map other properties here as needed
}
}
return View(vm);
}
And your view
#model ComplantDetailsVm
#using(Html.BeginForm())
{
#Html.TextBoxFor(s=>s.CompanyName)
#Html.TextBoxFor(s=>s.EstimatedAmount)
#Html.HiddenFor(s=>s.JobSheetNo)
<input type="submit" />
}
So when user posts the form, we need to read the data from our viewmodel object and use that for saving
[HttpPost]
public ActionResult Edit(ComplantDetailVm model)
{
if(ModelState.IsValid)
{
var e=db.COMPLAINs.FirstOrDefault(s=>s.JOBSHEET_NO==model.JobSheetNo);
if(e!=null)
{
// Update the property values
e.CompanyName = model.CompanyName;
//Map other properties also
db.Entry(e).State = EntityState.Modified;
db.SaveChanges();
//to do : Redirect to Success message page.
}
}
return View(model);
}