Javascript - How to escape double and single quotes on Kendo template
Solution 1
You need to encode the strings before sending them down to the client. If setting the strings in a Razor view, you can simply call @Html.Encode(string)
. To encode the content outside of a Razor view (e.g. in your data access code) just call System.Web.HttpUtility.HtmlEncode(string)
directly.
HttpUtility.HtmlEncode("A simple 'encoded' \"string.\"");
// A simple 'encoded' "string."
Solution 2
Each # symbol that is not part of a template expression— #: #, # # or #= # —must be escaped \#.
balron
Updated on July 25, 2022Comments
-
balron almost 2 years
I'm using kendolistview on my view page(razor). Inside of the kendo template I have this code. It just opens the bootstrap pop-up with. Problem is the "content" data has some " and ' values. So the link cannot be referred to the js function and the pop-up doesn't open.
I tried replacing the quotes in the data layer:
Content = rss.CONTENT.Replace(@"\""", "\"").Replace("'", @"\'") Summary = rss.SUMMARY.Replace(@"\""", "\"").Replace("'", @"\'")
View
@model AIS.UI.WebService.Proxy.DSrvAllService.NewsItem @using Kendo.Mvc.UI @(Html.Kendo().ListView<AIS.UI.WebService.Proxy.DSrvAllService.NewsItem>() .Name("listView") .TagName("div") .ClientTemplateId("template") .DataSource(dataSource => dataSource .Model(model =>model.Id("ID")) .ServerOperation(true) .PageSize(2) .Events(events => events.Error("onError")) .Read(read => read.Action("GetNewsList", "News")) ) .Pageable() ) <script type="text/x-kendo-template" id="template"> .... <a href="javascript:openNewsPopup('#:Title1#','#:Summary#','#:Content#','#:ImageURL#','#:AddTime# ','#:AddDate#','#:AddYear#','#:SubmitedBy#')" class="btn pull-right"><span style="font- weight:normal" rel="tooltip" title="Read more about the announcement">Read More</span></a> <script>
Js(viewmodel)
var OpenNewsPopupViewModel = function() { var self = this; self.Title = ko.observable(""); self.Summary = ko.observable(""); self.Content = ko.observable(""); self.ImageURL = ko.observable(""); self.AddTime = ko.observable(""); self.AddDate = ko.observable(""); self.AddYear = ko.observable(""); self.SubmitedBy = ko.observable(""); self.ImageURLFull = ko.observable(""); }; var openNewsPopupViewModel = null; function openNewsPopup(pTitle, pSummary, pContent, pImageURL, pAddTime, pAddDate, pAddYear, pSubmitedBy) { var imageRootPath = '@Url.Content("~/Images/Announcements/NewsTypes/NewsType")'; var isNewViewModel = (openNewsPopupViewModel == null); var newsPopup = $("#newsPopup"); if (isNewViewModel) { openNewsPopupViewModel = new OpenNewsPopupViewModel(); var newsPopupTag = newsPopup.get()[0]; ko.applyBindings(openNewsPopupViewModel, newsPopupTag); } // pContent = str.replace(/\"/g, "\\\""); openNewsPopupViewModel.Title(pTitle); openNewsPopupViewModel.Summary(pSummary); openNewsPopupViewModel.Content(pContent); openNewsPopupViewModel.ImageURL(pImageURL); openNewsPopupViewModel.AddTime(pAddTime); openNewsPopupViewModel.AddDate(pAddDate); openNewsPopupViewModel.AddYear(pAddYear); openNewsPopupViewModel.SubmitedBy(pSubmitedBy); openNewsPopupViewModel.ImageURLFull(""); openNewsPopupViewModel.ImageURLFull(imageRootPath + '.' + openNewsPopupViewModel.ImageURL() + '.jpg'); newsPopup.modal('show'); }
Sample data(that should be replaced double quotes)
<a href="javascript:openNewsPopup(' Version 1 is Released','Version 1.0 is now available on web. You can download the new version of the client program from the website" http:="" 255.255.255.0="" test"="" or="" installed="" program="" can="" automatically="" download="" it="" for="" you.','news="" context="" will="" be="" placed="" here.="" news="" .="" ','update','12:04',="" '01.01','2013','admin')"="" class="btn pull-right"><span style="font-weight:normal" rel="tooltip" title="Read more about the announcement">Read More</span></a>
-
Andree over 8 yearsAnd here is another problem and that is the # (sharp) isn't escaped for Kendo Template, which cause error in rendering.
-
serge almost 2 yearswhat if it's part of a variable
#:data.MyVar#
?