Question

So I’m working on getting some data with AJAX. All appears to work okay, but I’m not actually getting the data on my page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
    function getMailDetail(mailId) {
        $.ajax({
            type: "GET",
            url: "GetMail.ashx",
            data: "mid=" + mailId,
            success: function (data) {
                console.log(data);
                var pnlMail = $('#<%= pnlMail.ClientID %>');
                var lblFrom = $('#<%= lblFrom.ClientID %>');
                var lblDate = $('#<%= lblDate.ClientID %>');
                var lblSubject = $('#<%= lblSubject.ClientID %>');
                var lblMessage = $('#<%= lblMessage.ClientID %>');

                lblFrom.text(data.From);
                lblDate.text(data.Date);
                lblSubject.text(data.Subject);
                lblMessage.text(data.Message);

                pnlMail.css("display", "block");
            }
        });
    }
</script>

I’ve logged data to check it’s value. As this is my first try at this, I’m not exactly sure what to expect, however, I believe I should be getting back name:value pairs. Currently the console is logging absolutely nothing. No value at all.

Here’s my HttpHandler:

    public void ProcessRequest(HttpContext context)
    {
        string mailid = context.Request.QueryString["mid"].ToString();
        context.Response.ContentType = "text/json";

        context.Response.Write(showMailDetail(mailid));
    }

    protected string showMailDetail(string id)
    {
        int mailid = int.Parse(id);

        string From = "";
        DateTime Date = DateTime.Now;
        string Subject = "";
        string Message = "";

        MySqlContext db = new MySqlContext();

        string sql = "select m.datesent, m.subject, m.message, u.firstname, u.lastname from mail m inner join users u on m.sender = u.userid where m.mailid = @id";

        List<MySqlParameter> args = new List<MySqlParameter>();
        args.Add(new MySqlParameter() { ParameterName = "@id", MySqlDbType = MySqlDbType.Int32, Value = mailid });

        MySqlDataReader dr = db.getReader(sql, args);

        if (dr.HasRows)
        {
            dr.Read();

            From = (string)dr["firstname"] + " " + (string)dr["lastname"];
            Date = dr.GetDateTime("datesent");
            Subject = (string)dr["subject"];
            Message = (string)dr["message"];
        }
        dr.Close();

        string result = "{ 'From' : " + From + ", 'Date' : " + Date.ToString("yyyy/MM/dd HH:mm:ss") + ", 'Subject' : " + Subject + ", 'Message' : " + Message + " }";

        return result; 
    }

Can anyone help me figure out why I’m not getting anything here? I’m completely prepared for the possibility that I’m doing this wrong…

I wrote the code based on the article at
http://www.codeproject.com/Articles/170882/jQuery-AJAX-and-HttpHandlers-in-ASP-NET

EDIT
Found that I was using an incorrect column name in my sql – should have been m.sender not m.senderid … However, I now have another problem.

When I trigger the Handler, I get the following in Chrome’s console:

GET GetMail.ashx?mid=1 500 (Internal Server Error) jquery.min.js:2

EDIT 2
Corrected more mistakes in the code on the Handler and now there are no errors appearing anywhere, but it doesn’t look like the click is actually triggering anything at all…

Not sure how to proceed here…

Answer 1

Wow, never manually build JSON by using string concatenations, you’re never gonna make it right.

Always use a serializer when you are working with JSON:

public void ProcessRequest(HttpContext context)
{
    int mailid = int.Parse(context.Request["mid"]);
    var detail = GetMailDetail(mailid);

    if (detail != null)
    {
        context.Response.ContentType = "application/json";
        string json = new JavaScriptSerializer().Serialize(detail);
        context.Response.Write(json);
    }
    else
    {
        context.Response.StatusCode = 404;
    }
}

protected object GetMailDetail(int mailid)
{
    string sql = "select m.datesent, m.subject, m.message, u.firstname, u.lastname from mail m inner join users u on m.senderid = u.userid where m.mailid = @id";

    var args = new[]
    {
        new MySqlParameter 
        { 
            ParameterName = "@id", 
            MySqlDbType = MySqlDbType.Int32, 
            Value = mailid 
        }
    }.ToList();

    MySqlContext db = new MySqlContext();
    using (MySqlDataReader dr = db.getReader(sql, args))
    {
        if (dr.Read())
        {
            return new 
            {
                From = string.Format("{0} {1}", dr["firstname"], dr["lastname"]),
                Date = dr.GetDateTime("datesent").ToString("yyyy/MM/dd HH:mm:ss"),
                Subject = dr["subject"],
                Message = dr["message"]
            }
        }
        return null;
    }
}

Now let’s see the client side call. You seem to have defined some getMailDetail function but you don’t seem to be calling it anywhere, or at least you haven’t shown it.

Here’s a full example to try:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
    function getMailDetail(mailId) {
        $.ajax({
            type: 'GET',
            url: '<%= ResolveUrl("~/GetMail.ashx") %>',
            data: { mid: mailId },
            success: function (data) {
                console.log(data);
            }
        });
    }
</script>

<div onclick="getMailDetail(5);">Click to get mail detail</div>