JQuery AJAX and asp.net page

Question

I have the following setup on an aspx page:

<asp:Content ID="contentBody" ContentPlaceHolderID="body" Runat="Server">
    <div class="Container-WithoutSideBar">
        <asp:Label ID="TextTitle" runat="server" AssociatedControlID="ArticleTitle" Text="Title " />
        <asp:TextBox ID="ArticleTitle" TextMode="SingleLine" runat="server"></asp:TextBox>       
...
</asp:Content>

and the following JQuery AJAX:

function fnGetArticleHTML()
{
    var articleText = JSON.stringify(tinyMCE.activeEditor.getContent());
    $.ajax({
        type: "POST",
        url: 'adminpageadd.aspx/SubmitArticleHTML',
        data: "{ 'ArticleHTML': " + articleText + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            alert("Article saved");
        },
        error: function (xhr, ajaxOptions, thrownError) {
            //alert("Error Saving Article");                    
            alert(xhr.responseText);
       }
    });            
    return false;
}

Which all works fine.

And the server side code:

[System.Web.Services.WebMethod]
public static string SubmitArticleHTML(string ArticleHTML)
{        
    news_adminpageadd addArticle = new news_adminpageadd();

    return addArticle.SubmitArticle(ArticleHTML);
}

private string SubmitArticle(string ArticleHTML)
{
    return ArticleTitle.Text;
}

The problem is, that when I try and return the Article.Text,which is the content of the asp:TextBox I get the following exception:

{"Message":"Object reference not set to an instance of an object.","StackTrace":"   at news_adminpageadd.SubmitArticle(String ArticleHTML) in .....\news\\adminpageadd.aspx.cs:line 69\r\n   at news_adminpageadd.SubmitArticleHTML(String ArticleHTML) in ....\news\\adminpageadd.aspx.cs:line 64","ExceptionType":"System.NullReferenceException"}

Which is essentially saying that:

ArticleTitle.Text;

is not set not an instance of an object.

I know this is not the case, as on Page_load it works fine.

I assume that somehow the interaction with the WebMethod is the problem, but how do I solve it?

Setting the textbox to client side and passing it through int he AJAX will not help for me, as I need it server side to load the correct values.

I have tried finding the control, but this still gives the same exception.

Any ideas?

Answer 1

I passed the variable to the server side like this (I am sure I can tidy it up a bit):

function fnGetArticleHTML()
{
    var articleText = JSON.stringify(tinyMCE.activeEditor.getContent());
    var ArticleTitle = JSON.stringify($('#<%=ArticleTitle.ClientID%>').val());
    var ArticleAuthor = JSON.stringify($('#<%=AuthorName.ClientID%>').val());
    var ArticlePosition = JSON.stringify($('#<%=AuthorPosition.ClientID%>').val());
    var ArticlePhonNo = JSON.stringify($('#<%=AuthorPhone.ClientID%>').val());
    var ArticleEmail = JSON.stringify($('#<%=AuthorEmail.ClientID%>').val());
    var ArticleWebsite = JSON.stringify($('#<%=AuthorWebsite.ClientID%>').val());
    var ArticleCategory = JSON.stringify($('#<%=ArticleCategories.ClientID%>').attr('value'));

    $.ajax({
        type: "POST",
        url: 'adminpageadd.aspx/SubmitArticleHTML',
        data: "{ 'ArticleHTML': " + articleText + ", 'ArticleTitle':" + ArticleTitle + ", 'ArticleAuthor':" + ArticleAuthor + ", 'ArticlePosition':" + ArticlePosition + ", 'ArticlePhonNo':" + ArticlePhonNo + ", 'ArticleEmail':" + ArticleEmail + ", 'ArticleWebsite':" + ArticleWebsite + ", 'ArticleCategory':" + ArticleCategory + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            alert("Article saved: " + response.d);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Error Saving Article");                                        
       }
    });            
    return false;
}