How can I update a textbox or label (specfically an asp.net control) text property from the code in the silverlight control?
Suggested solution:
I suppose that you could try to do it in two steps:
write a javascript function that updates a control based on a given parameter, let's name it updateControl:
<script type="text/javascript">
function updateControl(newValue)
{
//update your control here with newValue parameter with javascript
...
}
</script>
in your Silverlight application (in the place you want to invoke the control value change) you should write:
HtmlPage.Window.Invoke("updateControl", "this is a new value")
Another solution for page update only:
If you just need to refresh the page to get the value from other place, you can write in your Silverlight code:
HtmlPage.Document.Submit()
In the postback, you could get this data and show it in the control.
References and useful resources:
ScriptObject.Invoke Method : http://msdn.microsoft.com/en-us/library/system.windows.browser.scriptobject.invoke%28v=vs.95%29.aspx
Walkthrough: Calling JavaScript from Managed Code: http://msdn.microsoft.com/en-us/library/cc221359%28v=vs.95%29.aspx
Silverlight and JavaScript interop basics: http://pietschsoft.com/post/2008/06/Silverlight-and-JavaScript-Interop-Basics.aspx
How to set the value of a form element using Javascript: http://www.javascript-coder.com/javascript-form/javascript-form-value.phtml
You can do it calling javascript function from silverligt.
Shortly it looks like this:
HtmlPage.Window.Invoke("globalJSMethod", stringParam);
Note that javascript method must be accessable from window - window.globalJSMethod(...)
Check this walkthrough to see in details how to do this.
Related
I have textbox named 'txtExploitDate' in update panel. And on button click I have set default value for textbox as yesterday's date. I have written below jquery code to bind datepicker with textbox. But when I select date from datepicker it is refleting date in textbox just for second and again changing to default date.
<script type="text/javascript">
//$(document).ready(function DatePickerExploitDate() {
// $(function () {
// $("#txtExploitDate").datepicker();
// });
//});
$(document).ready(function () {
ApplyDatePicker();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(ApplyDatePicker);
});
function ApplyDatePicker() {
$('#txtExploitDate').datepicker();
}
</script>
Please ignore the commented code as I was using it earlier when my textbox was not in update panel but there was postback issue that time so I put my textbox in update panel and changed my jquery code.
Please Help me with this.
That is because JQuery datepicker uses unique IDs for all controls that use the plugin. This is something done by most JQuery plugins to control events. When the update panel refreshes those special unique IDs don't point anywhere anymore.
Check the explanation and solution in this article from asp snippets: https://www.aspsnippets.com/Articles/jQuery-DatePicker-not-working-inside-ASPNet-AJAX-UpdatePanel-Partial-PostBack.aspx
Resolution is made possible by having the plugin rerun when update panel refreshes.
As a personal point of view I believe you should try to see a solution without update panel as it is a very cumbersome technology, is to break when you start to mess with the DOM and there is better ways to use AJAX calls, even with JQuery.
Here is the context:
I am building a .aspx page that allows the user to administrate some xml documents we have on our server. The page content is loaded using AJAX, so buttons and forms are dynamically added to the document.
If I had static buttons that I was creating within the .aspx page before it loads on the client's machine, I could attach an event to it very easily. However, I'm dynamically adding and removing buttons and forms on the fly, using jQuery.
Here is a simplified example:
In the following jsFiddle, I'm pretending that the html document contains the following script:
<script language="C#" type="text/C#" runat="server">
void SaveAllChanges(Object sender, EventArgs e)
{
Button clickedButton = (Button)sender;
clickedButton.Text = "foobar";
}
</script>
And that I have a javascript file that contains the following:
$('button.buttonGenerator').click(function() {
$('.buttonContainer').append(
'<button onclick="SaveAllChanges">' +
'Save All Changes!' +
'</button>'
);
});
Obviously the buttons I am creating can not run the function SaveAllChanges with the way it is now. I added the onclick attribute to show what I needed to happen, in a pseudo-code kind of style.
How can I make it so that dynamically added buttons can run the C# method I have defined within the script tag at the top of the document?
Here is the jsfiddle: http://jsfiddle.net/2XwRJ/
Thanks.
You can give all buttons that must save changes a common class (e.g. class="ajaxButton") and have one jQuery method that responds to click events on elements matching that class (use live so that updates to the DOM are reflected).
$("button.ajaxButton").live("click", function(){
// Perform your Ajax callback to run server-side code
});
What you need to do is use something like ..
$(document).ready(function() {
$('button.buttonGenerator').click(function() {
$('.buttonContainer').append(
'<button id="#dynamicCommentButton" onclick="SaveAllChanges">' +
'Save All Changes!' +
'</button>'
);
});
$(document).on('click', '#dynamicCommentButton', function() {
alert($(this).attr('id'));
});
});
You are not going to be able to add the buttons like you have it there as this code here is just adding it as an HTML DOM element and the onclick attribute will be the on the client element. As a result clicking the button will try fire a SaveAllChanges javascript function
$('.buttonContainer').append(
'<button onclick="SaveAllChanges">' +
'Save All Changes!' +
'</button>'
);
What would be best would be to create that SaveAllChanges function in javascript and then you can handle it from there. Two of the ways I see you being able to do this are:
Have a http endpoint setup (script service, web api or just posting to a page) that you call using Ajax from your javascript. You can then pass through any needed arguments.
You could have a hidden element and hidden button on the page so that when the javascript is called it populates any arguments you need and then clicks the hidden button and posts the page back.
Personally I would choose the first approach from a user experience stand point as the page will not be posting back each time. I have used something similar to the second approach and it works fine but just feels very clunky.
I have a custom server control which renders some HTML on the aspx page it is added.
protected override void RenderContents(HtmlTextWriter output)
{
Text = GetHTMLContent();
output.Write(Text);
}
the GetHTMLContent() retuns some HTML, say
<div id="panel" onMouseOver="hide"><table><tr><td>Something Here</td></tr></table></div>
And I have a javascript file which is an embeded resource in this server control. This javascript file contains a function, say
function hide(){
document.getElementById("panel").visible = false;
}
I add the custom control in an aspx page like this
<cc1:CControl ID="Div" runat="server"></cc1:CControl>
now when I open in browser, the HTML contents are rendered fine, but javascript needs to be working.
My question is how can we make the function, which is in javascript file embeded in custom control, work on a aspx page where the custom control will be loaded?
Thanks
There are several ways. First can be to have an OnClientHide="hide" property, where this property defines the name of a method to call as a callback. Your control can pass this to the onmouseover client event handler during rendering.
Or: have your control write javascript to the browser, like this: http://msdn.microsoft.com/en-us/library/z9h4dk8y.aspx
EDIT
Also check out this example: http://www.karpach.com/Custom-ASP-NET-server-control-with-embedded-resources.htm
Besides what Brian Mains said, you javascript to hide is incorrect. It should be:
function hide()
{
document.getElementById("panel").style.display = "none";
OR
document.getElementById("panel").style.visibility = "hidden";
}
I am developing asp.net web application, I have a repeater that call a registered user control, I have in the user control a button that I want to call a javascript function that make Ajax call to do some action on server. this button doesn't call the javascript method, I don't know why? and when I view source I found the javascript function is repeated for every item in the repeater, how to eliminate this repetition specially that I read server items inside the function, and why the function is not called?
Thanks a lot!
sercontrol.ascx
<div id="divBtnEvent" runat="server">
<input type="button" id="btnAddEvent" class="ok-green" onclick="saveEvent();" />
</div>
<script type="text/javascript">
function saveEvent()
{
var eventText = document.getElementById('<%=txtEventDescription.ClientID%>').value;
// make ajax call
}
Problem 1: In view source I found the javascript function is repeated for every item in the repeater.
Solution:
Put your js function on the page on which the user control is being called. You also have to place your js files references on your page not on user control.
Problem 2: You are trying to get control's value as <%=txtEventDescription.ClientID%>.
And I think, this control is on user control.
Solution: Please check your page source code and see that the control's actual clientid is.
If still have issues in calling js function, check firefox's Error consol.
Hope this help.
OP said and when I view source I found the javascript function is repeated for every item in the repeater
to get rid of it put ur javascript as follows
<head runat="server">
//heres goes ur js
</head>
I guess that's ur problem
Replace the saveEvent function definition from user control onto the page where the control is used. All the way as I understand, you have use in this function textbox id from that page.
Actually, if you have place javascript block in user control's markup it will be rendered along with the rest control's markup. To avoid this you may register javascript from the server code and check is that code block is already registered.
By the way, as it is - only the last function definition being taked into attention as it redefined the previous one each time new control instance rendered.
So I was told the following would not be possible:
I have a aspx page that has a number of dropdowns. Each dropdown is set with either a class=leftcolumn or class=rightcolumn.
I need to assign an attribute:
propertyID.Attributes["nameOfAttribute"] = "false";
But instead of manually writing out each controlID and setting its attribute with the line above, I had hoped there was a way to go through and set the attribute on each control ID if it had class=leftcolumn.
This is something I know is possible to do through JQuery easily, but I need it on the code behind during load.
Thanks,
I'm not familiar enough with JQuery to write a sample of it, but you could always register a startup script in your code behind to execute when the page loads.
string myJQueryString = ; //some jquery script to set your variables
this.ClientScript.RegisterStartupScript(typeof(MyPage), "key", myJQueryString);
As Steve said you can do it easily with JQuery javascript library
first your should add a refrence of this library to you aspx pages then
$("select[class=leftcolumn]").each(function(index, value) {
// You are selecting all of the dropdowns with the class attribute equal to (leftcolumn)
$(value).attr("yourCustomAttribute") = someValue;
});
I guess I didn't specify clearly in my question so I am answering my own so I can ask again in a completely new thread - but I want to do this in C# in the code behind, not using JQuery.