jquery ajax call from asp.net mvc app

Question

I am trying to call an action from jQuery. The action should return true or false, and based on the return value I will do something.

I have the following code.

 $("#payment").click(function (e) {
       if($("#deliverytime").attr("disabled")){
            //something here...   
        }
        else
        {
            var postcode=$('#Postcode').val();
            var restId='<%:ViewBag.RestaurantId %>';
            var URL = "/Restaurant/DoesRestaurantDeliver?restid="+restId+"&&postcode="+postcode;

            $.ajax({
                 type: "GET",
                 url: URL
             }).done(function(msg) {
                        if(msg==true){
                             $('#commonMessage').html(msg);
                             $('#commonMessage').delay(400).slideDown(400).delay(4000).slideUp(400);
                             return false;
                        }
                        else{
                            $('#commonMessage').html(msg);
                             $('#commonMessage').delay(400).slideDown(400).delay(4000).slideUp(400);
                             return false;
                        }
            }); 



        }
    });

The code is not working. It says 'msg' is not defined. Is this not the way I should do this using jQuery-ajax? What am I doing wrong?

EDIT:

Controller action

public JsonResult DoesRestaurantDeliver(Int32 restid, string postcode)
    {

        if (rest.getDeliveryPriceForPostcode(restid, postcode) == null)
        {
            return Json(Boolean.FalseString, JsonRequestBehavior.AllowGet);
        }
        else
            return Json(Boolean.TrueString, JsonRequestBehavior.AllowGet);
    }

Modified function

var postcode = $('#DeliveryInfo_Postcode').val();
            var restId = '<%:ViewBag.RestaurantId %>';
            var URL = "/Restaurant/DoesRestaurantDeliver?restid=" + restId + "&&postcode=" + postcode;
            $.ajax({
                url: URL,
                dataType: "json",
                type: "GET",
                data: "{}",
                success: function (data) {
                    if (!data.hasError) {
                        $('#commonMessage').html(data);

                        return false;
                    }
                }
            });

EDIT -2

<script>
$(document).ready(function () {
    $("#checkout").click(function (e) {
        getDeliveryInfo();
    });
});
function getDeliveryInfo() {
    var URL ="/Restaurant/DoesRestaurantDeliver/6/2259"
    $.get(URL, function (data) {
        alert(data.isValid);
    });
}
</script>
<%using (Html.BeginForm())
 { %>
<input type="submit" name="submit" id="checkout"/>
<%} %>

The above code does not work. But If i put the 'checkout' button out side of the form like below, it works.

<%using (Html.BeginForm())
 { %>

<%} %>
<input type="submit" name="submit" id="checkout"/>

Sampath · Accepted Answer · 2012-12-17 13:12:24Z

1

You can configure your ajax call like below.

I feel your ajax call having problems on .done(function(msg) {} area.

Try to set success: function (data) {} like below.

<script type="text/javascript">

    $(function () {

        var companyName = $("#companyname");

        $.ajax({
            url: "/Company/GetName",
            dataType: "json",
            type: "GET",
            data: "{}",
            success: function (data) {
                if (!data.hasError) {
                    companyName.html(data.companyName);
                }
            }
        });
    });

</script>

EDIT

Action method should looks like below (This is a sample.Adjust it according to your situation)

 [HttpGet]
 public JsonResult GetName(string term)
        {
            var result = Repository.GetName(term);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

EDIT 2

I would use Anonymous object (isValid) (remember that JSON is a key/value pairs):

Action Method

   [HttpGet]
   public JsonResult DoesRestaurantDeliver(Int32 restid, string postcode)
    {
       if (rest.getDeliveryPriceForPostcode(restid, postcode) == null)
        {
            return Json(new { isValid = false},JsonRequestBehavior.AllowGet);
        }
        else
            return Json(new { isValid = true },JsonRequestBehavior.AllowGet);
    }

And then inside the ajax method:

success: function(data) {
    if (data.isValid) {
        ...
    }
}

EDIT 3

Just change your button type as below.(since you're not sending any values from form)

<input type="button" name="submit" id="checkout"/>

edited Dec 17, 2012 at 13:12

answered Dec 14, 2012 at 14:38

Sampath

66.2k70 gold badges327 silver badges461 bronze badges

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

10 Comments

Reza.Hoque Over a year ago

now it says data is not defined. From the controller do I have to return jsonresult? i am returning 'Content(Boolean.Truestring)'..can that cause the error?

Sampath Over a year ago

@kandroid yes.need to return json result like i have mentioned in Edit area.

Reza.Hoque Over a year ago

i think i am doing some silly mistake somewhere around. I tried to debug in Firebug, when it goes to 'sucess:function(data)',it does not go into the function, on the other hand if I try to watch data, it says data is not defined.

Sampath Over a year ago

@kandroid Can you put your Action method also ? and check whether inside a fire bug, your parameters are filling with correct values.If those values are not filling correctly then It will not go to the action method due to routing issue.Update your new ajax method also.

Reza.Hoque Over a year ago

it is hitting my controller action. i have tested it

|

Collectives™ on Stack Overflow

jquery ajax call from asp.net mvc app

EDIT:

Modified function

EDIT -2

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT:

Modified function

EDIT -2

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related