Develop Reference

How to call c# function in cshtml(razor page) from inside js function

How to call c# function in cshtml(razor page) from inside js function
this is cshtml code
#model TreeWithUnity.Pages.Tree.TreeExampleModel
<form method="post">
<input type="checkbox"
onclick="requestMyAction('#Model.tree_List[0].board_id', this.checked,
'loader-#Model.tree_List[0].dataName',#Model.tree_List[0]);" />
<div class="loader" style="display: none;" id="loader-#Model.tree_List[0].dataName">#Model.tree_List[0]
</div>
</form>
#section scripts{
<script type="text/javascript">
function requestMyAction(itemId, isChecked, loaderId,tn)
{
document.getElementById(loaderId).style.display = "inline-block";
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
document.getElementById(loaderId).style.display = "none";
if (this.status === 200) {
document.getElementById(loaderId).style.display = "none";
}
}
};
var url = '#Url.Page("./TreeExample", "MyAction")';
xhr.open('POST', url);
xhr.setRequestHeader('RequestVerificationToken', '#Xsrf.GetAndStoreTokens(Model.HttpContext).RequestToken');
var data = new FormData();
data.append('itemName', itemId);
data.append('deploy', isChecked);
xhr.send(data);
#UpdateRecursiveData(tn)
}
}
</script>
}
#{
void UpdateRecursiveData(TreeWithUnity.Model.TreeNode tn)
{
if(tn.deployment)
{
<input type="checkbox"
onclick="requestMyAction('#tn.board_id', this.checked, 'loader-#tn.dataName');" />
<div class="loader" style="display: none;" id="loader-#tn.dataName">#tn.dataName</div>
<br />
for (int i = 0; i < tn.subTreeNodes.Count; i++)
RecursiveData(tn.subTreeNodes[i]);
}
}
}
#UpdateRecursiveData(tn) is not work
is it able to work in js c#func ?
I don't know how to implement this
UpdateRecursiveData should be executed later than MyAction of Tree Example. Is this possible?
how to call UpdateRecursiveData
public async Task<IActionResult> OnPostMyAction(string itemName,bool deploy)
{
if (TempData["TreeData"] != null)
tree_List = TempData.Get<List<TreeNode>>("TreeData");
TreeNode upTree=null;
foreach (var item in tree_List)
{
if (item.board_id == itemName)
{
upTree = item;
item.deployment = deploy;
}
}
if (deploy&&upTree.loadOn==false)
{
if(upTree!=null)
upTree.deployment = true;
IQueryable<tbl_tree> iqueryTree;
iqueryTree = _context.tbl_tree.Where(x => x.upcode == itemName);
var datas =await iqueryTree.ToListAsync();
for (int i = 0; i < datas.Count; i++)
{
TreeNode treeNode = new TreeNode(datas[i].name);
treeNode.board_id = datas[i].icd11;
tree_List.Add(treeNode);
}
TempData.Set("TreeData", tree_List);
}
return new OkResult();
}

Firstly,you cannot pass a js variable to c# function,you can try to use ajax to call c# handler,and handler returns html code,then put the html code to somewhere of the view.Here is a demo:
<form method="post">
</form>
<div id="data"></div>
#section scripts{
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: '?handler=UpdateRecursiveData',
headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
data: {id:1},
success: function (data) {
document.getElementById("data").innerHTML = data;
},
error: function (result) {
alert("fail");
}
})
})
</script>
}
handler:
public JsonResult OnPostUpdateRecursiveData(int id)
{
return new JsonResult("<div>id="+id+"</div>");
}
result:

DataTable equivalent in Jquery to store data?

I have a form on which I am adding rows dynamically using Jquery.
Please take a look: DEMO
Now I want to save the data of all rows that has been added in my database using Jquery Ajax call on click event of SAVE button. The point where I am stuck is .. I am not sure how should I extract data of all rows and send it to the webmethod. I mean had it been c# I could have used a DataTable to store data of all rows before sending it to DataBase. I think I should create a string seperated by commas and pipe with data of each row and send it to webmethod. I am not sure if its the right approach and also how this is to be done (ie. creating such a string).
HTML
<table id="field">
<tbody>
<tr id="row1" class="row">
<td> <span class='num'>1</span></td>
<td><input type="text" /></td>
<td><select class="myDropDownLisTId"> <input type="text" class="datepicker" /></select></td><td>
<input type="submit"></input>
</td>
</tr>
</tbody>
</table>
<button type="button" id="addField">Add Field</button>
<button type="button" id="deleteField">Delete Field</button>
<button type="button" id="btnsave">SAVE</button>

2 suggestions:
To keep it as close as what you already have, you could just enclose your table in a form tag, and then you could just submit the form (use something like the jQuery Form plugin to submit it via Ajax). The trickiest part will be to bind that data to action parameters. You may be able to receive it in the form of an array, or you could default to looping through properties of the Request.Form variable. Make sure you generate proper names for those fields.
I think the cleanest way to do it would be to have a JavaScript object holding your values, and having the table generated from that object, with 2-way bindings. Something like KnockoutJS would suit your needs. That way the user enters the data in the table and you'll have it ready to be Json-serialized and sent to the server. Here's a quick example I made.
I wouldn't recommend that approach, but if you wanted to create your own string, you could do something along those lines:
$("#btnsave").click(function () {
var result = "";
$("#field tr").each(function (iRow, row) {
$("td input", row).each(function (iField, field) {
result += $(field).val() + ",";
});
result = result + "|";
});
alert(result);
});
You will have problems if the users types in a comma. That why we use well known serialization formats.

use ajax call on save button event...
like this
$(document).ready(function () {
$('#reqinfo').click(function () {
// debugger;
var emailto = document.getElementById("emailid").value;
if (emailto != "") {
$.ajax({
type: "GET",
url: "/EmailService1.svc/EmailService1/emaildata?Email=" + emailto,
// data: dat,
Accept: 'application/json',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
// debugger;
},
error: function (result) {
// debugger;
}
});
}
else {
//your validation message goes here
return false;
}
});
});
and add you all data in quesry string and transfer it to webservice..
url: "/EmailService1.svc/EmailService1/emaildata?Email=" + emailto + "data1=" + data1,

<script type="text/javascript">
var _autoComplCounter = 0;
function initialize3(_id) {
var input_TO = document.getElementById(_id);
var options2 = { componentRestrictions: { country: 'ID' } };
new google.maps.places.Autocomplete(input_TO, options2);
}
google.maps.event.addDomListener(window, 'load', initialize3);
function incrementValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
function GetDynamicTextBox(value) {
var _id = "AutoCompl" + _autoComplCounter;
_autoComplCounter++;
return '<input name = "DynamicTextBox" type="text" id="' + _id + '" value = "' + value + '" onkeypress = "calcRoute();" />' +
'<input type="button" class="superbutton orange" value="Remove" onclick = "RemoveTextBox(this)" />'
}
function AddTextBox() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
if (document.getElementById('number').value < 3) {
document.getElementById('number').value = value;
var div = document.createElement('DIV');
var _id = "AutoCompl" + _autoComplCounter;
_autoComplCounter++;
var ht = '<input name = "DynamicTextBox" type="text" id="' + _id + '" value = "" onkeypress = "calcRoute();" class="clsgetids" for-action="' + _id + '" />' +
'<input type="button" class="superbutton orange" value="#Resources.SearchOfferRides.btnRemove" onclick = "RemoveTextBox(this); calcRoute();" />';
div.innerHTML = ht;
document.getElementById("TextBoxContainer").appendChild(div);
setTimeout(function () {
var input_TO = document.getElementById(_id);
var options2 = { componentRestrictions: { country: 'ID' } };
new google.maps.places.Autocomplete(input_TO, options2);
}, 100);
document.getElementById("TextBoxContainer").appendChild(div);
}
else {
alert('Enter only 3 stop point. !!');
}
}
function RemoveTextBox(div) {
//calcStopPointRoute();
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value--;
document.getElementById('number').value = value;
document.getElementById("TextBoxContainer").removeChild(div.parentNode);
}
function RecreateDynamicTextboxes() {
var values = eval('<%=Values%>');
if (values != null) {
var html = "";
for (var i = 0; i < values.length; i++) {
html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
}
document.getElementById("TextBoxContainer").innerHTML = html;
}
}
// window.onload = RecreateDynamicTextboxes;
</script>
And get the value from textbox:
#region stop point
string[] textboxValues = Request.Form.GetValues("DynamicTextBox");
if (textboxValues != null)
{
for (Int32 i = 0; i < textboxValues.Length; i++)
{
if (textboxValues.Length == 1)
{
model.OptionalRoot = textboxValues[0].ToString();
}
else if (textboxValues.Length == 2)
{
model.OptionalRoot = textboxValues[0].ToString();
model.OptionalRoot2 = textboxValues[1].ToString();
}
else if (textboxValues.Length == 3)
{
model.OptionalRoot = textboxValues[0].ToString();
model.OptionalRoot2 = textboxValues[1].ToString();
model.OptionalRoot3 = textboxValues[2].ToString();
}
else
{
model.OptionalRoot = "";
model.OptionalRoot2 = "";
model.OptionalRoot3 = "";
}
}
}
#endregion

Short answer:
DataTable equivalent in javascript is Array of custom object (not exact equivalent but we can say that)
or
you roll your own DataTable js class which will have all the functions and properties supported by DataTable class in .NET
Long answer:
on client side(aspx)
you define a class MyClass and store all your values in array of objects of that class
and then pass that array after stingyfying it to web method
JSON.stringify(myArray);
on the server side(codebehind)
you just define the web method to accept a list of objects List<MyClass>
PS: When calling web method, Asp.net automatically converts json array into List<Object> or Object[]
Loooong answer (WHOLE Solution)
Page aspx:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="App_Themes/SeaBlue/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script src="Scripts/json2.js" type="text/javascript"></script>
<script type="text/javascript">
function MyClass(title,option,date) {
this.Title = title;
this.Option = option;
this.Date = date;
}
function GetJsonData() {
var myCollection = new Array();
$(".row").each(function () {
var curRow = $(this);
var title = curRow.find(".title").val();
var option = curRow.find(".myDropDownLisTId").val();
var date = curRow.find(".datepicker").val();
var myObj = new MyClass(title, option, date);
myCollection.push(myObj);
});
return JSON.stringify(myCollection);
}
function SubmitData() {
var data = GetJsonData();
$.ajax({
url: "testForm.aspx/PostData",
data: "{ 'myCollection': " + data + " }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function () {
alert("Success");
}
});
}
$(document).ready(function () {
filldd();
CreateDP();
var rowstring = "<tr class='row'><td class='number'></td><td><input type='text' class='title'/></td><td><select class='myDropDownLisTId'/><input type='text' class='datepicker'/></td><td><input type='submit'></input></td></tr>";
$("#addField").click(function (event) {
$("#field tbody").append(rowstring);
filldd();
CreateDP();
if ($("td").hasClass("number")) {
var i = parseInt($(".num:last").text()) + 1;
$('.row').last().attr("id", "row" + i);
$($("<span class='num'> " + i + " </span>")).appendTo($(".number")).closest("td").removeClass('number');
}
event.preventDefault();
});
$("#deleteField").click(function (event) {
var lengthRow = $("#field tbody tr").length;
if (lengthRow > 1)
$("#field tbody tr:last").remove();
event.preventDefault();
});
$("#btnsave").click(function () {
SubmitData();
});
});
function filldd() {
var data = [
{ id: '0', name: 'test 0' },
{ id: '1', name: 'test 1' },
{ id: '2', name: 'test 2' },
{ id: '3', name: 'test 3' },
{ id: '4', name: 'test 4' },
];
for (i = 0; i < data.length; i++) {
$(".myDropDownLisTId").last().append(
$('<option />', {
'value': data[i].id,
'name': data[i].name,
'text': data[i].name
})
);
}
}
function CreateDP() {
$(".datepicker").last().datepicker();
}
$(document).on('click', 'input[type="submit"]', function () {
alert($(this).closest('tr')[0].sectionRowIndex);
alert($(this).closest('tr').find('.myDropDownLisTId').val());
});
</script>
</head>
<body>
<form id="frmMain" runat="server">
<table id="field">
<tbody>
<tr id="row1" class="row">
<td>
<span class='num'>1</span>
</td>
<td>
<input type="text" class="title"/>
</td>
<td>
<select class="myDropDownLisTId">
</select>
<input type="text" class="datepicker" />
</td>
<td>
<input type="submit"></input>
</td>
</tr>
</tbody>
</table>
<button type="button" id="addField">
Add Field</button>
<button type="button" id="deleteField">
Delete Field</button>
<button type="button" id="btnsave">
SAVE</button>
</form>
</body>
</html>
CodeBehind:
public partial class testForm : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static void PostData(List<MyClass> myCollection)
{
Console.WriteLine(myCollection.Count);
}
}
public class MyClass
{
string title;
public string Title
{
get { return title; }
set { title = value; }
}
string option;
public string Option
{
get { return option; }
set { option = value; }
}
string date;
public string Date
{
get { return date; }
set { date = value; }
}
}
Hope this helps
References:
Json2.js file
stringify method
define a class in js

Telerik DatePicker returns null on post

I have 2 Telerik DatePicker's that I am using to filter my model by. However the problem I am having is on the action call for the partial view, both dates are null. I used the alert that is commented out to ensure that a date is actually being registered which it is. So I believe the problem has to do with the post back function .
The View:
<script type="text/javascript">
function filterChange() {
$("#log").ajaxError(function (event, jqxhr, settings, exception) {
alert(exception);
});
var startValue = $('#filterStart').data('tDatePicker').value();
var endValue = $('#filterEnd').data('tDatePicker').value();
//alert('Index: ' + startValue + ',' + endValue);
$.get('#Url.Action("DashboardPartial")',
{ start: startValue, end: endValue
}, function (data) {
$("#target").html(data);
});
}
</script>
<div style="width: 100%; height: 100%">
<fieldset>
<legend>Filters</legend>
<div>
#using (Html.BeginForm())
{
<div class="Filter-Div">
#Html.Telerik().DatePicker().Name("filterStart").Value((DateTime)#ViewBag.StartDate).ClientEvents(events => events.OnChange("filterChange"))
</div>
<div class="Filter-Div">
#Html.Telerik().DatePicker().Name("filterEnd").Value((DateTime)#ViewBag.EndDate).ClientEvents(events => events.OnChange("filterChange")).TodayButton()
</div>
}
</div>
</fieldset>
#(Html.Telerik().ScriptRegistrar()
.DefaultGroup(group => group
.Add("telerik.common.js")
.Add("telerik.tabstrip.min.js")
.Add("telerik.calendar.min.js"))
.jQuery(false))
<div id="target">
#{ Html.RenderPartial("DashboardPartial"); }
</div>
The Controller
[OutputCache(Duration=5)]
public PartialViewResult DashboardPartial( DateTime? start, DateTime? end)
{
db = new DashboardEntities();
ViewBag.StartDate = start;
ViewBag.EndDate = end;
var job = db.Job.where(Job=>Job.startDate > start && Job.endDate < end);
return PartialView(prj);
}

Are the startValue and endValue variables in your Javascript code of type Date? If that's the case, convert them to string like this:
<script type="text/javascript">
function filterChange() {
$("#log").ajaxError(function (event, jqxhr, settings, exception) {
alert(exception);
});
var startValue = $('#filterStart').data('tDatePicker').value().toLocaleString();
var endValue = $('#filterEnd').data('tDatePicker').value().toLocaleString();
//alert('Index: ' + startValue + ',' + endValue);
$.get('#Url.Action("DashboardPartial")',
{ start: startValue, end: endValue
}, function (data) {
$("#target").html(data);
});
}
</script>
Also, in your form, remove '#' before ViewBag.StartDate and ViewBag.EndDate:
<div class="Filter-Div">
#Html.Telerik().DatePicker().Name("filterStart").Value((DateTime)ViewBag.StartDate).ClientEvents(events => events.OnChange("filterChange"))
</div>
<div class="Filter-Div">
#Html.Telerik().DatePicker().Name("filterEnd").Value((DateTime)ViewBag.EndDate).ClientEvents(events => events.OnChange("filterChange")).TodayButton()
</div>

adding and removing a query using Jquery

I want to append a query called ?zoom=1 in my url after a btnzoomprevious & btnzoomnext is clicked.
<div id=zoomview class="view" style="left:100px;<%=isZoom?"":"display:none;" %>">
<div class="side">
<a id="btncloseview" class="btnview" style="left:-100px; top:60px;">close</a>
<a id="btnzoomprevious" class="btnzoomprevious" href="<%=ResolveClientUrl("~/" + gender + "/" + category + "/" + character + "/")%><%=prevproductName%><%=Request.Url.Query%>?zoom=1" style="margin:420px 0 0 -100px; display:<%=statusprev%>"></a>
<a id="btnzoomnext" class="btnzoomnext" href="<%=ResolveClientUrl("~/" + gender + "/" + category + "/" + character + "/")%><%=nextproductName%><%=Request.Url.Query%>?zoom=1 " style="margin:420px 0px 0 810px; display:<%=statusnext%>"></a>
</div>
<%if(!isZoom) {%>
<img src="<%=productImagesPath + prevproductImageZoom %>.jpg" id="mainImage" alt="Main Image" style="height:800px; width:800px;"/>
<img src="<%=productImagesPath + nextproductImageZoom %>.jpg" id="mainImage" alt="Main Image" style="height:800px; width:800px;"/>
<%}else {%>
<img data-src="<%=productImagesPath + productImageZoom %>.jpg" id="mainImage" alt="Main Image" style="height:800px; width:800px;">
<%} %>
</div>
I can't use the method in asp, because the ?zoom=1 is appending again again. I need to remove the room once the btncloseview is clicked.

What are you trying to do? Are you just trying to append the query to the url in the window? It could be something like this:
<script type='text/javascript'>
$("#btnzoomprevious").on("click", function() {
if (window.location.href.indexOf('?zoom=1') == -1) {
window.location.href = window.location.href + '?zoom=1';
}
});
$("#btnzoomnext").on("click", function() {
if (window.location.href.indexOf('?zoom=1') == -1) {
window.location.href = window.location.href + '?zoom=1';
}
});
$("#btncloseview").on("click", function() {
if (window.location.href.indexOf('?zoom=1') != -1) {
window.location.href = window.location.href.substring(0, window.location.href.indexOf('?zoom=1'));
}
});
</script>
However, this would cause the page to reload. If you are looking for a solution where the page does not reload, you can find more information here:
http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/
The short version of the article is, you can implement the following function:
window.history.pushState("object or string", "Title", "/new-url");
So, you could do something like this:
<script type='text/javascript'>
var urlPath = '';
$("#btnzoomprevious").on("click", function() {
if (window.location.href.indexOf('?zoom=1') == -1) {
urlPath = window.location.href + '?zoom=1';
window.history.pushState("","", urlPath);
}
});
$("#btnzoomnext").on("click", function() {
if (window.location.href.indexOf('?zoom=1') == -1) {
urlPath = window.location.href + '?zoom=1';
window.history.pushState("","", urlPath);
}
});
$("#btncloseview").on("click", function() {
if (window.location.href.indexOf('?zoom=1') != -1) {
urlPath = window.location.href.substring(0, window.location.href.indexOf('?zoom=1'));
window.history.pushState("","", urlPath);
}
});
</script>
You can find David Murdoch's original post about updating a URL without reloading the page here for more info: David's Post
Good Luck!

Developing custom asp.net server control rendering scripting code

I have a server control as below:
[DefaultProperty("ContentKey")]
[ToolboxData("<{0}:ContentRating runat=server></{0}:ContentRating>")]
public class ContentRating : WebControl
{
[Bindable(true)]
[Category("Appearance")]
[DefaultValue("")]
[Localizable(true)]
public string ContentKey
{
get
{
String s = (String)ViewState["ContentKey"];
return ((s == null) ? "[" + this.ID + "]" : s);
}
set
{
ViewState["ContentKey"] = value;
}
}
protected override void RenderContents(HtmlTextWriter output)
{
StringBuilder builder = new StringBuilder(#"<div id=""divContentRating"">
<div id=""divAskForRating"">
#Question
<br />
<a id=""likeIcon""><img src=""~/Content/Images/like.jpg""/></a>
<a id=""neutralIcon""><img src=""~/Content/Images/neutral.jpg""/></a>
<a id=""unlikeIcon""><img src=""~/Content/Images/unlike.jpg""/></a>
</div>
<div id=""divPositiveRating"">
<div>
<img src=""~/Content/Images/like.jpg""/> #PositiveAnswerMessage <br />
Güncelle
</div>
</div>
<div id=""divNegativeRating"">
<div>
<img src=""~/Content/Images/unlike.jpg""/> #NegativeAnswerMessage <br />
Güncelle
</div>
</div>
<div id=""divNeutralRating"">
<div>
<img src=""~/Content/Images/neutral.jpg""/> #NeutralAnswerMessage <br />
Güncelle
</div>
</div>
<input type=""hidden"" id=""HasRated"" value=""False"">
<input type=""hidden"" id=""Rate"" value=""Rate"">
<input type=""hidden"" id=""ContentKey"" value=""#ContentKey"">
<input type=""hidden"" id=""RatingId"" value=""RatingId"">
<script type=""text/javascript"">
$(document).ready(function () {
var protocol = location.protocol;
var host = window.location.host;
if ($(""#HasRated"").val() == """"True"")
{
var rate = $(""#Rate"").val();
if (rate == 1) {
setPositiveRatedView();
}
else if (rate == 0) {
setNeutralRatedView();
}
else if (rate == -1) {
setNegativeRatedView();
}
else {
setNotRatedView();
}
}
else {
setNotRatedView();
}
$(""#likeIcon"").click(function () {
alert(""like"");
setPositiveRatedView();
ratePage(1, """");
});
$(""#neutralIcon"").click(function () {
alert(""neutral"");
setNeutralRatedView();
ratePage(0, """");
});
$(""#unlikeIcon"").click(function () {
alert(""unlike"");
setNegativeRatedView();
//mkMPopClc('NegativeRatingReason', 200, 300, 0, 0);
});
$("".updateRate"").click(function () {
setNotRatedView();
});
// $('.clsStl').click(function () {
// ratePage(-1, """");
// $('.mkMPop').fadeOut();
// });
//
// $('#ShareComment').click(function () {
// ratePage(-1, $(""#Comment"").val());
// $('.mkMPop').fadeOut();
// });
function setNotRatedView() {
$(""#divNeutralRating"").fadeOut();
$(""#divPositiveRating"").fadeOut();
$(""#divAskForRating"").fadeIn();
$(""#divNegativeRating"").fadeOut();
}
function setPositiveRatedView()
{
$(""#divNegativeRating"").fadeOut();
$(""#divNeutralRating"").fadeOut();
$(""#divAskForRating"").fadeOut();
$(""#divPositiveRating"").fadeIn();
}
function setNegativeRatedView() {
$(""#divNeutralRating"").fadeOut();
$(""#divPositiveRating"").fadeOut();
$(""#divAskForRating"").fadeOut();
$(""#divNegativeRating"").fadeIn();
}
function setNeutralRatedView() {
$(""#divNegativeRating"").fadeOut();
$(""#divPositiveRating"").fadeOut();
$(""#divAskForRating"").fadeOut();
$(""#divNeutralRating"").fadeIn();
}
function ratePage(rating, comment)
{
//alert(rating + """" """" + comment);
var contentKey = $(""#ContentKey"").val();
var hasRated = $(""#HasRated"").val();
var ratingId = $(""#RatingId"").val();
$.getJSON(protocol + '//' + host + '/tr/Rating/RatePage?contentKey=' + contentKey + '&rating=' + rating + '&ratingUpdate=' + hasRated + '&ratingId=' + ratingId + '&comment=' + comment, function (data) {
$(""#HasRated"").val(data.HasRated);
$(""#Rate"").val(data.Rate);
$(""#ContentKey"").val(data.ContentKey);
$(""#RatingId"").val(data.RatingId);
$(""#Comment"").val(data.Comment);
});
}
});
</script>
</div>");
builder.Replace("#ContentKey", this.ContentKey);
output.Write(builder);
}
}
When I add my control to my web page, I see that control is rendering as I am expecting but the jquery scripts doesn't work. Is it wrong to keep scripting code in a server control? What can I do to solve this problem?

if ($(""#HasRated"").val() == """"True"")
I think you have too many quote characters there...