Answered by:
Redirect to Edit action but have the attachment tab active on bootstrap tabs?

Question
-
User-183185495 posted
I am using bootstrap vertical tabs for this display. I am uploading from the FileAttachment Controller but I want to have the Attachments tab open
My question is I am using RedirectToAction to go back to the edit action view which includes the bleow but how do I redirect where the tab will be active for me?
<div class="row"> <div class="col-5 col-sm-3"> <div class="nav flex-column nav-tabs h-100" id="vert-tabs-tab" role="tablist" aria-orientation="vertical"> <a class="nav-link active" id="vert-tabs-home-tab" data-toggle="pill" href="#vert-tabs-home" role="tab" aria-controls="vert-tabs-home" aria-selected="true">Poi </a> <a class="nav-link" id="vert-tabs-profile-tab" data-toggle="pill" href="#vert-tabs-profile" role="tab" aria-controls="vert-tabs-profile" aria-selected="false">Vessels</a> <a class="nav-link" id="vert-tabs-attachments-tab" data-toggle="pill" href="#vert-tabs-attachments" role="tab" aria-controls="vert-tabs-attachments" aria-selected="false">Attachments</a> </div> </div> <div class="col-7 col-sm-9"> <div class="tab-content" id="vert-tabs-tabContent"> <div class="tab-pane text-left fade show active" id="vert-tabs-home" role="tabpanel" aria-labelledby="vert-tabs-home-tab"> @await Component.InvokeAsync("PoisList", new { caseId = @Model.Id }) </div> <div class="tab-pane fade" id="vert-tabs-profile" role="tabpanel" aria-labelledby="vert-tabs-profile-tab"> @await Component.InvokeAsync("VessellList", new { caseId = @Model.Id }) </div> <div class="tab-pane fade" id="vert-tabs-attachments" role="tabpanel" aria-labelledby="vert-tabs-attachments-tab"> @await Component.InvokeAsync("FileAttachmentList", new { caseId = @Model.Id }) </div> </div> </div> </div>
This is my code to my upload function
[HttpPost] [ValidateAntiForgeryToken] public async Task<IActionResult> Create([Bind("Id,Title,UploadedDate,File,TennantId,DocumentPath,ServerIpAddress,FolderPath,OIC_1,OIC_2,FileSize,IconFile,Extension,isActive,isDeleted,CreatedDate,CreatedBy")] FileAttachmentsVM fileAttachments) { if (ModelState.IsValid) { // do other validations on your model as needed string filePath = Path.Combine(hostingEnvironment.WebRootPath, "Uploads"); string uniqueFilename = Guid.NewGuid().ToString() + "_" + fileAttachments.File.FileName; string savedFileName = Path.Combine(filePath, uniqueFilename); await fileAttachments.File.CopyToAsync(new FileStream(savedFileName, FileMode.Create)); FileInfo infoFile = new FileInfo(savedFileName); string extension = infoFile.Extension; Int32.TryParse(TempData["CaseId"].ToString(), out int resultCaseId); FileAttachments attachments = new FileAttachments { DocumentPath = filePath, CaseId = resultCaseId, FullPath = savedFileName, FileSize = infoFile.Length, Title = infoFile.Name, OIC_1 = fileAttachments.OIC_1, OIC_2 = fileAttachments.OIC_2, TennantId = await GetCurrentTennantId(), Extension = infoFile.Extension.Replace(".", "").ToLower(), CreatedBy = "SYSTEM", CreatedDate = DateTime.Now, File = uniqueFilename, ContentType = fileAttachments.File.ContentType, isActive = true, isDeleted = false }; _context.Add(attachments); _toast.AddInfoToastMessage("File has been upload sucesfully"); await _context.SaveChangesAsync(); return RedirectToAction("Edit","MISObjects", new { id = resultCaseId }); } ViewData["OIC_1"] = new SelectList(_context.Users, "Id", "FirstName", fileAttachments.OIC_1); ViewData["OIC_2"] = new SelectList(_context.Users, "Id", "FirstName", fileAttachments.OIC_2); r
Its here i gather I would need to add the # tag to have that tab to be open ?
return RedirectToAction("Edit","MISObjects", new { id = resultCaseId });
Saturday, July 25, 2020 5:09 PM
Answers
-
User475983607 posted
The bootstrap documentation shows how to select a tab.
https://getbootstrap.com/docs/4.0/components/navs/#via-javascript
[HttpGet] public ActionResult Index() { ViewBag.Tab = "vert-tabs-attachments"; return View(); }
<script> $('#vert-tabs-tab a[href="#@ViewBag.Tab"]').tab('show') </script>
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Saturday, July 25, 2020 5:29 PM
All replies
-
User475983607 posted
The bootstrap documentation shows how to select a tab.
https://getbootstrap.com/docs/4.0/components/navs/#via-javascript
[HttpGet] public ActionResult Index() { ViewBag.Tab = "vert-tabs-attachments"; return View(); }
<script> $('#vert-tabs-tab a[href="#@ViewBag.Tab"]').tab('show') </script>
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Saturday, July 25, 2020 5:29 PM -
User-183185495 posted
The only issue with that approach is I would have to set a default or is the first tab always open
Monday, July 27, 2020 3:00 PM -
User475983607 posted
The only issue with that approach is I would have to set a default or is the first tab always openYour sample code specifically sets the first tab and content as the "active" default. https://getbootstrap.com/docs/4.0/components/navs/#using-data-attributes
Add a simple "if" to check if the ViewBag.Tag is set. Of course the code depends on your requirements.
<script> if ($('#vert-tabs-tab a[href="#@ViewBag.Tab"]')) { $('#vert-tabs-tab a[href="#@ViewBag.Tab"]').tab('show'); } </script>
Monday, July 27, 2020 3:39 PM