I am trying to display .svg image on my .cshtml page.
Status404.cshtml
#inject Context Session
#{
Layout = "";
}
<img src="/workspace/src/Application/wwwroot/img/404.svg" alt="404page"/>
#if(Session.CurrentUser.Language=="ka"){
<p><ქართული ტექსტი</p>
}
#if(Session.CurrentUser.Language=="en"){
<p><ENG TEXT HERE</p>
}
RESULT:
I tried creating a partial view(renamed .svg to .cshtml) like 404Partial.cshtml and then including it in .cshtml like this :
#await Html.PartialAsync("/workspace/src/Application/Views/404Partial.cshtml");
But it couldn't find the view.
After looking at your folder structure, this is the tag and path you need to use
<object type="image/svg+xml" data="~/img/404.svg"> </object>
You can try use the Object tag instead.
<object type="image/svg+xml" data="path/image.svg">
</object>
There is another option for that:
#Html.Raw(File.ReadAllText(Server.MapPath("~/workspace/src/Application/wwwroot/img/404.svg")))
Related
Is there a template/component solution in ASP.NET Core Razor, that supports inner Razor markup?
Here's a use case:
1. Say I have some repetitive markup for example "a div with nice borders, shadows and two buttons at the bottom"
2. Obviously this markup has a common "header" and a "footer" in the HTML code
3. I need to pass arbitrary Razor markup to insert between header and footer. Not just a model object - but some actual markup that will be rendered between header and footer. I can't use foreach because this markup is different every time - it can be text-content, a form, an image, or some complicated Razor-rendered stuff.
Basically I'm looking for a "Surround this Razor with more Razor" templating solution
Something like:
#{
//this function renders my beautiful box
Func<dynamic, IHtmlContent> myFunction = #<div class="relative flex flex-col rounded-2xl border border-gray-200 bg-white p-8 shadow-sm">
#item
</div>;
}
<!-- and then I call it passing some Razor as input -->
#myFunction(
<ul>
<li>#SomeRazorMethod()</li>
</ul>
);
Something like a Layout - but the one I can use multiple times on the same page.
Is there anything like that? This is a pretty common componentizing tool - "wrap my markup with other markup" - that is present in other templating engines (React, Vue, etc), but apparently not in Razor.
Just to be clear: I'm looking for a Razor-based solution, not a C#-based one. So that my header-footer markup stays in markup files (.cshtml), not in C# files that will have hard-coded HTML magic strings.
Based on your example, this might help.
#functions {
public static IHtmlContent MyBox(dynamic item, Func<dynamic, IHtmlContent> template)
{
var html = new HtmlContentBuilder();
html.AppendHtml("<div class='bestcss'>");
html.AppendHtml(template(item));
html.AppendHtml("</div>");
return html;
}
}
#MyBox(null, #<div class='innercss'>#(10 == 12 ? "MyTest Equals" : "No Equal") hello</div>)
And if you like to pass modeldata, it will be:
#MyBox(customerdata, #<div class='innercss'>#(10 == 12 ? "MyTest Equals" : "No Equal") hello #item.FirstName</div>)
I have used some arbitrary if condition for testing.
You can use Partial Pages or Views which are Razor files containing snippets of HTML and server-side code to be included in any number of pages or layouts.
Just like standard Razor pages, partial pages support the #model
directive specifying the type for the partial's data model. All of the
rendering methods have overloaded versions that take a model to be
consumed in the partial.
#Shah's answer got me one step closer to a solution, however, it seems like the the actual question I'm trying to solve is "can I pass Razor markup as an input parameter".
Turns out you can, you just have to put # in front of it:
#{
void MyFunc(Func<object, IHtmlContent> template)
{
<div>#template(null)</div>
}
}
#{ MyFunc(#<div>The ID is: #Model.Id</div>); }
<!-- mind the '#' before the 'div' -->
I'm trying to show the employee's picture (fields: hr_employee.image) on a website template. But the template just show the default picture for employees instead of the loaded image.
I tried this:
<span t-field="employee.image" t-options="{'widget': 'image', 'style': 'height:200px;width:200px;'}"/>
And also, tried this:
<div t-field="employee.image" t-options="{'widget': 'image', 'style': 'height:200px;width:200px;'}"/>
And this:
<img t-field="employee.image" t-options="{'widget': 'image', 'style': 'height:200px;width:200px;'}"/>
Template just show this:
I'm afraid accessing images isn't as simple as that since you need sudo access to get them. If you're accessing the built-in employee module then the base model already provides this sudo access for you. Instead use the following:
<img t-att-src="image_data_uri(employee.image_1920)" style="max-height:85pt;max-width:90%"/>
The 1920 refers to the image's size. You can also use employee.image_1024, employee.image_512, employee.image_256 or employee.image_128
If you're trying to access images from your own custom module then you'll need to update the .py file to access the image and provide its public url.
You can use website.image_url to define the image src attribute.
<img t-att-src="website.image_url(employee, 'image_medium')" class="img shadow rounded" alt="Employee"/>
The above code is taken from website_hr
module (aboutus template)
I am try to load an uploaded PDF file to my view file with an <iframe> tag, How can i disable the mouse right click in that specific <iframe> tag
My code is like this:-
<iframe id="your_iframe_id" src="http://localhost/employee/assets/documents/1582002009.pdf#toolbar=0&navpanes=0&scrollbar=0" onload="injectJS()" readonly="true" style="width:1000px; height:600px;" frameborder="0"></iframe>
<script type="text/javascript">
function disableContextMenu()
{
window.frames["your i frame id"].document.oncontextmenu = function(){alert("No way!"); return false;};
// Or use this
// document.getElementById("your i frame id").contentWindow.document.oncontextmenu
= function(){alert("No way!"); return false;};;
}
</script>
dont remember call this function too. if its not working tell me
I am using the extent report in my selenium project ,i want to remove the version showing in the right corner of the report.
can any one help me on this.
Do you have a extent-config.xml file?
Find in there something that looks like this:
<styles>
<![CDATA[
]]>
</styles>
And add your custom css. You'll have to inspect the element you want to hide, to find a selector for it. And then you can add css, something like this:
<styles>
<![CDATA[
#id-of-the-element{display:none};
]]>
</styles>
Alternate solution:
You will find something like this in extent-config.xml
<scripts>
<![CDATA[
$(document).ready(function() {
});
]]>
</scripts>
Simply make this change:
<scripts>
<![CDATA[
$(document).ready(function() {
document.getElementsByClassName("class name")[1].remove()
});
]]>
</scripts>
Can anyone help me? I can't load div tag partially!
The flow, I run is like that:
When I click submit btn, it call imporUrl and go to action "import" and then call the importAction in ActionBean.
After that set 'AAA' and 'BBB' to the List.
Finally it is all working , but it reload the whole form, not only div, I want to reload only div partially. Please help thank !
<s:url id="importUrl" action="import">
<s:param name="id" value="%{id}" />
</s:url>
<sx:submit href="%{importUrl}" value="Import" targets="selectedDiv" />
String importAction(){
List.add("AAA");
List.add("BBB");
return SUCCESS;
}
<s:div id="selectedDiv">
<s:iterator value="List">
<s:property/>
</s:iterator>
</s:div>
I think you directly load the div on same page.But you have to do like this.
<sx:submit href="%{importUrl}" value="Import" targets="selectedDiv"
onclick="javascript:show_details();return false;"/>
And put javascript
<script>
function show_details() {
dojo.event.topic.publish("show_detail");
}
</script>
And make ur div tag like :
<sx:div id="details" listenTopics="show_detail" formId="frm_demo" showLoadingText="">
</sx:div>