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 });

Answer 1

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>

Answer 2

User-183185495 posted

The only issue with that approach is I would have to set a default or is the first tab always open

Answer 3

User475983607 posted

The only issue with that approach is I would have to set a default or is the first tab always open

Your 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>