locked
Redirect to Edit action but have the attachment tab active on bootstrap tabs? RRS feed

  • 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

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

    Monday, July 27, 2020 3:39 PM