Redirect to Edit action but have the attachment tab active on bootstrap tabs?[Answered] RSS

• • Reply
  roguenidb

  Member

  14 Points

  96 Posts

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

  Jul 25, 2020 05:09 PM|roguenidb|LINK

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

• • Reply
  mgebhard

  All-Star

  49141 Points

  21745 Posts

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

  Jul 25, 2020 05:29 PM|mgebhard|LINK

  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>

• • Reply
  roguenidb

  Member

  14 Points

  96 Posts

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

  Jul 27, 2020 03:00 PM|roguenidb|LINK

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

• • Reply
  mgebhard

  All-Star

  49141 Points

  21745 Posts

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

  Jul 27, 2020 03:39 PM|mgebhard|LINK

  roguenidb

  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>