.NET Answers

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 Related Items:

Dallas Cowboys Let's Go LightLet your team spirit show with the Flashing "Let's Go" Stoplight. Has rotating lenses so it can be hung horizontally or vertically. Or, put it on your desk. Measures 16 inches tall by 6 inches wide.

Peas, Chana Dal - 12 Oz Bag EachWhen cooked they lose their shape and are excellent for thickening soups and stews. Typically used with curry, they can be seasoned with many different herbs.

Pro ASP.NET MVC Framework

Steven Sanderson has seen the ASP.NET MVC framework mature from the start, so his experience, combined with comprehensive coverage of all the new f... Read More >

Related Post

• jQuery, JSON, and ASP.NET
• jQuery 1.4 Released
• jQuery and ASP.NET UpdatePanel
• Do you Need My Help?
• Ajax: The Definitive Guide

Bookmark to:

Hide Sites

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