Solved

ASP.Net ASCX Issue: Visual Studiio 2010

Posted on 2011-09-15
11
346 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Get HTML5 Certified

Want to be a web developer? You'll need to know HTML. Prepare for HTML5 certification by enrolling in July's Course of the Month! It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
This article is for Object-Oriented Programming (OOP) beginners. An Interface contains declarations of events, indexers, methods and/or properties. Any class which implements the Interface should provide the concrete implementation for each Inter…
Monitoring a network: why having a policy is the best policy? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the enormous benefits of having a policy-based approach when monitoring medium and large networks. Software utilized in this v…
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…

623 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