I am using jQuery datatable in my Asp.net MVC project. In any row in datatable I have dropdown-menu for some operations like below:
I want to hide some buttons in this dropdown for non-authorized users.
My js code for add this drop-down menu is:
{
data: 'UserId',
name: 'UserId',
render: function (data) {
return '<div class="btn-group btn-group-sm operation"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">عملیات <span class="fa fa-caret-down"></span></button> <ul class="dropdown-menu"> <li><span class="fa fa-pencil"></span>ویرایش</li> <li><span class="fa fa-gift"></span>امتیاز هدیه</li> <li><span class="fa fa-area-chart"></span>گزارش ریز امتیازات</li> <li class="divider"></li><li><span class="fa fa-trash"></span>حذف</li></ul> </div>';
},
orderable: false
}
I use Asp.net Identity in this project.
How can I do this?
Thanks in advance
Add classes to each button that correspond to the security roles that are allowed to use them. Start with all buttons hidden, then show the buttons that have the classes that correspond to the role(s) authorized for the current userid.
Something like this:
<button class="admin">Admin Stuff</button>
<button class="admin super">Superuser Stuff</button>
<button class="admin super normal">Normal Stuff</button>
<button class="admin super normal guest">Guest Stuff</button>
And then, when you open the page:
$(document).ready(function () {
$('button').hide();
// find the role of the current user
$('.' + theRole).show();
});
This example assumes that the names of the security roles are the same names as the classes you added to the buttons. That's the easiest, because it only requires the one line of code. If you can't do that for some reason, you have to use if else statements to determine which role the user is in, and show whichever class is equivalent to the role.
Related
I have a page to edit some information, on this page I have a button which opens a modal, I create the dropdown as so,
<label class="select" style="width: 100% !important">
#(Html.DropDownList("InteractingDrugId", Model.AllSubstances, new { #class = "select2 form-control",
#style = "width: 50% !important",
#data_placeholder = "Type drug to find" })
)
</label>
The button for the modal uses Modal.ID to set the items inside the modal.
<a class="btn btn-warning edit-interaction-ref" href="javascript:void(0)" data-id="#(Model.ID)" data-toggle="tooltip" title="Edit References">
<i class="fas fa-link"></i>
References
</a>
All works fine, and the modal loads correctly with the correct info in, but if I change the option in the dropdown to a different item, the data in the modal stays the same as the one initially loaded on the page.
When I change the option in the dropdown I also want the Modal.ID to change.
Is this possible?
You can try to use js to change data-id when the selected value is changed,but you cannot change Model.ID directly,because it is a c# variable:
<script>
$("#InteractingDrugId").change(function() {
$("a.edit-interaction-ref").attr("data-id", $("#InteractingDrugId").val());
})
</script>
I have a customer model with the following collection:
#doctors = Customer.joins(:user).where(users: {role: User.roles[:doctor]})
which joins the user table and customer tables where user role is "doctor".
In my Customers index view currently I am listing all the customers, now I want to add a search filter using a Drop down list with a search button, where the list contains the first name of the Doctors. If I press the search button it should show only customers created by that particular doctor selected from the drop down list.
1. How to add a drop down list with search button which displays only first names of doctors ?
2. How to filter my customers listing when I select a particular doctor from the drop down and click on search button ?
<div class="btn-group">
<button type="button" class="btn btn-success btn-sm"><b>Search By Dr.</b></button>
<button type="button" class="btn btn-success btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>List All Customers</li>
<% #practices.each do |practice| %>
<li>Dr.<%= practice.firstname %></li>
<% end %>
</ul>
</div>
The above is the code that I am currently using, but is it correct way of Rails ?
Answer 1:
you can do this task using JS I will recommend you to use one of these jquery plugins for search bars Select2 and Chosen.
My personal experience with select2 is impressive.
it loads data via ajax and cache as well to avoid repeat calls. Its GUI give u a Google like feel. read its documentation and use it.
Answer 2:
select2 also give u events like change so u can make another ajax call to load filterd customers.
You can simply use the following tag in your rails view:
<%= select("doctor", "firstname", #doctors.all.collect(&:firstname)) %>
Then in your controller you'd have something like this:
def index
if params[:doctor]
#customers = Customer.joins(:user).where(users: {role: User.roles[:doctor]}, firstname: params[:doctor][:firstname].downcase)
else
#customers = Customer.all
end
end
You can do this auto_complete rails. Have a look on
http://railscasts.com/episodes/102-auto-complete-association
Thanks
I'm very new to Rails and have just started to create my first app. this question may sound a little weird.
So i have two drop down menus, Year and Region, they each have some selections. i have an articles controller and model to store some info. I'm trying to make this action work:
first make a selection from "Year", say 2014. As soon as i click on 2014 i want to display all the articles from the database with the year 2014
then, while the "Year" dropdown menu is still in 2014, I make a selection in the "Region" dropdown menu, say US, and have the view display articles that belongs to 2014 and US.
is it possible to do all the above without using ajax?
here's my view code for articles/index
<!-- Region -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Region
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><%= link_to "All Regions", ?????_article_path(???) %></li>
<% #articles.each do |article| %>
<li>
<%= link_to article.region, ?????_article_path(???)%>
</li>
<%end%>
</ul>
</div>
<!-- Years -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Year
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><%= link_to "All Years", ?????_article_path(???) %></li>
<% #articles.each do |article| %>
<li>
<%= link_to article.year, ?????_article_path(???)%>
</li>
<%end%>
</ul>
</div>
here's my ArticlesController, it just have one index method
class ArticlesController < ApplicationController
def index
#articles = Article.all
end
So i thought about putting another method in there called selection but i'm not sure how to pass the second dropdown menu's selection.
If you want to actively get the articles from the database, you need AJAX. In case you are OK with loading the articles together with the view, you can simply store them as a pre-fetched JSON object like this:
<script>
var articles = <%= raw #articles.to_json %>;alert(articles);
</script>
And then either manually go through this JS object.
Tip: to have more control over displaying and rendering of JS objects, install backbone.js (http://backbonejs.org/), install backbone.js query (https://github.com/davidgtonge/backbone_query) make a articles Backbone model (tutorials on backbone.js page are really simple and helpful), articles_collection Backbone collection, query it the way you want, and then make HTML code via Javascript and paste it on the page. I prefer using Backbone.js underscore.js templates for that, they are an excellent tool to master.
I'm working on a view. The view has a dropdown menu and i want to add other fields to the view, depending on the index i selected in the dropdown.
http://abload.de/image.php?img=unbenanntcajcc.png
at ... i want to show other stuff like textfields. (i'm using bootstrap for styling)
thats the code:
<div class="col-md-4">
<div style="height: 452px; overflow: auto">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Select a Filter <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>First name</li>
<li>Last name</li>
<li>Occupation</li>
<li>Location: Birth</li>
<li>Location: Marriage</li>
<li>Location: Death</li>
<li>Location: Burial</li>
<li>Time: Birth</li>
<li>Time: Marriage</li>
<li>Time: Death</li>
<li>Time: Burial</li>
<li>Relatives </li>
</ul>
</div>
<br />
...
<br />
<button type="button" class="btn btn-success">+</button>
<br />
<br />
<button type="button" class="btn btn-default">Add filter</button>
</div>
You want something like this:
add classes to your different anchor tags in the dropdown menu like so:
<ul class="dropdown-menu" role="menu">
<li><a class="firstname" href="#">First name</a></li>
</ul>
<div class="stuffIwanttoadd"></div>
Then in a javascript file have something like:
$("a.firstname").click(function(event) {
event.preventDefault();
$("div.stuffIwanttoadd").innerHTML="<p>Here is some stuff I want to add</p>";
});
and do that for each element of the list (you should wrap the javascript in a function to make this easier).
EDIT: to get the javascript to run you'll need to attach it to the page, this means registering it in a window.onpageload event (or something like that) assuming you are using turbolinks you're going to want to do that like this:
var initFunc = function() {
// everything you want to attach to the dom goes in initFunc
$("a.firstname").click(function(event) {
event.preventDefault();
$("div.stuffIwanttoadd").innerHTML="<p>Here is some stuff I want to add</p>";
});
};
$(document).ready(initFunc);
$(window).bind('page:change', initFunc);
I want to change the inner text value of a div that is located on my site.master page, and I want the changed value to remain for the rest of the session.
The value I want to pull through is the User name that is obtained from OAuth
By Using: User.Identity.Name;
I can only access this property once a user has authenticated, based on my redirect after authentication the page then moves to a nested master page for the members_only section.
I can change the text of the div with this code:
((HtmlGenericControl)Master.Master.FindControl("LoginButton")).InnerText = User.Identity.Name;
But as soon as I redirect, the text changes back to null.
I use it for my bootstrap user button which looks like this
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> <div id="LoginButton" runat="server"></div></a><a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a><ul class="dropdown-menu">
<li><i class="icon-pencil"></i> Manage</li>
<li class="divider"></li>
<li><i class="i"></i>Logout</li>
</ul>
</div>
Any advice would be greatly appreciated.
You could just use the LoginName control to do all that for you - just drop it into your MasterPage.