Loading UC in clientside on tab selected using webservice

1 posts, 0 answers
  1. Karthi Keyan
    Karthi Keyan avatar
    17 posts
    Member since:
    Oct 2009

    Posted 23 Dec 2009 Link to this post

    HI,
             Here is my sample code.
    this is my ascx code,

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Addition.ascx.cs" Inherits="Addition" %>
    <head>

        <script language="javascript">

            function test() {

                alert('hi');

            }

        </script>

    </head>
    <table>
        <tr>
            <td>
                Enter Value1:
            </td>
            <td>
                <input id="txt1" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                Enter Value2:
            </td>
            <td>
                <input id="txt2" type="text" />
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input type="button" id="btnAdd" value="ADD" onclick="addition1()" />
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input id="txtResult" type="text" disabled="disabled" />
            </td>
        </tr>
    </table>


    and my aspx page is here

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5"  EnableViewState="true"  %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
       
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
       
            <script type="text/javascript">

                function onTabSelected(sender, args)
                 {
                    var controlLocation = args.get_tab().get_text();
                    ScriptService.GetControlHtml(controlLocation, SucceededCallback, onFailedWS);
                }

                function onFailedWS(error) {
                    alert(error.get_message());
                }

                function SucceededCallback(result) {

                    var multiPage = $find("<%=RadMultiPage1.ClientID %>");

                    multiPage.trackChanges();
                    var pageView = new Telerik.Web.UI.RadPageView();
                    multiPage.get_pageViews().add(pageView);
                    pageView.get_element().innerHTML = result;
                    multiPage.commitChanges();

                }

                function onTabSelecting(sender, args) {
                    if (args.get_tab().get_pageViewID()) {
                        args.get_tab().set_postBack(false);
                    }
                }
                function showPageView(sender, eventArgs) {
                    var item = eventArgs.get_item();
                  
                    var itemvalue = item.get_value();
                    if (itemvalue == 0) {
                        var tabStrip = $find("<%= RadTabStrip1.ClientID %>");

                        tabStrip.trackChanges();
                        var tab = new Telerik.Web.UI.RadTab();
                        tabStrip.get_tabs().add(tab);
                        tab.set_text("Addition");
                        tabStrip.commitChanges();
                    }
                    else {
                        var tabStrip = $find("<%= RadTabStrip1.ClientID %>");

                        tabStrip.trackChanges();
                        var tab = new Telerik.Web.UI.RadTab();
                        tabStrip.get_tabs().add(tab);
                        tab.set_text("Multiplication");
                        tabStrip.commitChanges();

                    }

                    return false;

                }
            </script>

        </telerik:RadCodeBlock>
        <style type="text/css">
            body
            {
                width: 95%;
                padding-left: 20px;
                font-family: Arial;
                font-size: 10pt;
                padding-right: 20px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="ScriptManager" runat="server">
            <Services>
                <asp:ServiceReference Path="~/ScriptService.asmx" />
            </Services>
        </telerik:RadScriptManager>
        <div>
            <telerik:RadMenu ID="RadMenu1" runat="server" Flow="Vertical" Skin="Forest"
                OnClientItemClicked="showPageView">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="UserControl 1" Value="0">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="UserControl 2" Value="1">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
            <br />
            <telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1"
                OnClientTabSelected="onTabSelected" OnClientTabSelecting="onTabSelecting" SelectedIndex="1"
                Skin="Black">
            </telerik:RadTabStrip>
            <telerik:RadMultiPage runat="server" ID="RadMultiPage1">
            </telerik:RadMultiPage>
        </div>
        </form>
    </body>
    </html>


    and this is my webservice

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.Web.Script.Services.ScriptService()]
    public class ScriptService : System.Web.Services.WebService
    {

        public ScriptService()
        {
            //Uncomment the following line if using designed components
            //InitializeComponent();
        }

        /// <summary>
        /// Get User Control Html
        /// use EnableSession=true if you are using session variables
        /// </summary>
        /// <returns>Html Table</returns>
        [WebMethod(EnableSession = true)]
        public string GetControlHtml(string controlLocation)
        {
            // Create instance of the page control
            Page page = new Page();

            // Create instance of the user control
            UserControl userControl = (UserControl)page.LoadControl(controlLocation);

            //Disabled ViewState- If required
            //userControl.EnableViewState = false;
           
            //Form control is mandatory on page control to process User Controls
            HtmlForm form = new HtmlForm();

            //Add user control to the form
            form.Controls.Add(userControl);
           
            //Add form to the page
            page.Controls.Add(form);

            //Write the control Html to text writer
            StringWriter textWriter = new StringWriter();

            //execute page on server
            HttpContext.Current.Server.Execute(page, textWriter, false);
           
            // Clean up code and return html
            return CleanHtml(textWriter.ToString());
        }

        /// <summary>
        /// Removes Form tags using Regular Expression
        /// </summary>
        private string CleanHtml(string html)
        {
            return Regex.Replace(html, @"<[/]?(form)[^>]*?>", "", RegexOptions.IgnoreCase);
        }

    }

    All that i want to know now is i want to call the onclick event which is in my ascx page.
    its retuning a runtime error as object expected.
    kindly help me to fix this issue

Back to Top