• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 354
  • Last Modified:

ASP.Net ASCX Issue: Visual Studiio 2010

I am trying to implement the attached simple code in ascx control, but seems like the files are not getting included when I am doing it in ascx.. though its working just fine when I use aspx.

Can someone please help?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<!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>

    	<link type="text/css" href="Styles/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="Scripts/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript">
		    $(function () {
		        $('#datepicker1').datepicker({
		            inline: true
		        });
		    });
		</script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:TextBox ID="datepicker1" runat="server"></asp:TextBox>
    
    </div>
    </form>
</body>
</html>

Open in new window

jquery-ui-1.8.16.custom.zip
0
Aanvik
Asked:
Aanvik
  • 5
  • 3
  • 2
  • +1
1 Solution
 
AanvikAuthor Commented:
I've already googled and explored different solutions here, so if you can make it work that would be great. It's just a simple 1 page test code I need working in ascx.
0
 
guru_samiCommented:
You mean the css / jquery references are not loaded?
Are you referencing it correctly when using it with UC?
can you share sample that is not working?

Did you try using CDN?
0
 
Kiran SonawaneProject LeadCommented:
Follow following steps
1) Remove below code from your test.aspx
  a) <asp:TextBox ID="datepicker1" runat="server" CssClass="jdatapicker"></asp:TextBox>
  b)
  <script type="text/javascript">
                $(function () {
                    $('#datepicker1').datepicker({
                        inline: true
                    });
                });
            </script>
2) create user control
3) Include below code in user control

<asp:TextBox ID="datepicker1" runat="server" CssClass="jdatapicker"></asp:TextBox>
<script type="text/javascript">
                $(function () {
                    $('.jdatapicker').datepicker({
                        inline: true
                    });
                });
            </script>
4) Add user control to your aspx page (you can use drag drop - Drop usecontrol in design view of test.aspx )
5) Done!!!
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
AanvikAuthor Commented:
Hi sonawanekiran:

Have you tried that solution... and how about the reference of css and js file.. where should I  put them?
0
 
Kiran SonawaneProject LeadCommented:
Keep your test.aspx as it it. Just remove textbox control and which I earlier mentioned.
0
 
Kiran SonawaneProject LeadCommented:
* and  script which I mentioned earlier
0
 
Kiran SonawaneProject LeadCommented:
Do not forget to add the class to textbox
 CssClass="jdatapicker"
0
 
guramritCommented:
You can also keep your code as it is, there is no need to add another user control, but then you have to change following code. I'll explain why,
 
<script type="text/javascript">
		    $(function () {
		        $('#datepicker1').datepicker({
		            inline: true
		        });
		    });
		</script>

Open in new window


to

 
<script type="text/javascript">
		    $(function () {
		        $('<%= datepicker1.ClientID %>').datepicker({
		            inline: true
		        });
		    });
		</script>

Open in new window


it's because ID of datepicker1 is rendered different on client side than server side, you can access clientid for server side control using ClientID property. You can check rendered code using view source on internet exploer and verify your changes.
0
 
AanvikAuthor Commented:
Sorry guys.. I tried both the options but none of them working.

Her;es the code.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<%@ Register src="Test1.ascx" tagname="Test1" tagprefix="uc1" %>

<!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>

    	<link type="text/css" href="Styles/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="Scripts/jquery-ui-1.8.16.custom.min.js"></script>
		

</head>
<body>
    <form id="form1" runat="server">
    <div>
    
       
    </div>
    <uc1:Test1 ID="Test11" runat="server" />
    </form>
</body>
</html>

Open in new window

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

<asp:TextBox ID="datepicker1" runat="server"  CssClass="jdatapicker"></asp:TextBox>

<script type="text/javascript">
    $(function () {
        $('#datepicker1').datepicker({
            inline: true
        });
    });
</script>

Open in new window

0
 
guramritCommented:
try changing code of usercontrol to

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

<asp:TextBox ID="datepicker1" runat="server"  CssClass="jdatapicker"></asp:TextBox>

<script type="text/javascript">
    $(function () {
        $('#<%= datepicker1.ClientID %>').datepicker({
            inline: true
        });
    });
</script>

Open in new window


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

<asp:TextBox ID="datepicker1" runat="server"  CssClass="jdatapicker"></asp:TextBox>

<script type="text/javascript">
    $(function () {
        $('.jdatapicker').datepicker({
            inline: true
        });
    });
</script>

Open in new window


both should work...
0
 
Kiran SonawaneProject LeadCommented:
$('#datepicker1').datepicker({
            inline: true
        }); This should be

$('.jdatapicker').datepicker({
            inline: true
        });
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now