locked
convert user control to custom control RRS feed

  • Question

  • User846785443 posted

     Hello All,

     

    I created a user control with 3 images button on it  they appear as one clicked and other appear and hide other.  Only one stay visible at a time.

    Now I have to convert it to a custom control what could be the best way to convert it to custom control. 

    thanks

    Friday, March 6, 2009 12:13 AM

Answers

  • User-2106054853 posted

    I've done it. You can download the solution from:

    http://cid-2fa13ebc6cc8e80f.skydrive.live.com/self.aspx/Public/WebApplication5.zip

    Tips:

    1. We need to embed the image into the assembly. To do so, please set the image's build action to "embed resource" and add following code in AssemblyInfo.cs:

    [assembly: System.Web.UI.WebResource("TriCheckBox.images.checkboxchecked.jpg", "img/jpg")]

    2. Use Page.ClientScript.GetWebResourceUrl to get the resource url.

    3. Pay attention to in which phase to dynamically add controls. In general it's done in Init.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 11, 2009 1:52 AM
  • User-2106054853 posted

    1)  lets say if i don't want to change any of the image and use as it is. So all i need to do is get the dll and placed that into the bin folder of the application i need to work with it?

    Yes the images have been embed into the assembly. If you want to use this control just add this assembly as the reference of the project.

    2) If i want to change the images which i really have to do.   should I replace the images with the same name in the images  folder?  I am sorry I did not understand this part as you said in your tips. 

    If you want to change the images you can replace the images in the class library project. Then rebuild the project to generate a new assembly. If the image name is also changed please don't forget to change AssemblyInfo.cs.

    3) And this is the most important one. What would be the steps if i had to do the whole thing as if am doing from the scratch.? . 

    My project is built via Visual Studio 2008 SP1. I think you're using a previous edition so cannot run it directly. Anyway you can try following steps:

    1. Create a class library project.

    2. Add the images folder to the project.

    3. Make sure the build actions of all these images are set as "Embeded Resource". You can find build action in the properies window after selecting an image.

    4. Edit AssemblyInfo.cs to add the following code.

    [assembly: System.Web.UI.WebResource("TriCheckBox.images.checkboxchecked.jpg", "img/jpg")] [assembly: System.Web.UI.WebResource("TriCheckBox.images.checkboxNone.jpg", "img/jpg")]

    [assembly: System.Web.UI.WebResource("TriCheckBox.images.checkboxUnchecked.jpg", "img/jpg")]

    5. Add a new class file to your project, copy and paste the code in my Class1.cs to that file.

    6. Build this project and use the custom control in your web application.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 12, 2009 4:54 AM
  • User846785443 posted

     Hello Alan

     

    I tried it today  and the application is working fine since I ran it on the 2008. 

    But I tried to created it from the scratch on the VS2005. 

    1)I open and created a new  WebControl project. I let it be the same name as as the one was attached.

    2)Copy the image folder with the images. 

    3)And in the class paste the code. 

    4) then  Debug ->build. I got the error for the update panel. "Error "  The type or namespace name 'UpdatePanel' could not be found (are you missing a using directive or an assembly "
    so I commented out the whereever i get the update panel error and typed this.

     this.mypanel.Controls.Add(this.imgchecked);
      this.mypanel.Controls.Add(this.imgNotknown);
       this.mypanel.Controls.Add(this.imgchecked);

     

    Then I build the applicaiton this time it did not give any error.

     

    Then,

    1)I open the new web application
    2) click on References browse to the bin folder of the webcontrol application  and click on the TriCheckBox.dll.
    3) once it was appeared in my References list i added it in the toolbox.
    4) now when i droped it on the page, it is appear to be a panel control. 

    I redo it to check if I made a mistake but 3 times it came out the same. 

    what you think where am I making the mistake?

    Also lets say even if it is working fine which is nto right now. I referenced it once as I click on the Refrences and then browse to the bin folder of the TriCheckBox.dll to add this. Is it sufficent? 

    Thanks for your great help. 

     


     

     

     

     

     

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 12, 2009 6:25 PM
  • User-2106054853 posted

    1)I open the new web application
    2) click on References browse to the bin folder of the webcontrol application  and click on the TriCheckBox.dll.
    3) once it was appeared in my References list i added it in the toolbox.
    4) now when i droped it on the page, it is appear to be a panel control. 

    I redo it to check if I made a mistake but 3 times it came out the same. 

    Not sure why it behaves like that. If you don't use the Toolbox and write code in aspx directly can it work?

    Also lets say even if it is working fine which is nto right now. I referenced it once as I click on the Refrences and then browse to the bin folder of the TriCheckBox.dll to add this. Is it sufficent? 

    Yes after adding the reference you can use the custom control in your project.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 12, 2009 9:34 PM
  • User-2106054853 posted

    Do you mean in the Design View the custom control looks like a Panel? If so it's an expected behavior. If you want to custom the appearance of the custom control in the Design View you should write a designer for it. Please check out:

    Walkthrough: Creating a Basic Control Designer for a Web Server Control 

    http://msdn.microsoft.com/en-us/library/12yydcke.aspx<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p>
    http://msdn.microsoft.com/en-us/library/sey0f414.aspx<o:p></o:p>

    If you still have question you can start a new thread talking about design time support since it's not related to this thread.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 13, 2009 4:51 AM

All replies

  • User1424737355 posted

    Create a new Custom Control and inherit it from this User Control.

    Friday, March 6, 2009 3:06 AM
  • User846785443 posted
    can you give me the guide lines to how to do that.
    Friday, March 6, 2009 3:53 PM
  • User-2106054853 posted

    Hi,

    You can create a custom control deriving from Panel and add controls (previously defined in ascx) in OnInit (for the most cases) one by one. You can paste here a simple UserControl and I'll write the custom control for you.

    Sunday, March 8, 2009 10:48 PM
  • User846785443 posted

    HI Allen, 

    Here I am placing the code as you asked me to do so. I have past the user control code behind and source code. Also the explanation that what I am trying to achieve. 

    After creating this user control i worked with it and it gives me the result but it is not custom control. 

    Thanks for your help 

     

    I need a checkbox with 3 values instead of  check, and uncheck i need a third value as none. For that 

    I created 3 images  which are the images of  uncheck checkbox, checked checkbox and  thried one which would be as not none  with a green square in the middle.  only a single image can be appeared at a time. 

    So when you load the page at first you will see a checkbox which would be not known  (the image with the green square in middle).and set the checkvalue = null;

    Now when you click this button it become visible= false and make the the checkbox appear which is not selected ( and this is again another image with the image unchecked checkbox and it set the property of the checkValue =0.  

    if you click now this checkbox it will become visible=false; and checkbox with the checked mark (the image button with the checkbox and set the property of the checkValue=1) 

    so when you work with it. It will be just like checkbox.

    I placed it in the ajax update panel so the whole page does not need to update.  but when i really need to get it work on the real page and if i get a problem i would get rid of it. but so far i didn't get a problem. 

     

    This is how it is working and the property i need is to read the value in the aspx page so i can work with the value or send it to the database to be save in the table. 

     

    //user control

     

     

     

    <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
        Namespace="System.Web.UI" TagPrefix="asp" %>
    <div style="height:16px; width:16px">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
    <asp:ImageButton ID="imgchecked" runat="server" ImageUrl="~/images/checkboxchecked.bmp" OnClick="imgchecked_Click" Visible="False" ImageAlign="Top" /><asp:ImageButton ID="imgNotknown" runat="server" ImageUrl="~/images/checkboxNone.bmp" OnClick="imgNotknown_Click" Visible="False" ImageAlign="Top" /><asp:ImageButton
        ID="imgUnchecked" runat="server" ImageUrl="~/images/checkboxUnchecked.bmp" OnClick="imgUnchecked_Click1" ImageAlign="Top" />
        </ContentTemplate>
    </asp:UpdatePanel></div>

     

    -------------

    code behined----

     

    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;

    namespace Testchckbox.inc  // need to change this.
    {
        public partial class TriCheckBox : System.Web.UI.UserControl
        {
           

                 private string chValue;

            public string CheckValue
            {
                set
                {
                  
                   
                    chValue = value;

                    if(chValue != null)
                    ViewState["cb"] = chValue;

                }

                get
                {

                    if (ViewState["cb"] != null)
                        return ViewState["cb"].ToString();
                    else
                        return chValue;
                }

            }
           

       //////////     
          


            protected void Page_Load(object sender, EventArgs e)
            {
              
               
                    if (!IsPostBack)
                    {
                        // had to make a control visible to work with the control on design time.
                        imgUnchecked.Visible = false;


                        if (CheckValue == null)
                        {
                            imgNotknown.Visible = true;

                        }
                        else
                        {

                            if (CheckValue.Equals("0"))//=="0")
                            {
                                imgUnchecked.Visible = true;

                            }

                            if (CheckValue.Equals("1"))// == "1")
                            {
                                imgchecked.Visible = true;

                            }
                        }

                        //if (CheckValue.Equals("1"))// == null)
                        //    imgNotknown.Visible = true;
                    }



            }

            protected void imgUnchecked_Click1(object sender, ImageClickEventArgs e)
            {
              
                imgNotknown.Visible = false;
                imgUnchecked.Visible = false;
                imgchecked.Visible = true;
                ViewState["cb"] = "1";
                CheckValue = ViewState["cb"].ToString();
            }

            protected void imgchecked_Click(object sender, ImageClickEventArgs e)
            {
                imgUnchecked.Visible = false;
                imgchecked.Visible = false;
                imgNotknown.Visible = true;
                ViewState["cb"] = null;
                CheckValue = null;
              
            }

            protected void imgNotknown_Click(object sender, ImageClickEventArgs e)
            {
                imgNotknown.Visible = false;
                imgchecked.Visible = false;
                imgUnchecked.Visible = true;
                ViewState["cb"] = "0";
                CheckValue = "0";
           

            }

       
        }


          
    /// in code behind of the aspx page where I have this page,  i created a bool? and make it nllable and set it null.


        public partial class TestCheckBox : System.Web.UI.Page
        {
            bool? checkboxValue =null;
        
           
           
            protected void Page_Load(object sender, EventArgs e)
            {
               
               
               
               
                if (!Page.IsPostBack)
                {
                    TriCheckBox1.CheckValue = "1";  // now i save it as 1 it could be null, 1 or 0 . Passing the property of checkVlaue in user control
                }
              
               
            }

             

            protected void Button1_Click1(object sender, EventArgs e)
            {

                if (TriCheckBox1.CheckValue == null)
                {
                    checkboxValue = null;
                }

                else
                {
                    if (TriCheckBox1.CheckValue.Equals("1"))
                        checkboxValue = true;//
                    if (TriCheckBox1.CheckValue.Equals("0"))
                        checkboxValue = false;
                }

               
             Label1.Text = checkboxValue.ToString();

            }

       
         
               
               
           
        }
    }
        

     

     

    Tuesday, March 10, 2009 10:22 PM
  • User-2106054853 posted

    I've done it. You can download the solution from:

    http://cid-2fa13ebc6cc8e80f.skydrive.live.com/self.aspx/Public/WebApplication5.zip

    Tips:

    1. We need to embed the image into the assembly. To do so, please set the image's build action to "embed resource" and add following code in AssemblyInfo.cs:

    [assembly: System.Web.UI.WebResource("TriCheckBox.images.checkboxchecked.jpg", "img/jpg")]

    2. Use Page.ClientScript.GetWebResourceUrl to get the resource url.

    3. Pay attention to in which phase to dynamically add controls. In general it's done in Init.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 11, 2009 1:52 AM
  • User846785443 posted

     Thank you Allen,

    I am greatfull to you for your help. I have downloaded the file and looking at it. but right now I won't be able to test it. But looking at it I have few question just so I can understand. 

    1)  lets say if i don't want to change any of the image and use as it is. So all i need to do is get the dll and placed that into the bin folder of the application i need to work with it?

    2) If i want to change the images which i really have to do.   should I replace the images with the same name in the images  folder?  I am sorry I did not understand this part as you said in your tips. 

    3) And this is the most important one. What would be the steps if i had to do the whole thing as if am doing from the scratch.? . 

    thanks you very much. I hope i am not giving you troulbe. 

    Thursday, March 12, 2009 3:08 AM
  • User-2106054853 posted

    1)  lets say if i don't want to change any of the image and use as it is. So all i need to do is get the dll and placed that into the bin folder of the application i need to work with it?

    Yes the images have been embed into the assembly. If you want to use this control just add this assembly as the reference of the project.

    2) If i want to change the images which i really have to do.   should I replace the images with the same name in the images  folder?  I am sorry I did not understand this part as you said in your tips. 

    If you want to change the images you can replace the images in the class library project. Then rebuild the project to generate a new assembly. If the image name is also changed please don't forget to change AssemblyInfo.cs.

    3) And this is the most important one. What would be the steps if i had to do the whole thing as if am doing from the scratch.? . 

    My project is built via Visual Studio 2008 SP1. I think you're using a previous edition so cannot run it directly. Anyway you can try following steps:

    1. Create a class library project.

    2. Add the images folder to the project.

    3. Make sure the build actions of all these images are set as "Embeded Resource". You can find build action in the properies window after selecting an image.

    4. Edit AssemblyInfo.cs to add the following code.

    [assembly: System.Web.UI.WebResource("TriCheckBox.images.checkboxchecked.jpg", "img/jpg")] [assembly: System.Web.UI.WebResource("TriCheckBox.images.checkboxNone.jpg", "img/jpg")]

    [assembly: System.Web.UI.WebResource("TriCheckBox.images.checkboxUnchecked.jpg", "img/jpg")]

    5. Add a new class file to your project, copy and paste the code in my Class1.cs to that file.

    6. Build this project and use the custom control in your web application.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 12, 2009 4:54 AM
  • User846785443 posted

     Hello Alan

     

    I tried it today  and the application is working fine since I ran it on the 2008. 

    But I tried to created it from the scratch on the VS2005. 

    1)I open and created a new  WebControl project. I let it be the same name as as the one was attached.

    2)Copy the image folder with the images. 

    3)And in the class paste the code. 

    4) then  Debug ->build. I got the error for the update panel. "Error "  The type or namespace name 'UpdatePanel' could not be found (are you missing a using directive or an assembly "
    so I commented out the whereever i get the update panel error and typed this.

     this.mypanel.Controls.Add(this.imgchecked);
      this.mypanel.Controls.Add(this.imgNotknown);
       this.mypanel.Controls.Add(this.imgchecked);

     

    Then I build the applicaiton this time it did not give any error.

     

    Then,

    1)I open the new web application
    2) click on References browse to the bin folder of the webcontrol application  and click on the TriCheckBox.dll.
    3) once it was appeared in my References list i added it in the toolbox.
    4) now when i droped it on the page, it is appear to be a panel control. 

    I redo it to check if I made a mistake but 3 times it came out the same. 

    what you think where am I making the mistake?

    Also lets say even if it is working fine which is nto right now. I referenced it once as I click on the Refrences and then browse to the bin folder of the TriCheckBox.dll to add this. Is it sufficent? 

    Thanks for your great help. 

     


     

     

     

     

     

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 12, 2009 6:25 PM
  • User-2106054853 posted

    1)I open the new web application
    2) click on References browse to the bin folder of the webcontrol application  and click on the TriCheckBox.dll.
    3) once it was appeared in my References list i added it in the toolbox.
    4) now when i droped it on the page, it is appear to be a panel control. 

    I redo it to check if I made a mistake but 3 times it came out the same. 

    Not sure why it behaves like that. If you don't use the Toolbox and write code in aspx directly can it work?

    Also lets say even if it is working fine which is nto right now. I referenced it once as I click on the Refrences and then browse to the bin folder of the TriCheckBox.dll to add this. Is it sufficent? 

    Yes after adding the reference you can use the custom control in your project.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 12, 2009 9:34 PM
  • User846785443 posted

     http://cid-4aef473ad5752841.skydrive.live.com/browse.aspx/ASP.net?uc=1&nl=1

    Hi Allan 

    I have tried again and looked at it more carefully. Again all I am getting is just a panel.

    As I said earlier that I replaced the codes of  updatePanel to Panel control.  And changed the images while their names stays the same. Also mine is on VS2005.  And i changed the update panel to panel control because i was getting error.  as i wrote in my previous post.

    I have attached the zip folder in the skydrive. If you like you can check that their.   

    Thanks Allan 

     

    Thursday, March 12, 2009 11:31 PM
  • User-2106054853 posted

    Do you mean in the Design View the custom control looks like a Panel? If so it's an expected behavior. If you want to custom the appearance of the custom control in the Design View you should write a designer for it. Please check out:

    Walkthrough: Creating a Basic Control Designer for a Web Server Control 

    http://msdn.microsoft.com/en-us/library/12yydcke.aspx<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p>
    http://msdn.microsoft.com/en-us/library/sey0f414.aspx<o:p></o:p>

    If you still have question you can start a new thread talking about design time support since it's not related to this thread.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 13, 2009 4:51 AM
  • User846785443 posted

     Allan thank you for your help on solving this issue and guidence. As you said thiis is expected behaviur so it is fine. Just i need to make some chnages in the code that i posted originally. But as much as it goes to create a custom control is perfect.

    Thanks

    Tuesday, March 17, 2009 11:03 PM
  • User1489758560 posted

    Hi Allen chen,

    I am also in need of this requirement. can you please give me this smaple application for VS2005 please. Because you have developed in VS2008. So i am not able to use this application. kindly give me this  sample application for VS2005 please

    Thursday, June 18, 2009 12:33 AM