Improve company productivity with a Business Account.Sign Up

x
?
Solved

ASP.Net ASCX Issue: Visual Studiio 2010

Posted on 2011-09-15
11
Medium Priority
?
352 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
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:Kiran Sonawane
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
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
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:Kiran Sonawane
ID: 36547441
Keep your test.aspx as it it. Just remove textbox control and which I earlier mentioned.
0
 
LVL 17

Expert Comment

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

Expert Comment

by:Kiran Sonawane
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:Kiran Sonawane
ID: 36547875
$('#datepicker1').datepicker({
            inline: true
        }); This should be

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

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.

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

ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
Hi, this video explains a free download that you can incorporate into your Access databases, or use stand-alone for contact management. Contacts -- Names, Addresses, Phone Numbers, eMail Addresses, Websites, Lists, Projects, Notes, Attachments…
In the video, one can understand the process of resizing images in single or bulk. Kernel Bulk Image Resizer is an easy to use tool for resizing large number of images. One can add and resize multiple images with this tool in single go. The video sh…

605 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