Home » jQuery » Mixing ASP.NET, jQuery and JSON

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

Like this Article? Subscribe to get every article sent to your email.

Related Post

  • jQuery, JSON, and ASP.NETjQuery, JSON, and ASP.NET A few months ago, I demonstrated how to use ASP.NET's JSON capabilities.  Lately, I've been demonstrating how to use jQuery.  Both use a considerable amount of JavaScript so if there is […]
  • ASP.NET JSON  and ViewStateASP.NET JSON and ViewState I received the following question recently about my article "ASP.NET AJAX using JSON - Here’s how." If we update the value of a textbox or label via a JSON web service call - will the […]
  • ASP.NET AJAX using JSON – Here’s how.ASP.NET AJAX using JSON – Here’s how. Last week I wrote a post about how simple JSON is. In it I explained the main differences between using JSON and using the update panel. I really started out thinking I'd get to how to […]
  • Using JSON in ASP.NETUsing JSON in ASP.NET If you've been avoiding using JSON in your ASP.NET application because you think it's hard, you're an idiot. I can say that, because I've been avoiding it for exactly that reason. I've […]
  • jQuery Dialog – With Validation ControlsjQuery Dialog – With Validation Controls Chances are, you’ll eventually want to use a dialog box in combination with some form elements, and when you do, you’ll probably want to implement some validation. True, there are some […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer. His commitment to quality through test driven development, vast knowledge of C#, HTML, CSS and JavaScript as well as his ability to mentor younger programmers and his passion for Agile/Scrum as defined by the Agile Manifesto and the Scrum Alliance will certainly be an asset to your organization.

One Pingback/Trackback

  • Pingback: Dew Drop - May 13, 2009 | Alvin Ashcraft's Morning Dew()

  • http://www.dinemobile.com Keith

    The same code above doesn’t work. the wiring up event you put the code that you said specifically “DO NOT WRITE YOUR CODE LIKE THIS!”, yet you put it in your example. Also, when I attempt to run this, I get an error: undefined. I’ve created a webservice and made a public function. But doesn’t work.

  • Dave

    Ooops. Don’t know how that happened. It’s been fixed.