I have a Main View and Two Partial Views.Main Views Consist of Navigation Links.
PartialViews1 Consist a Button and I need when button click it need to shows the PartialView2
PartialView1 has a Button and when i click the button i need to PartialView2(Shoe PartialView2)
Main View
<div class="container my-3">
<div class="card">
<div class="card-header bg-white border-bottom flex-center p-0">
<ul class="nav nav-pills card-header-pills main-nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#">CART</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:void(0)"><i data-feather="arrow-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DELIVERY</a>
</li>
</ul>
</div>
<div class="card-body px-1 px-md-5 pt-5">
#Html.Partial("_PartialView1")
#*#Html.Partial("_PartialView2)*#
</div>
</div>
</div>
PartialView1
//Some code here
Delivery<i data-feather="arrow-right"></i>
Jquery
$("#iddelivery").click(function(){
});
Write an action and return PartialView2, write a function to ajax call to that action
As mentioned there are many ways to do it.
If you don't want to reload/refresh the page with new content the easiest way is to create an ActionResult in your controller and return a partial view.
in your jQuery function the first thing you need to do is to call the preventDefault function to prevent any default action on your button. the next thing is to make a ajax call and receive the view-content from your controller. then you can replace the content of your div with the result you got from controller.
Related
I have a bootstrap menu in a c# web application. The menu looks like this:
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">realestate</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">
<a class="nav-link text-dark" asp-area="" asp-controller="Newquestion" asp-action="Index">Add New Questions</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Chapter
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" asp-controller="Question" asp-action="Index">Salesperson questions - Chapter 1</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
I have a controller called QuestionController.cs which gets control when the user clicks on dropdown and selects the menu option for "Salesperson questions - Chapter 1". This all works perfectly fine.
If I want to add another menu option, say "Salesperson questions - Chapter 2", can I use the same controller? I would want to pass a piece of data to the controller so the controller knows which menu option was selected. I am looking to do something like this:
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" asp-controller="Question" asp-action="Index(0)">Salesperson questions - Chapter 1</a>
<a class="dropdown-item" asp-controller="Question" asp-action="Index(1)">Salesperson questions - Chapter 2</a>
</div>
So in the above code, if the user selected the Chapter 1 option, a value of 0 would be passed to the controller. If the user selected the Chapter 2 option, a value of 1 would be passed to the controller.
Is this possible?
try like this:
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" asp-controller="Question" asp-action="Index" asp-route-id="0">Salesperson questions - Chapter 1</a>
<a class="dropdown-item" asp-controller="Question" asp-action="Index" asp-route-id="1">Salesperson questions - Chapter 2</a>
</div>
Catch the id in your action like this:
public IActionResult MyAction(int? id)
{
//do something with that id
}
You can put whatever instead of id. but you have to catch with that variable name in that action. Suppose you can use asp-route-name="john". than you have to catch name in that action.
if you have matching route for name than the url would be like this
controller/action/john
but if it does not match the route defined in the startup then it would wrapped into query parameter like this
controller/action?name=john
In case of query param you have to catch your variable like this
public IActionResult YourAction([FromQuery(Name = "name")] string name)
{
// do whatever with that name
}
for more details https://learn.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/anchor-tag-helper?view=aspnetcore-6.0#asp-route-value
try this
<a class="dropdown-item" asp-controller="Question" asp-action="Index" asp-route-id="1"> Salesperson questions - Chapter 1 </a>
<a class="dropdown-item" asp-controller="Question" asp-action="Index" asp-route-id="2"> Salesperson questions - Chapter 2 </a>
I believe this is what you are looking for, passing route value
<a asp-controller="Employee"
asp-action="Index"
asp-route-id="#Model.Id">EmployeeId: #Model.Id</a>
Or passing static value to action
<a asp-controller="Question"
asp-action="Index"
asp-route-id="1">Menu Item 1</a>
I am working on a application which uses a UI that i purchased (One UI).
Everything is fine except that when I enter different tabs of my project clicking items on the tab will generate the following errors.
Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '/ALLDetails' is not a valid selector.
at Object.getSelectorFromElement (http://localhost:57386/Content/assets/js/oneui.core.min.js:6:87640)
Now various searches on stackoverflow suggest this can occur depending on how the page is called and can be fixed by adding data-toggle="#". However this did not solve my problem.
<li class="nav-main-item">
<a class="nav-main-link nav-main-link-submenu" data-toggle="submenu" aria-haspopup="true" aria-expanded="false" href="#">
<i class="nav-main-link-icon si si-wrench"></i>
<span class="nav-main-link-name">Projects</span>
</a>
<ul class="nav-main-submenu">
<li class="nav-main-item">
<a class="nav-main-link" href=#Url.Action("Edit","AllDetails")>
<span class="nav-main-link-name">Add New Project</span>
</a>
</li>
<li class="nav-main-item">
<a class="nav-main-link" href=#Url.Action("Index","AllDetails")>
<span class="nav-main-link-name">My Projects</span>
</a>
</li>
<li class="nav-main-item">
<a class="nav-main-link" data-target="#" href=#Url.Action("SubmittedProp","AllDetails")>
<span class="nav-main-link-name">Submitted Projects</span>
</a>
</li>
</ul>
</li>
Above is the code for one of my menus, it is saved as a partial view and added to my main layout shown below.
<div class="content-side content-side-full">
<ul class="nav-main">
<li class="nav-main-item">
<a class="nav-main-link" href=#Url.Action("Index","Home")>
<span class="nav-main-link-name">Dashboard</span>
</a>
</li>
<li class="nav-main-heading">All Details</li>
<li>
#Html.Partial("_disMenu")
</li>
<li class="nav-main-heading">Parameters</li>
<li>
#Html.Partial("_disPara")
</li>
<li class="nav-main-heading">Logout</li>
<li>
#using (Html.BeginForm("Logoff", "Account", FormMethod.Post, new { id = "logoutForm", #class = "nav navbar-nav navbar-right" }))
{
#Html.AntiForgeryToken()
}
<li>
Logoff
</li>
</ul>
</div>
I must again stress that the menu works fine on the home or any other pages but only fails and thows the error when I have entered tabs.
Any assistance will be greatful and please inform me If there is code i have not posted that should be.
Regards.
For example: when home is clicked #Url.Action("Information", "Admin") has to be viewed and when menu1 is clicked #Url.Action("Information1", "Admin1") has to be viewed.
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
#Url.Action("Information", "Admin")
</div>
<div id="menu1" class="tab-pane fade">
#Url.Action("Information1", "Admin1")
</div>
<div id="menu2" class="tab-pane fade">
#Url.Action("Information2", "Admin2")
</div>
<div id="menu3" class="tab-pane fade">
#Url.Action("Information3", "Admin3")
</div>
</div>
</div>
The tab-content divs are intended to be used if you have rendered the HTML for each tab already, and you simply wish to show/hide them on the page (which Bootstrap does using some JavaScript).
In your case, you actually want to show different pages, so you should add just the 'nav-tabs' HTML to each page, and use #Url.Action in the hrefs instead.
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
You will need to manually control the "active" class on the li on each page.
If you do actually want to pre-render the HTML so it all shows in one page, then rather than use Url.Action as in your question, you should be rendering a set of partial views using Html.RenderPartial instead.
I'm trying to implement a treeview menu in my application and everything works fine except that once I click on an item in the expanded list, the reloaded page loads with the contracted list, which makes navigation difficult for users.
What could be causing this? Is it the Html.Actionlink in my code? My code from the menu is below.
Please explain what can be done here. Thanks in advance.
<li class="treeview">
<a href="#">
<span>Leave Management</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="#Html.IsActive("Leave", "Index")">#Html.ActionLink("My leave Information", "Index", "Leave")</li>
<li class="#Html.IsActive("Leave", "NewLeaveRequest")">#Html.ActionLink("New Leave Request", "NewLeaveRequest", "Leave")</li>
<li class="#Html.IsActive("Leave", "Approve")">#Html.ActionLink("Approvals", "Approve", "Leave")</li>
<li class="#Html.IsActive("Leave", "EmpLeaveInfo")">#Html.ActionLink("Employee Leave Information", "EmpLeaveInfo", "Leave")</li>
</ul>
</li>
<div class="container">
<div class="row">
<div class="col-sm-3">
<nav>
<ul class="nav">
<li>Home</li>
<li>
Leave Management
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>#Html.ActionLink("My leave Information", "Index", "Leave")</li>
<li>#Html.ActionLink("New Leave Request", "NewLeaveRequest", "Leave")</li>
<li>#Html.ActionLink("Approvals", "Approve", "Leave")</li>
<li>#Html.ActionLink("Employee Leave Information", "EmpLeaveInfo", "Leave")</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
http://www.bootply.com/uBoT3zP1P2
Here is a working example with data source BootStrap TreeView
http://bootply.com/60761
A simple and elegant solution to displaying hierarchical tree structures (i.e. a Tree View)
https://github.com/jonmiles/bootstrap-treeview
Question background:
I have a MVC site that implements BootStrap. Currently each page is based on a MasterLayout view page. This master contains a dropdown list that will be populated with the cart items in the sites shopping cart along with the carts total monetary value. Please note currently the details in the dropdown are fixed values in the HTML:
What I'm after:
I've tried searching for this but cant seem to find exactly the answer. I want to be able to populate the dropdown in the navbar with the cart contents each time a page is loaded. To do this I need a method to extract the cart item objects which are stored in a SESSION object variable. Currently my MasterLayout view is just that, its a view that has no controller associated with it.
How do I go about assigning some sort of method to my MasterLayout so I can pass the cart items model to the view which in-turn will be set to the dropdown each time the page is loaded?.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
#Styles.Render("~/Content/bootstrap.css")
#Styles.Render("~/Content/Styles.css")
#Scripts.Render("~/bundles/modernizr")</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo">HS<b>WH</b></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Products</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<form class="navbar-form pull-right">
<input type="text" class="form-control" placeholder="Search this site..." id="searchInput">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
<form class="navbar-form pull-right">
<div class="btn-group btn-group-cart">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="pull-left"><i class="fa fa-shopping-cart icon-cart"></i></span>
<span class="pull-left">Shopping Cart: 2 item(s)</span>
<span class="pull-right"><i class="fa fa-caret-down"></i></span>
</button>
<ul class="dropdown-menu cart-content" role="menu">
<li>
<a href="detail.html">
<b>Penn State College T-Shirt</b>
<span>x1 $528.96</span>
</a>
</li>
<li>
<a href="detail.html">
<b>Live Nation ACDC Gray T-Shirt</b>
<span>x1 $428.96</span>
</a>
</li>
<li class="divider"></li>
<li>Total: $957.92</li>
</ul>
</div>
</form>
</div>
</div>
</nav>
</div>
#RenderBody()
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12 textAlignCenter">
<h5>Copyright © 2014 - Test Site</h5>
</div>
</div>
</div>
</footer>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown('toggle')
});
</script>
</body>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</html>
I would probably do this using a child action invoked from the master layout.
#Html.Action("Cart")
On server side create action returns PartialViewResult, which render your cart model.
At front-end render your partial via #Html.Action("YourPartialCart",'CartController') or ajax call.
All Views have a controller associated with them because the views are inherits. E.g. when you create a view you set it's Layout to be equal to the master.cshtml file.
Your view has a Model associated with it.
You can tackle this a couple of ways.
The simplest would be to use something like HttpContext.Current.Items, which is a request unique collection of shared data accessible from anywhere during an HttpRequest.
The next would be to use inheritance on your models. For example, Create Models like this
MasterModel
-> CartPageModel (inherits MasterModel)
-> AccountSettingsModel (inherits MasterModel)
etc.
Then on your master page set the model to MasterModel via the #Model MasterModel code, and on your view it would be #Model CartPageModel.
In your controller the code will populate values on the base model MasterModel and it's derrived type CartPageModel.