Develop Tabstrips and display details from database

Question

Hi All, Please provide source code in MVVC to display 3 Tabs and dispaly the details in each tab. For example I need like Emp, Dept, Mgr details. If I click on Emp Tab then Employee details shoul display, similarly Dept details should display after clicking on Dept Tab and Manager details should display on click on Mgr tab. All details should display from database. Please suggesest. Thanks, SagarPallavi

Sachin Singh · Answer

Please use below code , let me know if you face any problem public ActionResult Panel() { return View(); } public ActionResult ShowDetails( string tabVal) { if (tabVal== "Employee" ){ // retrieve employee details from Database return PartialView( "_PartialEmployee" ); } if (tabVal == "Department" ) { // retrieve Department details from Database return PartialView( "_PartialDepartment" ); } if (tabVal == "Manager" ) { // retrieve Manager details from Database return PartialView( "_PartialManager" ); } return RedirectToAction( "Panel" ); } Panel "~/Scripts/jquery-3.4.1.min.js" > a { display: inline-block; } "#" data-id= "Employee" class = "bg-primary panel text-white" >Employee Details "#" data-id= "Department" class = "bg-primary panel text-white" >Department Details "#" data-id= "Manager" class = "bg-primary panel text-white" >Manager Details "main" > "panelEmployee" style= "display:none;border:1px solid red" > Employee Details "panelDepartment" style= "display: none; border: 1px solid red" > Department Details "panelManager" style= "display: none; border: 1px solid red" > Manager Details $( ".panel" ).click(function () { debugger; var tabValue = $( this ).attr( "data-id" ); $( '[id^="panel"]' ).hide(); $.ajax({ type: "post" , url: "/home/ShowDetails" , dataType: "html" , data: { tabVal: tabValue }, traditional: true , cache: false , success: function (partialViewReturnedByController) { debugger; $( "#panel" + tabValue).html(partialViewReturnedByController); $( "#panel" + tabValue).show(); } }) });

Sagar Pallavi · Answer

Hi Sachin, In the above code I noticed an issue with populating view. For example, return PartialView( "_PartialDepartment" ); when I create partial view then it is not populating that page. I can launch debug but nothing is happening after the above statement. Please let me know how to poplate the data. Thank you.