Is there anyway to access a css class that is located in a css file, and add and remove styles from it.
Edit:
What i am trying to achieve for now, is that i have added a css file "customize", and i have added a css class in it:
.yafheader
{
display:none;
}
I just want to manipulate the display value, that is all.
I believe the simplest solution is to just put the CSS you want in the stylesheet with a new class name, and then at runtime apply that class name to the element(s) you want to modify.
Create two CSS rules - one to display and one not to display. Then create a property of your class for CSS and apply the CSS rule via the property.
Code behind is executed on the server side. So it may be possible to get the CSS class parsed and manipulate it, but you need a plan on how this manipulated object is supposed to be injected into your output. One thing you might do would be to write a new css file with your manipulated class. There might be more convenient ways of doing that however; I believe it might help if you give a bit more context about what you're actually trying to achieve.
you don't want to modify the css file itself because it can be accessed by many users simultaneously. if you change the underlying css file in response to an action by your first site visitor, the next site visitor to load the page will receive the new css file, with styles that reflect the actions of the other user on your site. do as others have suggested and define 2 classes, and add/remove the appropriate classes at runtime using javascript.
Related
I was wondering if it is possible to modify a view HTML before sending it to the browser.
I wanted to create a custom tag compiler where i can insert a simple tag as <my-parsing-tag></my-parsing-tag> on the view and replace it for some specific HTML.
I'm already using OnActionExecuting and OnActionExecuted filters to execute some actions on the context (Change ViewBags, View names, Sessions, etc.), i also tried to do it there but i couldn't find the correct place to get the HTML, well i don't even know if it's possible to do so.
Is it possible or i would need to store my views HTML on the database to accomplish what i need ?
EDIT
As #Juan asked, why i need it:
I'm working with a call to action system where the user can place some specific modal campaigns on the page he wants just using those simple tags or selecting the page that will display it.
After that i will append the selected HTML to the view before sending it to the user. This system is intended for users that can't work editing the views since they don't work with HTML.
EDIT 2
After some research i have tried to implement a custom RazorView, the code is here with the Index View HTML, but now i have two problems:
The first one is that my Index View has some HTML that is coming from the database and is placed there using vars on my ViewModel and instead of the call to action HTML being placed at the end of my Index View, it's being placed before the ViewModel vars. The second problem is that the HTML is being duplicated instead of replaced. Here is an image of how the result looks like:
http://imgur.com/a/elul1
You could use an HtmlHelper extension for this:
http://tech.trailmax.info/2012/08/creating-custom-html-helper-in-mvc3/
I would suggest the following:
Define a container in your template (layout most likely) that will receive any content the user decides to "drop" into it via the admin panel.
You let the view know there is something to display via the ViewBag.
The view uses information you passed in order to render the desired content.
How it renders is where the HTMLHelper extensions come in. You could create an extension method which renders partial views based on the information you pass to it or maybe a set of extension methods that you call selectively based on the desired widget.
Maybe I am blind, but I am not able to find how to change css class attributte for entire table generated by Grid.MVC.
Default css class settings:
<table class="table table-striped grid-table">
And I want to edit that. I have a workaround now in javasript. It works but there has to be some better solution at server side.
I finnaly found that there is a shared view in ~/Views/Shared (_Grid.cshtml). There you can edit the whole grid.
You don't want to assign styles on the server side. You always want that to happen on the client side. the classes you are referencing in your table tag are the reason why your table looks the way it does. If you want to change the look of the table you have three choices:
You can create new CSS style classes and add them to your CSS and change the referenced classes in your table tag.
You can edit the existing CSS classes in the CSS file to suit your needs.
You can override the style you want by adding them inline on your table tag using the style attribute.
Edited to add:
According to the documentation for Grid.Mvc you can change your table styles in Content/Gridmvc.css
I'm using the MVCSiteMapProvider here: https://github.com/maartenba/MvcSiteMapProvider and trying to style my breadcrumb navigation so it has a look similar to http://www.psd100.com/wp-content/uploads/2013/02/breadcrumb-navigation-psd-free-download022701.jpg)
Has anyone had success with this? Maybe by generating a ul & li based on the current page your'e on. Right now I'm getting the breadcrumbs but I want to add an arrow background image to them, and unless I can get a ul & li, it's not possible to do.
Thanks in advance!
Actually, there is no need to create your own HTML helper (although that is certainly an option). All of the HTML helpers in MvcSiteMapProvider are templated. You can customize the default templates by editing them in the /Views/Shared/DisplayTemplates/ folder.
For the sitemap path HTML helper, you would want to edit the SiteMapPathHelperModel.cshtml (or SiteMapPathHelper.aspx) file.
Note that you can also utilize template naming to use more than one template on the same HTML helper.
#Html.MvcSiteMap().SiteMapPath("MyTemplateName")
This would match a template named MyTemplateName.cshtml or MyTemplateName.aspx.
well
i have a asp.net aspx page, which references a css file
have the font size defined in css as 2em;
problem
want to give option to user to change this to any value he wishes
irrespective of the bad effect to display format
question
please suggest ways to achieve it easily, efficiently and the most simplest way possible
note
way should support all browsers
You need to modify the CSS based on user actions. 2 approaches spring to mind:
1) Do the modification on the server (in C#). So you need to dynamically serve the CSS and modify this line based on user settings
2) Do the modification on the client using javascript (easy enough with jquery for example).
Advantage of 1 is you can store user preferences server side. But then it's easy enough to store preferences in cookies if you use javascript.
The very nice way of doing this is
create a config entry in the appsettings
<add key="CSSFontSize" value="10"/>
Have a div tag in your aspx page
<div id="cssConfigValue" style="display:none">value goes here</div> div to hold the value from config setting
in your c# code set the div through innerhtml
cssconfigValue.innerHtml="value from config"
Now in jquery , read this value and modify it
var value = $('#cssConfigValue').text() // this gives the value
$('.targeclass').css('font-size',value);
If you want to change all you need to change the appsettings and there is no need to change anything for deployment.
no dotnet build
no javascript change...
How do it create/access my own properties for elements in C# that I will use in JS.
and how do I access properties that are avaiable in Html but don't appear to be exposed in the c# set like the border property for tables
I know I can do it with styles and classes, but it seems like a limp around as opposed to the most robust way to do it.
Thanks in advance.
The Attributes property of the WebControl base class is what you're looking for. Example:
MyControl.Attributes["myattr"] = "examplevalue";
The most robust as well as the most correct way of doing it is though CssClass property and a class defined inside a .css file.
One reason to this is that if you have a designer who only touches CSS, they can change styles without touching your C# source code. If you don't have a designated CSS person, layer separation is still beneficial - just imagine looking though source code to change border color.
Separating CSS, source code and JS as much as you can is the advisable practice.