So I'm developing a Model View Controller (MVC) project. Due to the size and complexity, I'm trying to ensure organization. I've managed to stumble on a unique quandary, one that has left me quite stumped. My issue is drawn from a Jquery Rotator that I'm integrating into my site.
My Solution Explorer:
Content : This particular folder contains three direct sub-folders Images, Scripts, and Stylesheets.
Those three sub-folders contain more specific and honed in details, an example would be the Scripts contains another folder called Rotator for this jQuery implementation.
So the dilemma occurs inside the View.
An example within this View:
<div class = "banner-style">
<div id = "Infinite-Banner">
<div class = "banner-container">
<div class = "slides">
<img src = "~/Content/Images/Banner/Slides/One.jpg">
<img src = "~/Content/Images/Banner/Slides/Two.jpg">
</div>
</div>
</div>
</div>
So within this structure it doesn't appear to load the Images. Though it is properly mapped to the directory. But if you use the same structure above but change the img portion to:
<div class = "slide-one" />
<div class = "slide-two" />
Then in a the correlating Stylesheet, simply define a background: url(~/Content/Images/Banner/Slides/One.jpg); for the slide-one Element it magically appears.
So this makes me believe that it is due to nesting. But doesn't quite make sense, as this will force me to build an inner element between the div slides so that I can generate the proper affects.
The other idea would be to create a model that maps all the relational image data; but that seems like an awful lot of work.
Is this a limitation or an issue specific to my machine? What would be the best work around to such an issue? Is this indeed due to the structure I've taken to my folders?
Try using the Url.Content method:
<img src="#Url.Content("~/content/images/banner/slides/one.jpg")" />
You didn't post what the actual URL is being built as, but, I would guess that the path is wrong because whatever controller you're hitting is being used in the relative path.
Related
I've been experimenting around a lot with the MudBlazor Library lately. I'm pretty happy with it and considering to use it in my next project. But currently I have a issue that confuses me.
To make the issue easier replicable, I created a new and clean demo solution in Blazor WASM ('ASP.NET Core Hosted' checkbox checked). In the client sided project, I installed the default MudBlazor Package and made all relevant code additions according to the documentation to make the library work.
I added the relevant MudTheme-Code to the MainLayout.razor-File, which in simplified terms currently looks like this:
#using MudBlazor;
#inherits LayoutComponentBase
<MudThemeProvider #ref="#_mudThemeProvider" IsDarkMode="true" />
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4">
About
</div>
<article class="content px-4">
#Body
</article>
</main>
</div>
#code {
private MudThemeProvider _mudThemeProvider;
}
Now the issue is that the DarkMode of the MudTheme works as intended, but only for the content inside the MainBody. The top-row (which I want to use as a header row for additional features) doesn't initially get applied after loading the page:
So I've tried to comment out the background-color line in the .top-row class of the MainLayout.razor.css-File, which doesn't seem to change anything, even after restarting the application.
Only when changing a line in the MainLayout.razor.css-File (even if it is just a comment) while the background-color line is also removed, then the top-row will also be in the dark-mode.
I can only guess why the application behaves like that. I've tried several ideas and googled around, but I wasn't able to find a solution for this.
So my two questions here are:
Why does the dark-theme have a conflict with the white background color in the css of the top-row, but not the rest of the application (body content of all pages)?
Why does the dark-theme not get applied to the top-row, unless I make a change in the MainLayout's css-File, even if it just a comment? What can I do to get the dark theme working after the initial rendering?
Let me know if you need any additional files or code from the solution.
Thanks!
This seems to me a cache problem.
You have several options:
Reload the page with CTRL + F5 (Windows/Linux) or ⌘ + ⇧ SHIFT + R (Mac)
Use the incognito mode of your browser (example for Chrome: https://support.google.com/chrome/answer/95464)
Disable the cache with developer tools (example for Chrome: Disabling Chrome cache for website development) - this my favourite, but remember that this setting is only active while the developer tools are open
For reasons outside my control I have been requested to render a series of images on a web page (sort of a gallery view) based on a directory structure utilizing a UNC path. You'll note that I'm using relative paths as I work on this but will be deploying the site using UNC conventions.
I’ve created the following partial view to render the images, I can format later.
#model System.Collections.Generic.List<string>
#foreach (var image in Model)
{
<div id="ptImage">
<img src="#image" alt="#Path.GetFileName(image)"/>
</div>
}
Where #image above represents the absolute path to the image needing to be rendered.
The paths displayed in view source of the page are what I feel I should be expecting back and truly define locally the location of the image. When accessing images via a relative path is this what others would expect?
<div id="gImg">
<img src="C:\Projects\Test_Site\Site_1\ES3\ES3_0.bmp" alt="ES3_0.bmp" />
</div>
<div id="gImg">
<img src=" C:\Projects\Test_Site\Site_2\ES4\ES4_0.jpg" alt="ES4_0.jpg" />
</div>
When the partial view loads I only see the alternative text of the image, not the image itself. A look at the IIS Express log tells me the following:
http://localhost:1348/TestGallery/ 404 0 2 6, This resource lead me to understand that 404 0 2 x seems to indicate the resource isn't found.
With that truly being the path to the file, what is IIS expecting as a valid input to locate the resource? I'm not sure how to phrase the question to perform a further search.
The src paths in the img tags need to be web site URLs, not actual file locations on disk. Your web app should translate the URLs to grab the image from the appropriate location.
One possible solution:
Make a custom entry in your application's RouteConfig.cs to treat all items on a certain URL path dynamically. (In this example it is a separate controller.)
routes.MapRoute(
name: "Images",
url: "image/{*querypath}",
new { controller = "Image", action = "Retrieve" }
);
In the code that handles arbitrary query path, translate the relative URL (in querypath above) to the UNC path you're looking for and serve the image.
return File(UncRootPath + querypath, "image/png");
I want to change the method name dynamically for different pages.
My code is
(C#, ASP.NET, HTML)
if (IsPost)
{
if (Validation.IsValid())
{
errorMsg = "";
var input = Request.Form["awb"].Trim();
errorMsg = #input;
track trackObj = new track();
**output = trackObj.tpc(input);**
<div class="row">
<div class="embed-responsive embed-responsive-16by9">
<iframe id="result" sandbox="allow-same-origin" class="embed-responsive-item" src="#output"></iframe>
</div>
</div>
}
}
This is a code from one page of my website, I need to use same code in more than 20 pages. So I don't like to copy and paste the same code over every page.
I am looking for some concept to dynamically change the method name.
i.e
output =trackobj.tpc(input);
should be
output=trackobj.something(input); //in another page
In Razor, I have tried the following methods.
1. Dynamic Instance
#Page.MethodName="somename";
Is is leading to run-time error.
2, Created new Render Area
#RenderSection(somename,false);
It is displaying the method name in webpage.
Is there any other possible way to change the method name dynamically for different website?
or I have to copy that code manually for different page.?
AFAIK, its not possible, use a factory that resolves the target method call and you can use it. You can provide some hints to the factory on the caller etc. This will be a robust approach and pluggable.
I used Mustache framework to change the method name dynamically.
I am styling up a website that is using Orchard and I have noticed their is a custom content type which has a message, here is a standard message in HTML
<p>Some text</p>
<p>Some more text</p>
This is fine however thanks to the Orchard.Core.Common.Views.Fields.Common.Text.cshtml it is inserting a <br /> after each </p>
Here is their view which is rendering the message
#using Orchard.Utility.Extensions;
#{
string name = Model.ContentField.DisplayName;
}
#if (HasText(name) && HasText(Model.Value)) {
<p class="text-field"><span class="name">#name:</span> <span class="value">#(new MvcHtmlString(Html.Encode((HtmlString) Model.Value).ReplaceNewLinesWith("<br />")))</span></p>
}
How can I override this? I have tried to copy and paste the view into my Themes/View folder but it doesn't seem to override it. I just want to remove the ".ReplaceNewLinesWith("<br />")"
I haven't tried this with Orchard 1.6, however this works fine with the latest version (1.8). The obvious things to check are that your theme is active and that you given your view the correct name. If you want a global override then the View should be in the root of your themes View folder, with the name 'Fields.Common.Text.cshtml'.
If you don't want to change the behaviour for all text fields, then you may want to turn on shape tracing and find an Alternate for the view that is tied to either the field name of the content type that it's contained in (for example 'Fields.Common.Text-SomeTextField.cshtml'. This would reduce the impact of any change you make.
That said, are you sure you're doing the right thing though? If your content contains <p> tags then at least in the latest version, the tags will be stripped, which makes sense since otherwise you'd end up with nested <p> tags:
<p class="text-field"><span class="name">SomeTextField:</span> <span class="value">
<p>Some text</p>
<p>Some more text</p></span>
</p>
Also, as a warning, whilst it is certainly possible to override this view in the latest version of Orchard, the view has actually changed so that the new line processing is no longer in the view. It has been moved out into a Filter Orchard.Core.Common.Services.TextFieldFilter. So if the site is updated in the future you may find that you need to revisit the area.
I am beginning to study the very nice CMS Orchard and, after reading the basic documentation, I've stumbled in a little hurdle.
I've created a new DataType, 'SpecialOffer', which has some dataparts and some text datafields:
ProductName
PhotoURL
Price
Description
I've made a list, made a widget, customized the position.info file and the Views\Fields\Common.Text.cshtml file to change the position and the way the fields are rendered (a img for the photo, prepending € to the price and so on) but this doesn't give me the right amount of customization over the generated html.
I've installed the developer shape tracing module and created an alternate Content-SpecialOffer.cshtml file.
This gives me the opportunity to easily customize the HTML around the content, but I have no idea how to get to the single DataItem fields to display them the way I want.
I mean that the whole SpecialOffer object is displayed through
#Display(Model.Content )
and, exploring the model, I've not found a way to write something as, say (pseudocode)
<div>
the
<span class="name"> #Model.Contentitem.Fields["ProductName"]</span>
camera costs
#Model.Contentitem.Fields["Price"]
euros
</div>
I've read this post on SO
Custom View For RecentBlogPosts in Orchard
but it does not solves my problem, since it uses the standard properties of blogpost.
another little question: other than in the Documentation page of project orchard and b. LeRoy's http://weblogs.asp.net/bleroy/ where can I study Orchard?
Thanks!
Edit
I've found a way to do it:
#{
dynamic offer =Model.ContentItem.SpecialOffer;
}
<div>
the
<span class="name"> #offer.ProductName.Value</span>
camera costs
#offer.Price.Value
euros
</div>
is this the right way?
Yes, that's fine.
After the docs and the RSS feed on the home page of orchardproject.net, a major source of information (better than the previous 2) is the source code for the app and modules.