I have a Value coming from model that is relatively a huge html String. It also has a token that needs to be replaced with a value from Angular. I am trying to see how to get both of ends meet.
my Html
<h2 class="sub-title"> #Model.WelcomeText </h2>
Now this Welcome text is a relatively a html string that has a token. Something like this
"Hi ##Name , Welcome to our Website. Click <a href='#'> here </a>
for more details. <small> For more details please visit blah blah
</small>
Now i need to replace ##Name with a model value in my controller- $scope.Name
I tried
<h2 class="sub-title" ng-init= $scope.welcomeText('#Model.WelcomeText') </h2>
and then in my controller
function welcomeText(str)
{
return str.replace('##Name',$scope.Name);
}
But it breaks in the html itself because of $scope.welcomeText has invalid values inside ng-init
Any pointers on how to achieve this? The Model.Title is from a Sitecore CMS. I dont have that value in JS
I ended up doing this. Not sure if this is the ideal solution but atleast it works.
//Added a div with hidden class to get the value.
<div class="hidden" id="inp-title-server" /> #Model.Title </div>
<h2 class="sub-title" data-ng-bind-html="$scope.header"></h2>
Then in my controller,
var title = $("#inp-title-server").text();
$scope.header = title.replace('##Name', $scope.Name);
You can simply use replace function of string.
angular.module("app",[])
.controller("ctrl",['$scope',function($scope){
$scope.WelcomeText = "Hi ##Name , Welcome to our Website. Click <a href='#'> here </a> for more details. <small> For more details please visit blah blah </small>";
$scope.UserName = "ABC";
$scope.WelcomeText = $scope.WelcomeText.replace("##Name",$scope.UserName);
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<body ng-app="app" ng-controller="ctrl">
<h4 class="sub-title" ng-bind="WelcomeText"> </h4>
</body>
<html>
Related
We having a HTML content like
<em></ em >
<font style="text-align:justify;">aaaaaaaaaaa</font>
<img src="abc.jpg"/>
<iframe src="somelink.com">
</iframe>
<br>
<br/>
We want to change all HTML Tags to <p></p>
but do not change the <img/> and <br/> tag, some <br/> tags may display <br>
so, the following is our expected result:
<p></p>
<p>aaaaaaaaaaa</p>
<img src="abc.jpg"/>
<p>
</p>
<br>
<br/>
My regular expression like (in C#):
String result = Regex.Replace(content, #"<[^/b>]*>", "<p>");
result = Regex.Replace(result, #"</[^>]*>", "</p>");
but it can't skip the certain tags,
please help me, thanks !
You can use this:
<(?<close>/?)((?!img|br).)*?>
and replace with:
<${close}p>
CODE SAMPLE
I am using Netbeans to edit my HTML file. This is the first part of my HTML code file (I have some more code inside the head tags however that is not important):
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- wrapper for the whole component -->
<div id="componentWrapper">
<!-- playlist -->
<div class="componentPlaylist">
<div class="menuHolder">
<div class="menuWrapper">
</div>
</div>
<div class="thumbHolder">
<div class="thumbWrapper">
The dynamic part is in my C# program that create automatic on the hard disk an event each X time and put for me in a directory some gif files along with one animated gif (the animated gif shows animation of the other gif files in the directory). In this part of the HTML after the line: <div class="thumbWrapper">
I need to add the dynamic part in this format for example:
<div class="playlist" data-address='mistique_ken_burns' data-title='mistique' data-transitionType='ken_burns' data-bgColor='#e5e5e5' data-playlistSize='165' data-duration="25000">
<ul>
<li data-address='image1' class='playlistItem' data-imagePath='media/category1/main/01.jpg' data-startScale="1.4" data-endScale="0.5" data-startPosition="tl" data-endPosition="br" data-link='http://www.google.com' data-target='_blank' data-description="hello quam. <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-youtube='F08U2yCxbYg'><a href='#'><img src='media/category1/thumb/01.jpg' width='120' height='80' alt=''/></a></li>
</ul>
</div>
There are more <li> </li> lines. The important thing here is inside the li tags:
data-address='image1' class='playlistItem' data-imagePath='media/category1/main/01.jpg'
image1 then the next one is image2 then image3 and so on...
Then playlistItem the next time I will add to the HTML a block like this inside div tags it will be playlistItem2 then playlistItem3....
And the links to the images now it's: media/category1/main/01.jpg
But next time next block it will be media/category2/main/01.jpg
Then in the end I have another some HTML code that I don't change and then in my C# program, I merge the three parts every time and upload the updated HTML file to my FTP.
The first part is static, then dynamic part, and in the end another static part.
My question is how do I build each time adding to the dynamic part?
For example on my hard disk I have new event inside one .jpg file.
The file uploaded to my FTP server.
So now the HTML code I need to add in the HTML file, for example:
<div class="playlist" data-address='mistique_ken_burns' data-title='mistique' data-transitionType='ken_burns' data-bgColor='#e5e5e5' data-playlistSize='165' data-duration="25000">
<ul>
<li data-address='image1' class='playlistItem2' data-imagePath='media/category2/main/01.jpg' data-startScale="1.4" data-endScale="0.5" data-startPosition="tl" data-endPosition="br" data-link='http://www.google.com' data-target='_blank' data-description="hello quam. <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-youtube='F08U2yCxbYg'><a href='#'><img src='media/category2/thumb/01.jpg' width='120' height='80' alt=''/></a></li>
</ul>
</div>
My question is how in C# I can dynamically update the HTML file in this part?
Hi you can use placeholders inside the html file. Those placeholders can be replaced at runtime as below:
string placeHolder = "<!--<<PLACEHOLDER>>-->";
string path = "C:\\test.html";
string dynamicContent = #"<div class='playlist' data-address='mistique_ken_burns' data-title='mistique' data-transitionType='ken_burns' data-bgColor='#e5e5e5' data-playlistSize='165' data-duration='25000'>
<ul>
<li data-address='image1' class='playlistItem' data-imagePath='media/category1/main/01.jpg' data-startScale='1.4' data-endScale='0.5' data-startPosition='tl' data-endPosition='br'
data-link='http://www.google.com' data-target='_blank' data-description='hello quam. <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>'
data-youtube='F08U2yCxbYg'><a href='#'><img src='media/category1/thumb/01.jpg' width='120' height='80' alt=''/></a></li>
</ul>
</div>";
string content = File.ReadAllText(path).Replace(placeHolder, string.Concat(dynamicContent, placeHolder));
File.WriteAllText(path, content);
I am displaying my 'news' page and I want the customer to be able to output some simple html.
My view looks like this:
#using SuburbanCustPortal.SuburbanService
<br />
#foreach (var item in (IEnumerable<TokenNews>) ViewBag.News)
{
<div class="fulldiv">
<fieldset>
<legend>#item.Title</legend>
<div>
#item.Body
</div>
</fieldset>
</div>
}
When I do it this away, the html isn't being rendered by the browser, it's just showing the html as text.
Any way that I can output the html where the browser will render it?
You didn't exactly specify what part is being shown as text, but if it's item.Body, do #Html.Raw(item.Body) instead. That turns a string into an IHtmlString, whose purpose is to tell Razor that this thing is guaranteed to be safe to output as-is, and will not contain nasties like XSS attacks (ensuring this when using Html.Raw is your job). Everything that is not an IHtmlString will be escaped automatically by Razor.
I am getting below text from database with href as null.
You also have to click on this link .
This text I am assigning to the label when page loads.
My requirement is when I click the "link" I need to redirect to certain page. Where should I assign the href value and how?
<script>
var s = document.getElementByTagName("a");
s.href = ""; // here give the href value
</script>
If you are using jQuery you can set the href using the following code:
$("a").attr("href", "http://stackoverflow.com");
In the aspx page you can write the following line to create a placeholder
<div><%= linkValue %></div>
And in the code behind create a global variable
string linkValue = "You also have to click on is <a href='' target='_blank'> link </a>";
/* Set the page URL where you want to redirect the page. in your case get the value from database. */";
I think this is what you want to do. It was not completely clear from the question.
Updates:
In case you have multiple links in the page you need to create the link along with label.
See the code below
HyperLink link1 = new HyperLink();
link1.Text = "LINK HERE";
link1.NavigateUrl = "http://somedomain.com";
And add to the container like this
container.Controls.Add(link1);
document.getElementById('myAnchor').href="http://www.google.com";
Simple enough :)
In case, you also want to Change URL and text of the hyperlink...
<html>
<head>
<script type="text/javascript">
function myHref(){
document.getElementById('myAnchor').innerHTML="Visit Google"
document.getElementById('myAnchor').href="http://www.google.com"
}
</script>
</head>
<body>
<a id="myAnchor" href="http://www.java2s.com">Visit Java2s</a>
<form>
<input type="button" onclick="myHref()" value="Change URL and text">
</form>
</body>
</html>
Source: java2s
I am building a WebMatrix-based site, and I overlooked something. Something that just didn't occur to me.
My site is made up so that each page refers to the _SiteLayout.cshtml page for the header and footer. For example:
_SiteLayout.cshtml:
<html>
<head>
</head>
<body>
<div id="Container">
<div id="heading">
<input type="text" name="search" value="search" id="searchbox" />
</div>
#RenderBody() <!-- display Default.cshtml content -->
<div id="footer"><p>stuff here</p></div>
</div>
</body>
</html>
Default.cshtml:
#{
Layout = "~/_SiteLayout.cshtml";
}
<p>
I want to display search results in the Default.cshtml (homepage) page, but I don't know how to if the search form is inside the SiteLayout page. How to do this?
</p>
So, my question is I want to display search results in the Default.cshtml (homepage) page, but I don't know how to if the search form is inside the SiteLayout page.
How do I go about doing this?
You'll need to post the information in that search input to the server. Once you have the data back, you can use it to target an HTML element you know will be in the subviews.
This article from the jQuery docs helped me out. My data was coming from a JSON response, but the example shows how you can use jQuery to take the results response and add it to a specific element (in this case, the <body>, but you could just as easily create a div with an id of "search-results" and target it with #search-results):
$.getJSON('ajax/test.json', function(data) {
var items = [];
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val + '</li>');
});
$('<ul/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('body'); // Here, you could append your items to #search-results
});
Then it would be up to all the views to contain a section with an ID of search-results, but if it didn't exist, then the data just wouldn't show up anywhere. The script should be in a separate file and referenced in your main site layout.