How can I have a specific tab refreshed on post in Asp.Net Core Razor

I have a tabbed Razor page, on load there is no data to be retrieved from server, active tab set for first tab. However, when I update data on one tab and post it I want the page to get only data for that tab. What I have so far is:

html:

<ul class="nav nav-tabs" id="PTWTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="PTW-tab" data-toggle="tab" href="#PTW" aria-controls="ptw" aria-selected="true" style="width:200px">Permit To Worka>
li>
<li class="nav-item">
<a class="nav-link" id="HazId-tab" data-toggle="tab" href="#HazId" aria-controls="hazid" aria-selected="false" style="width:200px">Hazard Identificationa>
li>
<li class="nav-item">
<a class="nav-link" id="GasTest-tab" data-toggle="tab" href="#GasTest" aria-controls="gt" aria-selected="false" style="width:200px">Gas Testinga>
li>
<li class="nav-item">
<a class="nav-link" id="IsoCert-tab" data-toggle="tab" href="#IsoCert" aria-controls="isocert" aria-selected="false" style="width:200px">Isolation Certificatea>
li>
ul>

cshtml for post:

public async Task OnPostIsoCertAsync(int? PTWNo)
{
if (!ModelState.IsValid)
{
return Page();
}
var newIsoCert = await _context.ICContents.FindAsync(PTWNo);
if (newIsoCert == null)
{
return NotFound();
}
if (await TryUpdateModelAsync(
newIsoCert,
"ICContent", // Prefix for form value.
c => c.IdICD,
c => c.IsoStep,
c => c.EquipmentID,
c => c.EquipmentDescription,
c => c.EnSource,
c => c.IsType,
c => c.IsMethod,
c => c.LockNo,
c => c.PreparedBy,
c => c.ImplementedBy,
c => c.VerifiedBy,
c => c.IsStatus))
{
await _context.SaveChangesAsync();
return Page();
}
return Page();
}

and cshtml for Get is:

public async Task OnGetIsoCertAsync(int ptwNoId)
{
PTWIsoCert = await (from a in _context.ICDatas.Where(a => a.PTWNo == ptwNoId)
orderby a.IdICD
join b in _context.ICContents on a.IdICD equals b.IdICD into TempData1
from c in TempData1
select new PTWIsoCert
{
IdICD = a.IdICD,
PTWNo = ptwNoId,
IsoDate = a.IsoDate,
IsoStep = c.IsoStep,
EquipmentID = c.EquipmentID,
EquipmentDescription = c.EquipmentDescription,
EnSource = (int)c.EnSource,
IsType = (int)c.IsType,
IsMethod = (int)c.IsMethod,
LockNo = c.LockNo,
PreparedBy = c.PreparedBy,
ImplementedBy = c.ImplementedBy,
VerifiedBy = c.VerifiedBy,
IsStatus = (int)c.IsStatus
}).ToListAsync();
return Page();
}

What I want is after I post data in the selected tab, to get it from server and keep the tab active and display it. Html for display is already setup, I didn't post it to not load too much data

Let me show you one example

This is your main view

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">script>
<script type="text/javascript">
$(function () {
$(".nav_link").click(function () {
//Custom attribute data_id is used to store the ID
//Get the ID
var id = $(this).attr("data_id");
$.ajax({
url: '@Url.Action("DisplayEmployees", "MyTest")',
type: "post",
dataType: "html",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ id: id }), //add parameter
success: function (data) {
//success
$('#ProductsDiv'+id).html(data); //populate the tab content.
},
error: function () {
alert("error");
}
});
});
});
script>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" class="nav_link" data_id="1" href="#home">Homea>li>
<li><a data-toggle="tab" class="nav_link" data_id="2" href="#menu1">Menu 1a>li>
<li><a data-toggle="tab" class="nav_link" data_id="3" href="#menu2">Menu 2a>li>
ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOMEh3>
<p>Some content.p>
<br />
<div id="ProductsDiv1">
div>
div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1h3>
<p>Some content in menu 1.p><br />
<div id="ProductsDiv2">
div>
div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2h3>
<p>Some content in menu 2.p><br />
<div id="ProductsDiv3">
div>
div>
div>
div>

In this main view you have to fetch content of partial view and replace here

[HttpPost]
public PartialViewResult DisplayEmployees(string id)
{
int empid = Convert.ToInt32(id);
//According to the id to query the database
var query = from ee in context.Employees
where ee.EmployeeID == empid
select ee;
return PartialView("DisplayEmployeeWebGrid", query.ToList());
}

So when you calling this method from ajax it will fetch html from partial view where DisplayEmployeeWebGrid is a partial view

So in place of DisplayEmployeeWebGrid you have to write your tab name and create a partial view with that tab name
how to create it ? you can find it from here
https://www.c-sharpcorner.com/UploadFile/ff2f08/partial-view-in-mvc/

Thank you

4 Replies

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

Marius Vasile6y ago
It looks I am getting there but, I have an asp-page-handler for post, for each tab like below example (main view one tab)
"GasTest" class="tab-pane fade">

Gas Testing


        "UpdateGasTest" method="post">
            class="row no-gutters">
                class="col-1">
                    for="PTWNo" class="form-control badge-primary">PTWNo
                    for="GasTesting.PTWNo" class="form-control" style="font-size:9px" />
class="col-2">
for="DateGT" class="form-control badge-primary">Gas Testing Date
for="GasTesting.DateGT" class="form-control" style="font-size:9px" />

How can I have a specific tab refreshed on post in Asp.Net Core Razor

Gas Testing

Isolation Certificate