Solved

ASP.Net ASCX Issue: Visual Studiio 2010

Posted on 2011-09-15
11
333 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
  • 5
  • 3
  • 2
  • +1
11 Comments
 
LVL 5

Author Comment

by:Aanvik
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 5

Author Comment

by:Aanvik
Comment Utility
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
Comment Utility
Keep your test.aspx as it it. Just remove textbox control and which I earlier mentioned.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 17

Expert Comment

by:sonawanekiran
Comment Utility
* and  script which I mentioned earlier
0
 
LVL 17

Expert Comment

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

Expert Comment

by:guramrit
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
$('#datepicker1').datepicker({
            inline: true
        }); This should be

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

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
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…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

771 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now