locked
how to display the career link content(means when user click on career link then show the carrer data) in main page RRS feed

  • Question

  • User-91993069 posted

    currently my career link open in anothe page I want to open career data on main page(means when click the career link then show only career data means override the main page data)

    Original Template Link : https://www.free-css.com/free-css-templates/page257/evolo

    main page

    click event of career page

    Index.cshtml (main layout)

    @{
        ViewBag.Title = "Index";
    }
    
    <nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top">
        <!-- Text Logo - Use this if you don't have a graphic logo -->
        <!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Evolo</a> -->
        <!-- Image Logo -->
        <a class="navbar-brand logo-image" href="index.html"><img src="~/images/logo.svg" alt="alternative"></a>
    
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a href="@Url.Action("Home", "Home")" style="color:black;margin-right:25px;">Home</a>
                </li>
                <li class="nav-item">
                    <a href="@Url.Action("Career", "Home")" data-target="#hello" style="color:black;margin-right:25px">Career</a>     //**here I targetting the main page id**
                </li>
                <li class="nav-item">
                    <a style="color:black;margin-right:25px">Pricing</a>
                </li>
                <li class="nav-item">
                    <a style="color:black;margin-right:25px">Request</a>
                </li>
    
                <li class="nav-item">
                    <a style="color:black;margin-right:125px">Contact</a>
                </li>
            </ul>
        </div>
    </nav> <!-- end of navbar -->
    <!-- end of navigation -->
    
    <div id="#hello">         //**here I give the id hello**
    
        <!-- Details 2 -->
        <div class="basic-2">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="image-container">
                            <img class="img-fluid" src="~/images/details-2-office-team-work.svg" alt="alternative">
                        </div> <!-- end of image-container -->
                    </div> <!-- end of col -->
                    <div class="col-lg-6">
                        <div class="text-container">
                            <h2>Search For Optimization Wherever Is Possible</h2>
                            <ul class="list-unstyled li-space-lg">
                                <li class="media">
                                    <i class="fas fa-check"></i>
                                    <div class="media-body">Basically we'll teach you step by step what you need to do</div>
                                </li>
                                <li class="media">
                                    <i class="fas fa-check"></i>
                                    <div class="media-body">In order to develop your company and reach new heights</div>
                                </li>
                                <li class="media">
                                    <i class="fas fa-check"></i>
                                    <div class="media-body">Everyone will be pleased from stakeholders to employees</div>
                                </li>
                            </ul>
                            <a class="btn-solid-reg popup-with-move-anim" href="#details-lightbox-2">LIGHTBOX</a>
                        </div> <!-- end of text-container -->
                    </div> <!-- end of col -->
                </div> <!-- end of row -->
            </div> <!-- end of container -->
        </div> <!-- end of basic-2 -->
        <!-- end of details 2 -->

    here I am targetting the hello id - data-targetting is not work I pass id in data-target

    <li class="nav-item">
          <a href="@Url.Action("Career", "Home")" data-target="#hello" style="color:black;margin-right:25px">Career</a>     //**here I targetting the main page id**
    </li>
    
    
    <div id="#hello">         //**here I give the id**
    
        <!-- Details 2 -->
        <div class="basic-2">
            <div class="container">

    Career.cshtml

    @{
        ViewBag.Title = "Career";
    }
    
    <h2>Career</h2>
    
    @using (Html.BeginForm("Career", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "frmsubmit" }))
    {

    HomeController.cs

            public ActionResult Career()
            {
                return View();
            }
    
            [HttpPost]
            public async Task<ActionResult> Career(User _user,HttpPostedFileBase userresume)
            {
               //some code
            }

    main page have detail information and contact information what I want to when click the career link then open career page in main layout

    why data-targetting is not work?

    Thursday, September 17, 2020 10:07 AM

Answers

  • User475983607 posted

    I created demo code but I'm not sure if the code will fit with your design intent.

        public class BootstrapController : Controller
        {
            // GET: Bootstrap
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult Career()
            {
                return PartialView();
            }
        }
    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top">
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="custom-nav-link"
                           href="@Url.Action("Career", "Bootstrap")" 
                           data-content="#content">Career</a>
                    </li>
                </ul>
            </div>
        </nav>
    
        <div id="content">
        </div>
    </div>
    
    @section scripts{
        <script>
            $('.custom-nav-link').click(function (e) {
                e.preventDefault();
                var action = $(this).prop('href');
                var content = $(this).data('content');
    
                $(content).load(action);
            });
        </script>
    }

    Career partial

    <h1>Hello World</h1>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 17, 2020 12:24 PM

All replies

  • User475983607 posted

    As recommended over several of your threads... use MVC as intended! You've created a custom framework and you keep asking the community fix to your custom design.  At the same time, it seems like you do not have a strong grasp on the HTTP and MVC fundamentals.  You really should learn the fundamentals first.

    To answer your question...  Your design is functioning as expected.  Clicking the Career link causes a full page refresh.  The browser does an HTTP GET.  The results are returned from the Action and shown in the browser window.  That's how links work.  The data-target attribute does nothing in this design because the page is refreshed.  

    <li class="nav-item">
        <a href="@Url.Action("Career", "Home")" data-target="#hello" style="color:black;margin-right:25px">Career</a>     //**here I targetting the main page id**
    </li>

    I'm guessing you expect the action results to replace content on the "main" page.  This is called a partial page refresh and it requires a JavaScript application running in the browser.  Keep in mind,  Bootstrap expects the content to already exist on the page.

    MVC comes with AJAX support to handle this scenario.  The framework has AJAX helper extensions.  The AJAX action links (HTTP GET) and AJAX forms (HTTP POST).  I think this is what you are trying to do.  You can learn about these feature at the following links.

    The reference documentation explains the technical details. 

    https://docs.microsoft.com/en-us/dotnet/api/system.web.mvc.ajax.ajaxextensions.actionlink?view=aspnet-mvc-5.2

    https://docs.microsoft.com/en-us/dotnet/api/system.web.mvc.ajax.ajaxextensions.beginform?view=aspnet-mvc-5.2

    https://docs.microsoft.com/en-us/dotnet/api/system.web.mvc.ajax.ajaxoptions?view=aspnet-mvc-5.2

    The following are Google searches for tutorials.

    https://www.google.com/search?q=MVC+AJAX+link

    https://www.google.com/search?q=mvc+ajax+beginform

    You can also use Bootstrap but it is up to you to write a JavaScript application.

    Thursday, September 17, 2020 11:30 AM
  • User-91993069 posted

    Hello mgebhard

    I'm guessing you expect the action results to replace content on the "main" page.  - yes you are right guess

    Thursday, September 17, 2020 11:44 AM
  • User475983607 posted

    I'm guessing you expect the action results to replace content on the "main" page.  - yes you are right guess

    Are you asking the community to design and write this feature?

    Thursday, September 17, 2020 12:10 PM
  • User-91993069 posted

    Hello mgebhard

    thanks for give the suggestion

    no sir you can close this thread 

    I will try 

    thanks for your valuable time

    everytime you help sir

    currently my carrer page display in main page but issue is not override the main content that is issue

    when I click career link then add the career content in main page below but not override the main content

    Thursday, September 17, 2020 12:17 PM
  • User475983607 posted

    I created demo code but I'm not sure if the code will fit with your design intent.

        public class BootstrapController : Controller
        {
            // GET: Bootstrap
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult Career()
            {
                return PartialView();
            }
        }
    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top">
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="custom-nav-link"
                           href="@Url.Action("Career", "Bootstrap")" 
                           data-content="#content">Career</a>
                    </li>
                </ul>
            </div>
        </nav>
    
        <div id="content">
        </div>
    </div>
    
    @section scripts{
        <script>
            $('.custom-nav-link').click(function (e) {
                e.preventDefault();
                var action = $(this).prop('href');
                var content = $(this).data('content');
    
                $(content).load(action);
            });
        </script>
    }

    Career partial

    <h1>Hello World</h1>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 17, 2020 12:24 PM
  • User-91993069 posted

    hello mgebhard 

    thanks for the help I am trying last 4 to 5 hour but not get a success

    now understood the logic how carrer content override the main layout 

    I am trying to understand this line but not understood 

    I search on google what is what is e.preventDefault()

    google says:

    The eventpreventDefault() method stops the default action of an element from happening. For example: Prevent a submit button from submitting a form. Prevent a link from following the URL.

    not understood above line please can you explain this line 

    e.preventDefault();

    method stops the default action of an element from happening - means what default action

    please explain this line

    Thursday, September 17, 2020 1:17 PM
  • User475983607 posted

    not understood above line please can you explain this line 

    e.preventDefault();

    method stops the default action of an element from happening - means what default action

    please explain this line

    Pretty simple... Clicking a link causes the browser to GET a page.  Clicking a button causes the browser to submit (POST) form values.  The line of code...

    e.preventDefault();

    ...prevents the browser from following the link or submitting the web form.  This is typically done to allow JavaScript to process the click event rather than letting the browser refresh the page.

    Thursday, September 17, 2020 1:37 PM