Currently, I am working on an MVC-5 project using Bootstrap and have all my links in _Layout.cshtml. I have a drop-down tabs feature like this: http://prntscr.com/76jfba (implemented using Bootstrap, visible on Visual Studio project launch). In my _Layout.cshtml, I have the renderbody() which renders all the UI elements.
My Goal:
When clicking on the "Real Time" tab, I want to display a dropdown list that, upon further clicking on "Tabular", will replace the current view just below the tabs with a new view.
What I Have Tried:
(1) In the HomeController, I created the following:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace testLayt.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public ActionResult tabularshared()
{
return View();
}
}
}
(2) Then, I created a view where I set the Layout path as follows:
@{
ViewBag.Title = "shekharTabularshared";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>tabularshared</h2>
However, the result shows misalignment of tabs as seen here: http://prntscr.com/76jiag. It seems like there might be an issue with accessing Bootstrap or something wrong in my approach?
I would greatly appreciate guidance on how to properly display the tabular.cshtml view just below the tabs in the first link (keeping the tab common across all views obtained).
Edit: _Layout.cshtml
<!-- HTML code for layout goes here --> and Index.cshtml is:
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>shekhar Index</h2>
I also noticed that upon clicking "Tabular" and inspecting elements, I do not see the line
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />If you wish to examine my entire project and offer your insights, please check it out here: