Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

ASP.Net ASCX Issue: Visual Studiio 2010

Posted on 2011-09-15
11
Medium Priority
?
347 Views
Last Modified: 2012-05-12
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
Comment
Question by:Aanvik
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
  • +1
11 Comments
 
LVL 5

Author Comment

by:Aanvik
ID: 36545845
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
 
LVL 41

Expert Comment

by:guru_sami
ID: 36546558
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
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36547417
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 5

Author Comment

by:Aanvik
ID: 36547439
Hi sonawanekiran:

Have you tried that solution... and how about the reference of css and js file.. where should I  put them?
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36547441
Keep your test.aspx as it it. Just remove textbox control and which I earlier mentioned.
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36547443
* and  script which I mentioned earlier
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36547448
Do not forget to add the class to textbox
 CssClass="jdatapicker"
0
 
LVL 4

Expert Comment

by:guramrit
ID: 36547566
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
 
LVL 5

Author Comment

by:Aanvik
ID: 36547727
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
 
LVL 4

Accepted Solution

by:
guramrit earned 2000 total points
ID: 36547847
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
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36547875
$('#datepicker1').datepicker({
            inline: true
        }); This should be

$('.jdatapicker').datepicker({
            inline: true
        });
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
In this video you will find out how to export Office 365 mailboxes using the built in eDiscovery tool. Bear in mind that although this method might be useful in some cases, using PST files as Office 365 backup is troublesome in a long run (more on t…
In this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA: https://www.percona.com/resources/we…

704 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question