Reza.Hoque
Reza.Hoque

Reputation: 2750

jquery ajax call from asp.net mvc app

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"/>

Upvotes: 1

Views: 2759

Answers (1)

Sampath
Sampath

Reputation: 65860

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"/>

Upvotes: 1

Related Questions