Loading User Controls with jQuery .load()

c# jquery asp.net user-controls

11,415

I don't think you can directly call a user-control using jQuery.
But you can take help of generic http handler for it.

http://blog.ovesens.net/2008/12/dynamically-loading-asp-net-user-controls-with-jquery/
http://www.codeproject.com/Articles/117475/Load-ASP-Net-User-Control-Dynamically-Using-jQuery

11,415

TheGeekZn

Full stack software developer specialising in open source, scalable systems

Updated on June 04, 2022

Comments

TheGeekZn almost 2 years

I am using a clean test page, and loading a user control with jQuery's .load() function. The current error I get is this:
GET http://localhost:27950/OCDB/test.ascx 403 (Forbidden)

Here is my Page code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<%@ Register Src="~/test.ascx" TagPrefix="uc1" TagName="test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>This is a test.</title>

     <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#ucPlaceholder').load('test.ascx');
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="ucPlaceholder">
    </div>
    </form>
</body>
</html>

And my user control code:

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

<input placeholder="test input"/>

As you can see, its super simple. My immediate guess is that the page isn't picking up the Register. Can anyone show me where I'm going wrong?

TheGeekZn about 11 years

I am having issues loading the <httpHandlers>... Its showing Cannot resolve symbol issues.
शेखर about 11 years

@NewAmbition in web config file?
TheGeekZn about 11 years

Yes. But I realised the IHttpHandler needs to be in a .cs file. Now it works properly with <add verb="*" path="*.ascx" type="jQueryHandler"/> using codeproject.com/Articles/117475/….