Answered by:
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>© @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
-
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.
- 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