Display jQuery Dialog from MVC ActionResult form

Question

I'm still getting my feet wet experimenting with MVC3. I haven't found a good resource to get me started. I was wondering if I could consume a webservice that returns a string when a user is done typing in a zip code?

I have consumed a webservice using json but in a ASP.NET web application. I was able to return an Franchise based on the user's entered zip code. I was wondering if I could do the same thing in MVC?

How to convert the following to work in MVC:

    // Html code in my Test.aspx page
    <input id="txtZipCode" type="text" onchange="javscript:changed(this.value)" />
    <div id="Result"></div>

Here my javascript code:

    function changed(value) {
    $.ajax({
        type: "POST",
        url: "Test.aspx/GetData",
        data: "{'zipcode': '" + value + "'}",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (msg) {
            // Replace the div's content with the page method's return.
            $("#Result").text(msg.d);
        },
        error: function () {
            $("#Result").text('Failed');
        }
    });
}

Here's my code behind:

[System.Web.Services.WebMethod]
    public static string GetData(string zipcode)
    {
        srvc.bbcs tmp = new srvc.bbcs (); // consume test webservice
        string code = tmp.GetFETerrByZip(zipcode);
        return code;
    }

Giorgio Minardi · Accepted Answer · 2012-02-22 22:39:17Z

1

It's very similar, you will have to decorate your Action with the HttpPost attribute so you can accept POST request :

[HttpPost]
public ActionResult GetData(string zipcode)
{
 //return DateTime.Now.ToShortDateString();
        srvc.BudgetBlindsCommercialSolutions tmp = new srvc.BudgetBlindsCommercialSolutions();
        string code = tmp.GetFETerrByZip(zipcode);
        return Json(new {code= code});
}

While your jquery call will be :

    function changed(value) {
    $.ajax({
        type: "POST",
        url: "YourController/GetData",
        data: "{'zipcode': '" + value + "'}",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (msg) {
            // Replace the div's content with the page method's return.
            $("#Result").text(msg.d);
        },
        error: function () {
            $("#Result").text('Failed');
        }
    });
}

answered Feb 22, 2012 at 22:39

Giorgio Minardi

2,7691 gold badge16 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

thatstevedude Over a year ago

Thanks for pointing me in the right direction! I almost got it working. My jQuery keeps returning my error message and the code in my controller never gets hit when in debug mode. I've tried using JsonResult instead of ActionResult and an assortment of other tries. Any suggestions for that?

thatstevedude Over a year ago

I found out using firebug that my jQuery is returning a 404 error because it can't find "MyController/GetData"....

thatstevedude Over a year ago

I added a forward slash before my controller name and everything works perfect! (url: '/YourController/GetData')

Erik Funkenbusch · Accepted Answer · 2012-02-22 22:36:59Z

0

Yes, and you would do it exactly like you just showed. however, I would not do it on the onchange event, since that means sending a request each time a digit is typed, and that could get confusing. Perhaps on the onblur instead.

answered Feb 22, 2012 at 22:36

Erik Funkenbusch

93.7k29 gold badges201 silver badges292 bronze badges

1 Comment

thatstevedude Over a year ago

I googled the differences of both and will be using 'onblur' instead. Thanks for the suggestion!

Collectives™ on Stack Overflow

Display jQuery Dialog from MVC ActionResult form

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related