locked
when user click on career link then how to display career data on that page (means admin dashboard page) RRS feed

  • Question

  • User-91993069 posted

    currently when I click the career link then open the page successfully but not open admin dashboard see below image

    I want to open career page on dashboard

    Index.cshtml

    @{
        ViewBag.Title = "Home Page";
    }
    <div id="wrapper">
        <!-- header   -->
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="adjust-nav">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">asdasd asdasdasdasd</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><strong>Welcome @ViewBag.username</strong></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- sidebar -->
        <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">
                    <li>
                        @Html.ActionLink("career", "career", new  { @id = "page-inner" })    //here I give the id of admin dashboard page but not work
                        @*<a href="#" link>Carrer</a>*@
                    </li>
                </ul>
            </div>
        </nav>
        <!-- body part   -->
        <div id="page-wrapper">
            <div id="page-inner">
                <div class="row">
                    <div class="col-md-12">
                        <h2>Admin Dashboard</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>

    career.cshtml

    @model applicationname.Models.tbl_carrer
    
    @{
        ViewBag.Title = "Carrer";
    }
    
    @using (Html.BeginForm("career", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
    
        <input type="text" name="useremailid" placeholder="enter emailid" required />
        <br />
        <input type="number" name="usercontactno" placeholder="enter contact no" required />
        <input type="file" name="file" id="userresume" required />
    
        <input type="submit" value="Create" />
    }
    
    

    I am trying to open career page on admin dashboard first I give the id of admin dashboard page but not open

    index.cshtml

     <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">
                    <li>
                        @Html.ActionLink("career", "career", new  { @id = "page-inner" }) //here I give the id of admin dashboard page but not work

    _Layout.cshtml

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="~/Content/bootstrap.css" rel="stylesheet" />
        <link href="~/Content/font-awesome.css" rel="stylesheet" />
        <link href="~/Content/custom.css" rel="stylesheet" />
        <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
        <link href="~/Content/Site.css" rel="stylesheet" type='text/css' />
    
        @*login page*@
        <link rel="icon" type="image/png" href="images/icons/favicon.ico" />
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="~/fonts/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <link href="~/fonts/iconic/css/material-design-iconic-font.min.css" rel="stylesheet" type="text/css" />
        <link href="~/vendor/animate/animate.css" rel="stylesheet" type="text/css" />
        <link href="~/vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" type="text/css" />
        <link href="~/vendor/animsition/css/animsition.min.css" rel="stylesheet" type="text/css" />
        <link href="~/vendor/daterangepicker/daterangepicker.css" type="text/css" rel="stylesheet" />
        <link href="~/vendor/select2/select2.min.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/util.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/main.css" rel="stylesheet" type="text/css" />
    
    </head>
    <body>
        <script src="~/Scripts/jquery-1.10.2.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Scripts/jquery.metisMenu.js"></script>
        <script src="~/Scripts/custom.js"></script>
    
        <div class="container">
            <main role="main" class="pb-3">
                @RenderBody()
            </main>
        </div>
    
        @*login page*@
        <div id="dropDownSelect1"></div>
        <script src="~/vendor/jquery/jquery-3.2.1.min.js"></script>
        <script src="~/vendor/animsition/js/animsition.min.js"></script>
        <script src="~/vendor/bootstrap/js/popper.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/vendor/select2/select2.min.js"></script>
        <script src="~/vendor/daterangepicker/moment.min.js"></script>
        <script src="~/vendor/daterangepicker/daterangepicker.js"></script>
        <script src="~/vendor/countdowntime/countdowntime.js"></script>
        <script src="~/Scripts/main.js"></script>
    
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
    </body>
    </html>
    

    what I am thinking if carrer page display on admin dashboard then give the id of admin dashboard - my logic

    mylogic is right or wrong?

    which place to need correction

    I hope my question is understood

    carrer  page is open but not render on admin dashboard that is main issue

    Monday, September 14, 2020 9:16 AM

Answers

  • User1686398519 posted

    Hi rahulpas, 

    I used the template you provided and modified it according to your needs. You can check the renderings first and then follow the steps below to modify the code.

    1. The files needed in the template are
      1. bootstrap.css
      2. custom.css
      3. font-awesome.css
      4. bootstrap.min.js
      5. custom.js
      6. jquery.metisMenu.js
      7. jquery-1.10.2.js
    2. You can copy custom.css to the Content directory, and custom.js to the Scripts directory.All other used files only need to be downloaded and installed through NuGet.
      1. bootstrap.css,bootstrap.min.js:
        1. When you create the MVC project, it has been installed and the version is 3.4.1. This version is used in the example.
      2. font-awesome.css:
        1. Install FontAwesome via NuGet.
      3. jquery.metisMenu.js:
        • Install metisMenu via NuGet.
        • You need to note that the file name after installation is different, it is called metisMenu.min.js.
      4. jquery-1.10.2.js:
        • You only need to quote your version of jquery.
    3. After you have prepared all the files you need, you need to cite these files.
    4. Because your upper navigation bar and left sidebar will be used by other pages, write these layouts in the layout view. Specifically, you can view the code below.
    5. rahulpas

      problem is that I have also login page means when user login successfully then after open admin dashboard
      1. If you want to view your Index view only after logging in, then you need to use Authentication. In other words, you only want to show the view to authenticated users.
      2. There are multiple authentication methods. In the example, I used FormsAuthentication for testing. You can refer to it. You can also choose other authentication methods according to your needs.
    6. The customizesidebar.css file is not used in the previous example, you can delete this reference.

    More details, you could refer to below code:

    _Layout

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Free Bootstrap Admin Template : Two Page</title>
        <!-- BOOTSTRAP STYLES-->
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <!-- FONTAWESOME STYLES-->
        <link href="~/Content/font-awesome.css" rel="stylesheet" />
        <!-- CUSTOM STYLES-->
        <link href="~/Content/custom.css" rel="stylesheet" />
        <!-- GOOGLE FONTS-->
    </head>
    <body>
        <div id="wrapper">
            <div class="navbar navbar-inverse navbar-fixed-top">
                <div class="adjust-nav">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">asdasd asdasdasdasd</a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav navbar-right">
                            @if (User.Identity.IsAuthenticated)
                            {
                                <li class="text-center"><a>@User.Identity.Name</a></li>
                                <li class="text-center">@Html.ActionLink("Logout", "Logout", "Home")</li>
                            }
                            else
                            {
                                <li class="text-center">@Html.ActionLink("Login", "Login", "Home")</li>
                            }
                        </ul>
                    </div>
                </div>
            </div>
            <!-- /. NAV TOP  -->
            <nav class="navbar-default navbar-side" role="navigation">
                <div class="sidebar-collapse">
                    <ul class="nav" id="main-menu">
                        <li class="text-center user-image-back">
                            <img src="~/img/find_user.png" class="img-responsive" />
                        </li>
                        <li>
                            @Html.ActionLink("Index", "Index")
                        </li>
                        <li>
                            @Html.ActionLink("career", "career")
                        </li>
                    </ul>
    
                </div>
            </nav>
            <!-- /. NAV SIDE  -->
            <div id="page-wrapper">
                <div id="page-inner">
                    <div class="row">
                        <div class="col-md-12">
                            @RenderBody()
                        </div>
                    </div>
                </div>
                <!-- /. PAGE INNER  -->
            </div>
            <!-- /. PAGE WRAPPER  -->
        </div>
        <!-- /. WRAPPER  -->
        <!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
        <!-- JQUERY SCRIPTS -->
        <script src="~/Scripts/jquery-3.4.1.min.js"></script>
        <!-- BOOTSTRAP SCRIPTS -->
        <script src="~/Scripts/bootstrap.min.js"></script>
        <!-- METISMENU SCRIPTS -->
        <script src="~/Scripts/metisMenu.min.js"></script>
        <!-- CUSTOM SCRIPTS -->
        <script src="~/Scripts/custom.js"></script>
    </body>
    </html>

    Web.config

      <system.web>
        <compilation debug="true" targetFramework="4.7.2" />
        <httpRuntime targetFramework="4.7.2" />
        <authentication mode="Forms">
    	<forms loginUrl="Home/Login"></forms>
        </authentication>
      </system.web>

    HomeController

        [Authorize]
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
            public ActionResult career()
            {
                return View();
            }
            [AllowAnonymous]
            public ActionResult Login()
            {
                return View();
            }
            [AllowAnonymous]
            [HttpPost]
            public ActionResult checkLogin(string username,string password)
            {
                if (username == "test" && password == "123")
                {
                    FormsAuthentication.SetAuthCookie(username, false);
                    return RedirectToAction("Index");
                }
                return View();
            }
            public ActionResult Logout()
            {
                FormsAuthentication.SignOut();
                return RedirectToAction("Login");
            }
        }

    Index

    <h2>Index</h2>

    career

    <h2>career</h2>

    Login

    <h2>Login</h2>
    @using (Html.BeginForm("checkLogin", "Home", FormMethod.Post))
    {
        <input class="input100" type="text" name="username" required />
        <input class="input100" type="password" name="password" required />
        <button class="login100-form-btn" type="submit">Login</button>
    }

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 16, 2020 3:29 AM

All replies

  • User-91993069 posted

    Hello Admin 

    see i give the id of carrer link and same id provided by the div block but not work

    still I am trying to find the solution?

    Monday, September 14, 2020 10:11 AM
  • User-91993069 posted

    @admin

    please help

    Monday, September 14, 2020 12:14 PM
  • User475983607 posted

    IMHO, you've created an overly engineered design rather than simply using the MVC framework as intended.  Essentially, you're created a layout within a View.  The menu system should be within the _Layout.cshtml file.  I recommend rethinking the design and use standard MVC constructs if you want to render HTML form the server.  Otherwise, look into building an SPA using one of the popular SPA frameworks, React, Angular, Vue...

    Monday, September 14, 2020 12:43 PM
  • User-474980206 posted

    When you click a link in the browser, it replaces the current page with the new response. You can not target a div in the current page unless you use JavaScript and Ajax. The ID you are passing is just a parameter in the url of the request.

    Monday, September 14, 2020 2:20 PM
  • User-91993069 posted

    hello bruce 

    my logic : if you want to access carrer page then first access the admin dashboard id and then fetch the carrer data

    I am pass the url and request in ajax but career link not appear

     <ul class="nav" id="main-menu">
                    <li>
    
                        <script src="~/Scripts/jquery-3.4.1.min.js"></script>
                        <script>
    
                            $.ajax({
    
                                url: <a href="@Url.Action("career", "Home")">Carrer</a>,
                                type: "GET",
                                success: function (data){
                                    $("#careerSection").html(data);
                                }
    
                        </script>
    
                    </li>
                </ul>

    Tuesday, September 15, 2020 4:54 AM
  • User1686398519 posted

    Hi rahulpas, 

    1. Using @Html.ActionLink will directly link to the action called the career.
      • If the action is called career and it returns a partial view:
        • Because the partial view does not use the layout view, you get what your first image looks like.
        • When the action named career returns a partial view, you can directly use <a id="page-inner">career</a>, combined with ajax request action, after the request is successful, the returned view will be filled into a container .
      • If the action named career uses the layout view, that is to say, the action named career returns the view:
        • You should write the code to implement the left sidebar in the layout view, so that you can achieve your needs.
    2. If the left sidebar is used by many pages, I suggest that you can write the sidebar on the layout view.
    3. I will give two solutions below.
      1. If you write the left sidebar on the Index page, you can modify it like this.
        1. Controller
          • public ActionResult career()
            {
                  return  PartialView();
            }
            2.View

            •     <div id="page-wrapper">
                      <div id="page-inner">
                          <div class="row">
                              <div class="col-md-12" id="showcontent">
                                  <h2>Admin Dashboard</h2>
                              </div>
                          </div>
                      </div>
                  </div>
                  <script src="~/Scripts/jquery-3.4.1.min.js"></script>
                  <script>
                      $.ajax({
                          url: "@Url.Action("career", "Home")",
                          type: "GET",
                          success: function (data) {
                              $("#showcontent").html(data);
                          }
                      });
                  </script>
      2. You can write the left sidebar in the layout view, and let the action named career return a view (not a partial view).I wrote an example, you can refer to it.You can modify it as needed.
        • The version of bootstrap used in the example is 4.5.
        • You can update through NuGet. If you don’t want to update, some of the css styles in the example may be different.
        • More details, you could refer to below code:
          • Controller
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
            public ActionResult career()
            {
                return View();
            }
            public ActionResult Other()
            {
                return View();
            }
        }
          • _Layout
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title - My ASP.NET Application</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        <link href="~/Content/customizesidebar.css" rel="stylesheet" />
    </head>
    <body>
        <header>
            <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
                <div class="container">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">DailyMVCDemo</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                        <ul class="navbar-nav flex-grow-1">
                            <li class="nav-item">
                                test
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
        <div class="container">
            <div class="container-fluid">
                <div class="row">
                    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
                        <div class="sidebar-sticky pt-3">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    @Html.ActionLink("Index", "Index")
                                </li>
                                <li class="nav-item">
                                    @Html.ActionLink("career", "career")
                                </li>
                                <li class="nav-item">
                                    @Html.ActionLink("Other", "Other")
                                </li>
                            </ul>
                        </div>
                    </nav>
                    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
                        @RenderBody()
                        <a></a>
                    </main>
                </div>
            </div>
        </div>
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
    </body>
    </html>
          • Index
    <h1>This is IndexPage</h1>
          • career
    <h1>This is CareerPage</h1>
          • Other
    <h1>This is OtherPage</h1>
          • Here is the result.

    Best Regards,

    YihuiSun

    Tuesday, September 15, 2020 7:21 AM
  • User-91993069 posted

    Hello yihuisun

    thanks for answer

    <link href="~/Content/customizesidebar.css" rel="stylesheet" />

    can you show customizesidebar.css file please?

    Tuesday, September 15, 2020 9:07 AM
  • User-91993069 posted

    hello yihuisun

    thanks for issue but still I am facing this issue last two days

    problem is that I have also login page means when user login successfully then after open admin dashboard

    see my origin template : https://www.free-css.com/free-css-templates/page205/two-page

    _layout.cshtml

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="~/Content/bootstrap.css" rel="stylesheet" />
        <link href="~/Content/font-awesome.css" rel="stylesheet" />
        <link href="~/Content/custom.css" rel="stylesheet" />
        <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
        <link href="~/Content/Site.css" rel="stylesheet" type='text/css' />
    
        @*login page*@
        <link rel="icon" type="image/png" href="images/icons/favicon.ico" />
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="~/fonts/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <link href="~/fonts/iconic/css/material-design-iconic-font.min.css" rel="stylesheet" type="text/css" />
        <link href="~/vendor/animate/animate.css" rel="stylesheet" type="text/css" />
        <link href="~/vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" type="text/css" />
        <link href="~/vendor/animsition/css/animsition.min.css" rel="stylesheet" type="text/css" />
        <link href="~/vendor/daterangepicker/daterangepicker.css" type="text/css" rel="stylesheet" />
        <link href="~/vendor/select2/select2.min.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/util.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/main.css" rel="stylesheet" type="text/css" />
    
    </head>
    <body>
        <script src="~/Scripts/jquery-1.10.2.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Scripts/jquery.metisMenu.js"></script>
        <script src="~/Scripts/custom.js"></script>
    
        <!-- sidebar -->
        <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">
                    <li id="page-inner">
                        @Html.ActionLink("Index", "Index")
                        @Html.ActionLink("career", "career")
                    </li>
                </ul>
            </div>
        </nav>
        @RenderBody()
    
        @*login page*@
        <div id="dropDownSelect1"></div>
        <script src="~/vendor/jquery/jquery-3.2.1.min.js"></script>
        <script src="~/vendor/animsition/js/animsition.min.js"></script>
        <script src="~/vendor/bootstrap/js/popper.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/vendor/select2/select2.min.js"></script>
        <script src="~/vendor/daterangepicker/moment.min.js"></script>
        <script src="~/vendor/daterangepicker/daterangepicker.js"></script>
        <script src="~/vendor/countdowntime/countdowntime.js"></script>
        <script src="~/Scripts/main.js"></script>
    
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
    </body>
    </html>
    

    Index.cshtml

    @{
        ViewBag.Title = "Home Page";
    }
    <div id="wrapper">
        <!-- header   -->
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="adjust-nav">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">asdasd asdasdasdasd</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><strong>Welcome @*@ViewBag.username*@</strong></li>
                    </ul>
                </div>
            </div>
        </div>
    
        <!-- body part   -->
        <div id="wrapper">
            <div id="page-wrapper">
                <div id="page-inner">
                    <div class="row">
                        <div class="col-md-12">
                            <h2>Admin Dashboard</h2>
                        </div>
                    </div>
                    <hr />
                </div>
            </div>
        </div>
    </div>
    

    checkLogin.cshtml

    @{
        ViewBag.Title = "checkLogin";
    }
    
    @*<h2 style="text-align:center">Admin</h2>*@
    
    @using (Html.BeginForm("checkLogin", "Home", FormMethod.Post))
    {
        @*<div class="row"></div>
    
            <input type="text" name="username" placeholder="Enter Your UserName" required/>
            <br />
            <input type="password" name="password" placeholder="Enter your password" required/>
            <br />
            <br />
            <button type="submit">Login</button>*@
    
        <div class="limiter">
            <div class="container-login100">
                <div class="wrap-login100">
                    <form class="login100-form validate-form">
                        <span class="login100-form-title p-b-26">
                            Welcome
                        </span>
                        <span class="login100-form-title p-b-48">
                            <i class="zmdi zmdi-eye"></i>
                        </span>
    
                        <div class="wrap-input100 validate-input" data-validate="Valid email is: a@b.c">
                            <span class="btn-show-pass">
                                <i class="glyphicon glyphicon-envelope"></i>
                            </span>
                            <input class="input100"  type="text" name="username" required/>
                            <span class="focus-input100" data-placeholder="Email"></span>
                        </div>
    
                        <div class="wrap-input100 validate-input" data-validate="Enter password">
                            <span class="btn-show-pass">
                                <i class="zmdi zmdi-eye"></i>
                            </span>
                            <input class="input100" type="password" name="password" required/>
                            <span class="focus-input100" data-placeholder="Password"></span>
                        </div>
    
                        <div class="container-login100-form-btn">
                            <div class="wrap-login100-form-btn">
                                <div class="login100-form-bgbtn"></div>
                                <button class="login100-form-btn">
                                    Login
                                </button>
                            </div>
                        </div>
    
                        <div class="text-center p-t-115">
                            @*<span class="txt1">
                                Don’t have an account?
                            </span>*@
    
                            @*<a class="txt2" href="#">
                                Sign Up
                            </a>*@
                        </div>
                    </form>
                </div>
            </div>
        </div>
    }
    

    career.cshtml

    @{
        ViewBag.Title = "Carrer";
    }
    
    @using (Html.BeginForm("career", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <input type="text" name="useremailid" placeholder="enter emailid" required />
        <br />
        <input type="number" name="usercontactno" placeholder="enter contact no" required />
        <input type="file" name="file" id="userresume" required />
    
        <input type="submit" value="Create" />
    }
    

    HomeController.cs

           public ActionResult career(tbl_carrer carrer, HttpPostedFileBase file)
            {
               return View(carrer);
            }

    IndexPage

    not proper display

    when user click on carrer link then override the dashboard content

    I add a full code of my project trying and trying and trying and trying and but same issue facing now

    Tuesday, September 15, 2020 9:35 AM
  • User475983607 posted

    rahulpas

    I add a full code of my project trying and trying and trying and trying and but same issue facing now

    The code looks like it was thrown together without much thought or understanding.  

    There are jQuery references to 1.10.2 and 3.2.1.  There should be one jQuery reference that supports all the jQuery libraries.   There are duplicate  CSS libraries references and reference to similar CSS libraries which can lead to unexpected UI.  

    As I understand, the general design intent replaces chunks of HTML with partial content.  The design handles HTML but does not consider the JavaScript/jQuery applications.  JavaScript/jQuery applications run in the browser and load when the page is initially loaded.  A design the replaces HTML content can break the JavaScript application and lead to memory leaks.

    Unfortunately, I think you need to rethink the design and make sure you are reference compatible JS and CSS libraries.

    Tuesday, September 15, 2020 11:42 AM
  • User1686398519 posted

    Hi rahulpas, 

    I used the template you provided and modified it according to your needs. You can check the renderings first and then follow the steps below to modify the code.

    1. The files needed in the template are
      1. bootstrap.css
      2. custom.css
      3. font-awesome.css
      4. bootstrap.min.js
      5. custom.js
      6. jquery.metisMenu.js
      7. jquery-1.10.2.js
    2. You can copy custom.css to the Content directory, and custom.js to the Scripts directory.All other used files only need to be downloaded and installed through NuGet.
      1. bootstrap.css,bootstrap.min.js:
        1. When you create the MVC project, it has been installed and the version is 3.4.1. This version is used in the example.
      2. font-awesome.css:
        1. Install FontAwesome via NuGet.
      3. jquery.metisMenu.js:
        • Install metisMenu via NuGet.
        • You need to note that the file name after installation is different, it is called metisMenu.min.js.
      4. jquery-1.10.2.js:
        • You only need to quote your version of jquery.
    3. After you have prepared all the files you need, you need to cite these files.
    4. Because your upper navigation bar and left sidebar will be used by other pages, write these layouts in the layout view. Specifically, you can view the code below.
    5. rahulpas

      problem is that I have also login page means when user login successfully then after open admin dashboard
      1. If you want to view your Index view only after logging in, then you need to use Authentication. In other words, you only want to show the view to authenticated users.
      2. There are multiple authentication methods. In the example, I used FormsAuthentication for testing. You can refer to it. You can also choose other authentication methods according to your needs.
    6. The customizesidebar.css file is not used in the previous example, you can delete this reference.

    More details, you could refer to below code:

    _Layout

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Free Bootstrap Admin Template : Two Page</title>
        <!-- BOOTSTRAP STYLES-->
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <!-- FONTAWESOME STYLES-->
        <link href="~/Content/font-awesome.css" rel="stylesheet" />
        <!-- CUSTOM STYLES-->
        <link href="~/Content/custom.css" rel="stylesheet" />
        <!-- GOOGLE FONTS-->
    </head>
    <body>
        <div id="wrapper">
            <div class="navbar navbar-inverse navbar-fixed-top">
                <div class="adjust-nav">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">asdasd asdasdasdasd</a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav navbar-right">
                            @if (User.Identity.IsAuthenticated)
                            {
                                <li class="text-center"><a>@User.Identity.Name</a></li>
                                <li class="text-center">@Html.ActionLink("Logout", "Logout", "Home")</li>
                            }
                            else
                            {
                                <li class="text-center">@Html.ActionLink("Login", "Login", "Home")</li>
                            }
                        </ul>
                    </div>
                </div>
            </div>
            <!-- /. NAV TOP  -->
            <nav class="navbar-default navbar-side" role="navigation">
                <div class="sidebar-collapse">
                    <ul class="nav" id="main-menu">
                        <li class="text-center user-image-back">
                            <img src="~/img/find_user.png" class="img-responsive" />
                        </li>
                        <li>
                            @Html.ActionLink("Index", "Index")
                        </li>
                        <li>
                            @Html.ActionLink("career", "career")
                        </li>
                    </ul>
    
                </div>
            </nav>
            <!-- /. NAV SIDE  -->
            <div id="page-wrapper">
                <div id="page-inner">
                    <div class="row">
                        <div class="col-md-12">
                            @RenderBody()
                        </div>
                    </div>
                </div>
                <!-- /. PAGE INNER  -->
            </div>
            <!-- /. PAGE WRAPPER  -->
        </div>
        <!-- /. WRAPPER  -->
        <!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
        <!-- JQUERY SCRIPTS -->
        <script src="~/Scripts/jquery-3.4.1.min.js"></script>
        <!-- BOOTSTRAP SCRIPTS -->
        <script src="~/Scripts/bootstrap.min.js"></script>
        <!-- METISMENU SCRIPTS -->
        <script src="~/Scripts/metisMenu.min.js"></script>
        <!-- CUSTOM SCRIPTS -->
        <script src="~/Scripts/custom.js"></script>
    </body>
    </html>

    Web.config

      <system.web>
        <compilation debug="true" targetFramework="4.7.2" />
        <httpRuntime targetFramework="4.7.2" />
        <authentication mode="Forms">
    	<forms loginUrl="Home/Login"></forms>
        </authentication>
      </system.web>

    HomeController

        [Authorize]
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
            public ActionResult career()
            {
                return View();
            }
            [AllowAnonymous]
            public ActionResult Login()
            {
                return View();
            }
            [AllowAnonymous]
            [HttpPost]
            public ActionResult checkLogin(string username,string password)
            {
                if (username == "test" && password == "123")
                {
                    FormsAuthentication.SetAuthCookie(username, false);
                    return RedirectToAction("Index");
                }
                return View();
            }
            public ActionResult Logout()
            {
                FormsAuthentication.SignOut();
                return RedirectToAction("Login");
            }
        }

    Index

    <h2>Index</h2>

    career

    <h2>career</h2>

    Login

    <h2>Login</h2>
    @using (Html.BeginForm("checkLogin", "Home", FormMethod.Post))
    {
        <input class="input100" type="text" name="username" required />
        <input class="input100" type="password" name="password" required />
        <button class="login100-form-btn" type="submit">Login</button>
    }

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 16, 2020 3:29 AM
  • User-91993069 posted
    Hello yihuisun
     
    thanks for the answer I am facing this issue last two days thanks now issue is solved
    Wednesday, September 16, 2020 5:39 AM