locked
how to call index(render body) inside about us section when click on aboutus page RRS feed

  • Question

  • User-91993069 posted

    I am student

    I start the learning asp.net mvc

    I want to call aboutus section page when user click on aboutus link then display the aboutus page data

    problem is that by default display the about us page and index page and carrer page I want to only index page bydefault and when user click on about us link then open about us page

    HomeController.cs

    namespace TemplateIntegrate.Controllers
    {
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
        }
    }

    _CustomLayout.cshtml

    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <a class="companyname">Abcdsfwer Technology</a>
                </div>
                <div class="col-md-8">
                    <div  style="text-align:center;" class="col-md-2 menu">
                        @Html.ActionLink("Services", "Index", "Home")
                    </div>
                    <div style=" text-align:center;" class="col-md-2 menu">
                        @Html.ActionLink("career", "Index", "Home")
                    </div>
                    <div style=" text-align:center;" class="col-md-1 menu">
                        @Html.ActionLink("Blog", "Index", "Home")
                    </div>
                    <div style="text-align:center;" class="col-md-3 menu">
                        @Html.ActionLink("Hire Developers", "Index", "Home")
                    </div>
                    <div style="text-align:center;" class="col-md-2 menu">
                        @Html.ActionLink("AboutUs", "Index", "Home")
                    </div>
                    <div style="text-align:center;" class="col-md-2 menu">
                        @Html.ActionLink("Get a Quote", "Index", "Home")
                    </div>
                </div>
            </div>
        </div>
        @RenderBody()
        @RenderSection("aboutuspage", false)
        @RenderSection("carrerpage", false)
    
        <footer>
            <div style="margin-left:550px;">
                <p>&copy; @DateTime.Now.Year - CopyRight@ssss.com</p>
            </div>
        </footer>
    
        @Styles.Render("~/template/js")
    </body>
    </html>

    Index.cshtml

    @{
        ViewBag.Title = "Index";
    }
    
    <h1>Index Page</h1>
    
    @section aboutuspage{
        <h1>This is AboutUsPage</h1>
    }
    
    @section carrerpage{
        <h1>This is CareerPage</h1>
    }

    _ViewStart.cshtml

    @{
        Layout = "~/Views/Shared/_CustomLayout.cshtml";    //first i create a layout then add a layout in _viewstart.cshtml
    }
    

    see my layout page

    I want to:

    when user click on about us then open about us page and when user click career page then open career page and bydefault render the index page

    Is there any solution for when user click on aboutus page then display aboutus and when user click on carrer page then display carrer page

    Saturday, September 12, 2020 4:30 AM

Answers

  • User1686398519 posted

    Hi rahulpas, 

    According to your needs, I wrote a simple example, you can refer to it.

    1. You can combine ajax requests and partial views.
    2. You need to create a div container first to place the content.
    3. When the request is successful, fill the returned view data into a container.

    More details, you could refer to below code:

    HomeController

        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
            public ActionResult career()
            {
                return PartialView();
            }
            public ActionResult AboutUs()
            {
                return PartialView();
            }
         }

    Index

    <div id="showcontent">
        <h1>Index Page</h1>
    </div>

    career

    <h1>This is CareerPage</h1>

    AboutUs

    <h1>This is AboutUsPage</h1>
    

    _CustomLayout.cshtml

        ... ...//The code here is omitted
    <div style="text-align:center;" class="col-md-2 menu"> <a onclick="showcareer();">career</a> </div> <div style=" text-align:center;" class="col-md-2 menu"> <a onclick="showAboutUs();">AboutUs</a> </div>
    ... ...//The code here is omitted <script src="~/Scripts/jquery-3.4.1.min.js"></script> <script> function showcareer() { $.ajax({ url: "@Url.Action("career")", type: "GET", success: function (data) { $("#showcontent").html(data); } }); } function showAboutUs() { $.ajax({ url: "@Url.Action("AboutUs")", type: "GET", success: function (data) { $("#showcontent").html(data); } }); } </script>

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 14, 2020 8:05 AM

All replies

  • User475983607 posted

    In MVC an action maps to a view.  Simply follow the standard programming pattern found in every beginning level tutorial. 

    https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started 

    Saturday, September 12, 2020 10:14 AM
  • User1686398519 posted

    Hi rahulpas, 

    According to your needs, I wrote a simple example, you can refer to it.

    1. You can combine ajax requests and partial views.
    2. You need to create a div container first to place the content.
    3. When the request is successful, fill the returned view data into a container.

    More details, you could refer to below code:

    HomeController

        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
            public ActionResult career()
            {
                return PartialView();
            }
            public ActionResult AboutUs()
            {
                return PartialView();
            }
         }

    Index

    <div id="showcontent">
        <h1>Index Page</h1>
    </div>

    career

    <h1>This is CareerPage</h1>

    AboutUs

    <h1>This is AboutUsPage</h1>
    

    _CustomLayout.cshtml

        ... ...//The code here is omitted
    <div style="text-align:center;" class="col-md-2 menu"> <a onclick="showcareer();">career</a> </div> <div style=" text-align:center;" class="col-md-2 menu"> <a onclick="showAboutUs();">AboutUs</a> </div>
    ... ...//The code here is omitted <script src="~/Scripts/jquery-3.4.1.min.js"></script> <script> function showcareer() { $.ajax({ url: "@Url.Action("career")", type: "GET", success: function (data) { $("#showcontent").html(data); } }); } function showAboutUs() { $.ajax({ url: "@Url.Action("AboutUs")", type: "GET", success: function (data) { $("#showcontent").html(data); } }); } </script>

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 14, 2020 8:05 AM