Question

I am trying to wire up and change event jQuery handler for a dropdown list I have to populate a div “payment” with html returned from my controller action as soon as user changes a value in the dropdown.

Here is what I have so far and I have no idea why it’s not working or on how to chase this further. No errors or response from changing the dropdown value. Any help very much appreciated!

cshtml:

<script type="text/javascript">
$(document).ready(function () {
    $("#PaymentType").change(function () {
        var selection = $("#PaymentType").val();
        var dataToSend = {
            paymentType: selection
        };

        $.ajax({
            url: "Order/PaymentChanged",
            type: "GET",
            data: dataToSend,
            success: function (data) {
                $("#payment").text("server returned:" + data.agent);
            }
        });
    });
});
</script>

@using (Html.BeginForm())
{
   <div id = "payment">
   <br />
   @Html.Label("Select payment method")
   <br />
   <select id="PaymentType" name="PaymentType">
     <option value="CreditCard">Credit Card</option>
     <option value="Cash">Cash</option>
     <option value="Check">Check</option>
   </select>
   </div>
 }

OrderController.cs

    public JsonResult PaymentChanged(string paymentType)
    {
        return Json(new { agent = "sample html" }, JsonRequestBehavior.AllowGet);
    }

Standard, largely unchanged _Layout.cshtml file with all jQuery src including src=”/Scripts/jquery-1.5.1.min.js”

Answer 1

Code looks fine to me so I’ll answer “how to chase this further”

• Use Chrome’s debugger or Firebug to see the status of your XHR.
• Run your MVC app in Debug mode (from Visual Studio) and put a break point inside your controller to see if it’s actually being called and if paymentType is being sent properly (the former is more likely given your code looks fine).