jQuery AJAX and ASP.NET

Question

I have this little problem... I have this asp.net website. I have a menu, all done with html and css. So when I click on home, the ajax loads the other content into the specified div element. Working 100%.

In the content that was loaded into the div element, I have a button. An ASP.NET button.

When I click on the button, it gives me a "The resource cannot be found." error.

There must be something I am missing. If you dont understand, heres the ajax:

//Load the Home page on click.
$(document).ready(function () {
    $('.home').click(function () {
        $("#content").load("html/home/home.aspx");
    });
});

Now the aspx page that was loaded into the content div, displays a button, btnAdd:

<asp:Panel ID="pnlAddNewBlog" runat="server">
    <asp:TextBox ID="txtAddNewBlog" runat="server" TextMode="MultiLine"></asp:TextBox>
    <br />
    <asp:Button ID="btnAdd" runat="server" Text="Add" />
</asp:Panel>

When I click on that button, the error appears.

What I want to achieve is to: when the user clicks on the button, the text in txtAddNewBlog gets added into a database. Now this I can achieve using C#... but not if this error is in my way. Any ideas?

Answer 1

The problem is going to be the form that gets created. When you make that request, ASP.NET will build a form whose target is home.aspx, not the full path to it. But you're dumping that form onto an HTML page that's at a different level.

When you do a form post, it attempts to post to home.aspx, relative to where the browser thinks it is, which is two levels up, and it doesn't find it.

I don't know if there's a good way to do this - ASP.NET is not meant to handle this kind of thing. You can do an IFRAME. You can wrap the home.aspx content into a user control, and leave the ASP.NET form on the outer page. Or you may be able to manipulate the form's target so you post to the right place. But I don't think any of those would be a lot of fun.