Showing posts with label example. Show all posts
Showing posts with label example. Show all posts

Wednesday, March 21, 2012

Use "Hello World Using Client Script" in UserControl

Hi

I want to create a asp.net user control for dynamic date entering, and I'm trying to use the same approach as in the example:

 <form runat="server">
<div>
Search for
<input id="SearchKey" type="text" />
<input id="SearchButton" type="button"
value="Search"
onclick="DoSearch()" />
</div>
</form>
<hr style="width: 300px" />
<div>
<span id="Results"></span>
</div>
<script type="text/javascript"
function DoSearch()
{
var SrchElem = document.getElementById("SearchKey");
Samples.AspNet.HelloWorldService.HelloWorld(SrchElem.value,
OnRequestComplete);
}

function OnRequestComplete(result)
{
var RsltElem = document.getElementById("Results");
RsltElem.innerHTML = result;
}

</script>

The problem is if I use <input id=SearchKey> -tag for the result, then there will be problems if I use the same control multiple times on one page (the id is not unique, and the OnRequestComplete will update every <input>-tag with id=SearchKey). If I change it to <input id=SearchKey runat=server>, asp will render unique id's for the <input>, but then .getElementById() does not find "object".

I have done a "workaround" where I passes the object's Id to the Webservice, and returns it in an array together with the result, but I don't think this is "a great way". Is there any other solution? A better one?

function DoSearch(CallerId)
{
var SrchElem = document.getElementById(CallerId);
Samples.AspNet.HelloWorldService.HelloWorld(this.id, SrchElem.value,
OnRequestComplete);
}

function OnRequestComplete(result)
{

var objectId = result[0].toString();
var WebServiceResult = result[1].toString();
var RsltElem = document.getElementById(objectId);
RsltElem.innerHTML = result;
}

Regards

Lars K.

This is a common problem... if you use ASP.NET server IDs you need to reference the client ID in client script:

var Ctl = $('<%= SearchKey.ClientID %>');

will do the trick in finding the control reliably.

You also need to use this if use MasterPages or any contained control, so as a general rule this is the best way to reference server based page variables.

+++ Rick --

Use Ajax controls within web control

Is there any example that show how to write a custom web control (one that doesn't have aspx) and use Ajax controls ?

I have a user control consisting of a panel the modalpopupextender. I have a copy of the aspx and .cs file in all the sites. I want to turn it into a control so I can re-use it. How can I achive it?

Hi Thanhhuynh,

Basically, you can drag it into your customer control without doing any other special settings. Ajax Control Toolkits work depend on ScriptManager or ToolkitScriptManager. Please make sure that the ScriptManager should be located before the extender and inside a page there should be only one ScriptManager. To create customer control , here are two samples(sample1 andsample2).

I hope this help.

Best regards,

Jonathan


Thanks for answering.

Basically there are two type of controls I can create: web control and web user control. The former contains only code. There's no UI designer support where you can drag and drop different controls into it. You can to override the RenderXX() methods to create the look. The web user control has the UI part and the code behind and you can design right on the screen. But web user can only be used within the same web site. You have to copy the aspx and code-hind files to another web site source tree in order to re-use it.

So my question was let's say I create a new control, without VS UI designer how can I use the AJAX extender ?

Thanks


I believe the answer you are looking for is in this blog post by David Ebbo:http://blogs.msdn.com/davidebb/archive/2005/10/30/487160.aspx

Good luck,

Hanan Schwartzberg
---------------
http://www.lionsden.co.il