Mixing ASP.NET, jQuery and JSON

ppl-other-01 I received the following question last week:

I am building a web application… I have a form with asp.net server control textbox and dropdownlist…

how can I send this to the server without postback and send me back message if the process of updating the database is successful

You’ll remember from our previous post on web services, json and asp.net that we needed to create a web service that specifically was set up to return json AND we needed to pass the parameters as a json string.

You can refer to that post for more information.

But now we are taking it from the realm of demos to something a bit more real-world.  That is, we have data in our form that we need to get back to the web service.

For simplicity, I’m using a simple HTML form.  But if you are using an ASPX form with ASP.NET controls, you can still do the same thing.  The only difference will be that you’ll want to set the CssClass property on the controls to unique values so that you can select them in jQuery using a CSS selector instead of a Rule selector like I’ll be doing.

Here’s my basic HTML

        <p>Text Field:
        <input id="Text1"
        name="Text1" type="text" /><br />
        DropDown:
        <select name="Select1"
        id="Select1" name="D1">
        <option value="1">Thing One</option>
        <option value="2">Thing Two</option>
        </select><input id="Button1"
        type="button" value="button" /><br />
        </p>

The trick in passing the data to the Web Service, other than telling the web service we are working in JSON, is that we need to pass JSON to it for the parameter list.

In fact while I was working on this demo, I wasted about an hour trying to get the demo to work simply because I forgot that the data parameter was supposed to be a string.

So DO NOT WRITE YOUR CODE LIKE THIS!

data: {a : $('#Text1').val() ,
        b: $('#Select1').val() },

Instead, write it like THIS

data: "{a : '" + $('#Text1').val() + "'," +
        "b: '" + $('#Select1').val() + "' }",

The rest is elementary.

You need a web service with a webmethod

[WebMethod]
public string YourFunction(string a, string b)
{
    return a + ":" + b;
}


And you need to wire up an event to send the data.  The following code has the wire up and the subsequent call to the web service

function clickHandler() {
    $.ajax({
        type: "POST",
        url: "ASPnetJsonWebService.asmx/YourFunction",
        data: "{a :'" + $('#Text1').val() + "' , " +
                "b: '" + $('#Select1').val() + "' }",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(result) {
            alert(result.d);
        },
        error: function(request, status, errorThrown) {
            alert(status);
        }
    });
}

You’ll see that my web service isn’t putting the data in the database as the question referenced, but that’s basic database handling code that you can handle in a number of different ways that we’ve talked about previously on this blog.  Click the tag “dal” for more post about the data access layer.

 

Other post in jQuery

Related Post

3 Responses to “Mixing ASP.NET, jQuery and JSON”

Leave a Reply

Comment Policy:

  • You must verify your comment by responding to the automated email that is sent to your email address. Unverified comments will never show.Leave a good comment that adds to the conversation and I'll leave your link in.
  • Leave me pure spam and I'll delete it.
  • Leave a general comment and I'll remove the link but keep the comment.

Notify me of followup comments via e-mail

Bear