Call Controller Action on DropDownList change using jQuery AJAX in ASP.Net MVC

how to call action method of controller with product id?

what i am doing wrong over here?

The below is my code : 

<div class="form-group">
    <div class="col-md-10">
        @Html.DropDownListFor(m => m.ProductName, new SelectList(ViewBag.GetProduct, "ID", "ProductName"), new { @onchange = "DropDownProductList();", @id = "municipalityDropDown" })      
        @Html.ValidationMessageFor(model => model.ProductName, "", new { @class = "text-danger" })
    </div>
</div>
<script type="text/javascript">   
    function DropDownProductList() {
        debugger;
            var DropDownSelectedValue = $("municipalityDropDown").val();
            //You can check selected value using alert
            alert(DropDownSelectedValue);
            if (DropDownSelectedValue != null) {
            //Make a ajax call to controller here
            $.ajax({
                url: " /Offers/Viewoffer ",
                data: { "ID": DropDownSelectedValue },
                success: function (response) {
                },
                error: function (xhr) {
                    alert("Something went wrong, please try again");
                }
            });
        }
    }
</script>

C# controller:

public ActionResult Viewoffer(int productid)
{
    return null;
}