Remove From My Forums

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

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.

You can combine ajax requests and partial views.
You need to create a div container first to place the content.
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

0

Sign in to vote

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