[How] MVC multiple grid with different data

I need some help on how to achived the multiple grid in my mvc razor form with different data. Currently I only have 1 grid.

Here's my Model:

namespace wmssoft_srm.Models
{
public class ServiceList
{
public List GetData(DataTable oDT)
{
try
{
List slData = new List();
for (int i = 0; i < oDT.Rows.Count; i++)
{
/*Parse date*/
string date = oDT.Rows[i]["ORDDATE"].ToString();
string result = DateTime.ParseExact(date, "yyyyMMdd", CultureInfo.InvariantCulture).ToString("yyyy-MM-dd");
ServiceListData sl = new ServiceListData();
sl.date = Convert.ToDateTime(result);
sl.so_no = oDT.Rows[i]["ORDNUMBER"].ToString();
sl.serial = oDT.Rows[i]["SERIAL"].ToString();
sl.status = oDT.Rows[i]["STATUS"].ToString();
sl.technician = oDT.Rows[i]["TECH"].ToString();
slData.Add(sl);
}
return slData;
}
catch (Exception)
{
throw new NotImplementedException();
}
}
}
public class ServiceListData
{
public DateTime date { get; set; }
public string so_no { get; set; }
public string serial { get; set; }
public string status { get; set; }
public string technician { get; set; }
}
public enum Status
{
Open,
Close
}
}

And in my controller:

My problem is that, how can I call the 2nd grid from my controller?

public ActionResult Index()
{
WCF_Service.InterfaceClient wmsSR = new WCF_Service.InterfaceClient();
DataSet dsl = new DataSet();
DataSet dsO = new DataSet();
string a = "ValidateCredentials";
string b = "~~ ~~ ~~";
b = wmsSR.fCallService("GetServiceList", b, ref dsl, ref dsO);
if (b == "OK ~~")
{
if (dsO.Tables[0].Rows.Count > 0)
{
DataTable oDT = new DataTable();
oDT = dsO.Tables[0];
wmssoft_srm.Models.ServiceList slData = new Models.ServiceList();
var myList = slData.GetData(oDT);
return View(myList);
}
}
return View();
}

Also this is my View, the allJobs is my 2nd grid. The myJobs is my 1st grid which is working as expected based from my controller.

@model List

@using GridMvc.Html
<div id="Tabs" role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#tabs-1" aria-controls="tabs-1" role="tab" data-toggle="tab">My Jobsa>li>
<li><a href="#tabs-2" aria-controls="tabs-2" role="tab" data-toggle="tab">All Jobsa>li>
<li><a href="#tabs-3" aria-controls="tabs-3" role="tab" data-toggle="tab">Unallocated Jobsa>li>
ul>
<div class="tab-content" style="padding-top: 20px">
<div role="tabpanel" class="tab-pane active" id="tabs-1">
@Html.Grid(Model).Columns(columns =>
{
columns.Add(foo => foo.date).Titled("Date").SetWidth(30).Sortable(true); /*BTG 11/10/2017 - old .Filterable(true)*/
columns.Add(foo => foo.so_no).Titled("SO No.").SetWidth(30).Sortable(true); //.Filterable(true);
columns.Add(foo => foo.serial).Titled("Serial").SetWidth(30).Sortable(true); //.Filterable(true);
columns.Add(foo => foo.status).Titled("Status").SetWidth(30).Sortable(true); //.Filterable(true);
columns.Add(foo => foo.technician).Titled("Technician").SetWidth(30).Sortable(true); //.Filterable(true);
}).WithPaging(5).Named("myJob")
div>
<div role="tabpanel" class="tab-pane" id="tabs-2">
@Html.Grid(Model).Columns(columns =>
{
columns.Add(foo => foo.date).Titled("Date").SetWidth(30).Sortable(true); /*BTG 11/10/2017 - old .Filterable(true)*/
columns.Add(foo => foo.so_no).Titled("SO No.").SetWidth(30).Sortable(true); //.Filterable(true);
columns.Add(foo => foo.serial).Titled("Serial").SetWidth(30).Sortable(true); //.Filterable(true);
columns.Add(foo => foo.status).Titled("Status").SetWidth(30).Sortable(true); //.Filterable(true);
columns.Add(foo => foo.technician).Titled("Technician").SetWidth(30).Sortable(true); //.Filterable(true);
}).WithPaging(5).Named("allJobs")
div>
div>
div>

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ankit Sharma9y ago
Accepted answer
Hi,

you can use partial views for that.

Please refer here

https://stackoverflow.com/questions/15477676/multiple-views-in-the-same-page-mvc-asp-net

Alternatively you can use tables also instead of Grid. Refer this demo

https://www.aspsnippets.com/Articles/Display-data-in-Single-View-from-Multiple-Tables-in-ASPNet-MVC.aspx
+3
Bryan Gomez9y ago
Using Tables make simple. Thank you
-1
Ramesh Palanivel9y ago
Hi Bryan,

Create your model class like this,
public class Student
{
public int id{get;set;}
public string Name{get;set;}
}


public class Department
{
public int id{get;set;}
public string DeptName{get;set;}
}

public class AllList
{
public List studentlist{get;set;}
public List departmentlist{get;set;}
}
+1