I have template string something like below in a variable:
viewModel.description = "<p><strong>Hi</strong> helloo</p>";
I wanna compile it and show in view(using interpolation).
Something like:
<Label text="{{description}}" />
EDIT :
I replaced the HTML tags with XML tags using regular expressions. And now I want to compile those strings to show in the view.
Now I have something like below:
viewModel.description = "<Label>Hi</Label><TextView text="hello"></TextView>";
Now, how to show the data in view something like ngBindHtml in angular.
Thank you.
You can use htmlview
<HtmlView :html="description"></HtmlView>
Related
I have a blade template that has some HTML and some JS code. For both case 1 and 2 I'd like to use the same template as it's used in multiple places.
Case 1: include the template with the normal behaviour, so that the code in the template gets executed. This works with the normal behaviour of using #include('template')
Case 2: include the template without the HTML and JS actually being interpreted.
Now I could solve this by making it an x-template component, and then pass a variable to that component that will conditionally wrap the template in <xmp></xmp>.
But the problem is that I use Highlightjs, and that doesn't work if the code is in those xmp tags. It needs to be in <pre><code></code></pre>.
So I'm wondering if you can pass some parameter or do something to include a blade template without actually interpreting the code that's being included.
Update
A bit more clarification. Let's say template.blade.php has this:
<div id="test"></div>
<script>
alert('test');
</script>
In case 1 using #include('template') should alert test when the page is loaded.
In case 2 using #include('template') (but then another way I guess, that's what this question is about) I'd like it to display the code without interpreting it, like would happen when using <code>{{ '<div id="test"></div><script>alert('test');</script>' }}</code>.
beginner question with Razor and tag helpers I'm afraid!
Using tag helpers in my razor html, I can e.g. write:
<div><date-picker id="datepicker" value="#DateTime.Now"></date-picker></div>
This will then generate the output
<input id="datepicker" class="datepicker" aria-atomic="true" aria-live="assertive" aria-expanded="false" role="combobox" name="datepicker" placeholder="Select date">
and so on. What I'd like to do is to append the output to other objects like dialog screens, which accept an html string to append.
e.g.
var customDesign = "<div id="something"><date-picker id="datepicker" value="#DateTime.Now"></date-picker></div>";
$(".myDialogfield").after(customDesign);
This doesn't work in Razor - I've tried various things like creating this as a HTML.Raw string first and injecting it as a variable etc - is there a way I can use the output from my tag helper within a script section?
Thanks for any hints!
You can't do it that way. TagHelpers are interpreted. In other words, Razor must see them as actual tags in order to replace them. Here, it's just a JS string, and Razor will not mess with that.
Your best bet would likely to be some sort of JavaScript templating system, but generally speaking you could still get what you want manually via a different path. Instead of hardcoding a string of HTML, include the TagHelper in a script block of type text/html:
<script type="text/html" id="MyTemplate">
<date-picker id="datepicker" value="#DateTime.Now"></date-picker>
</script>
Then, in your JavaScript, you can select this script tag and get its content:
var customDesign = $('#MyTemplate').html();
$(".myDialogfield").after(customDesign);
I'm new to MVC 3 and still learning. I'm currently building a static 2 page website which has a different image on both pages but are located in the same place. I have been told that I can use the ViewBag to change this image depending on what page I am on, however I have not got a clue where to begin with applying this to my website.
Any help will be greatly appreciated. Thank You for your time.
On your controller's Action method,make ViewBag or ViewData like this
ViewBag.Imagename="nameofimage";
ViewData["img"]="nameofimage";
On your view, you can make img tag like this
<img src="#ViewBag.Imagename">
or if you have created ViewData
<img src="#ViewData["img"]">
For some reason, it did not work for me when I simply tried using
#ViewBag.BackgroundImage = "~/Content/images/image.jpg"
...
<img src="#ViewBag.BackgroundImage" />
But what did work for me was
#ViewBag.BackgroundImage = "image.jpg"
...
<img src = "~/Content/images/#(ViewBag.BackgroundImage)" />
personally i dont like specifying anything view related in controller, i am using naming convention between action method names and images:
<img src="~/Content/images/#(ViewContext.RouteData.Values["action"].ToString().ToLower())_img.jpg">
and picture name for index action method would be "index_img.jpg"
For those who want use full path in viewbag, use this
#ViewBag.BackgroundImage = "Content/images/image.jpg"
...
<img src="~/#ViewBag.BackgroundImage" />
The reason why hallordylo example not working with full path is missing "~/" in src="..." and this sign "~/" should not be inside ViewBag.
I hava an editor template for, let's say, date:
#model DateTime
#section AdditionalJavaScript2
{
/* some js code */
}
#Html.TextBox("", Model.ToString("d.M.yyyy"), new { #class = "date" })
Now, I would like to put some js code into the HEAD section, but this doesn't work.
Of course, I have a this section in my layout.cshtml:
<head>
...
#RenderSection("AdditionalJavaScript2", required: false)
</head>
It works from the plain view, but not from partial view (editor template).
Why?
And, is there a workaround?
Thanks,
Igor
A partial-view does not use a template, it returns "raw" html to be included in your page (by Javascript). It does not have access to anything but the stream it returns itself.
Think of it like this: You typically call a partial view from Javascript/AJAX to get some new html. You get the return, and replace some DIV-tag. How can the system (FireFox, Chrome, ...) know, that there is some extra section of data that needs to replace something in the HEAD tag.
There are some workarounds:
Don't put the script in the HEAD
Add a parameter switch betweed the html and the script. You need to client-side calls, one to get the html, and one for the script. You include the calls to the partial-view on two locations on your page.
Separate the script and the html using some pre-defined tag like <!-- SEPERATOR -->, and let the calling code split the result, and put it in the correct position.
I am writing a firebreath plugin that is supposed to display some object.
There are many cases of failure, since it is communicating with local software.
In case of a failure I want to close the plugin and to display a regular image instead. Or to get an image URL as a parameter, to parse the file and display it.
Both options are acceptable.
So-
What is the better option?
How do I totally close the plugin?
How do I parse parameters that are passed form the object tag?
I tried plugin->getParam("Name"), but didn't get the valueI passed.
How do I do it?
Assuming your HTML looks something like this:
<div id="plugincontainer">
<object id="myplugin" type="application/x-myplugin" width="100" height="100">
</object>
</div>
You should be able to remove the plugin like this:
document.GetElementById('plugincontainer').innerHTML = "";
Or if you're using jQuery:
$("#plugincontainer").empty();
This will result in a call to onWindowDetached inside of Firebreath where you can unload your code.
You're then able to add new HTML into the DOM:
$("#plugincontainer").append("<img src='images/my.jpg' />");