how to pass dropdownlist selected value to get function in controller in mvc

Question

I am totally new to asp.net MVC,I have a dropdownlist filled from database. Now I need to send the selected value(id) in get function in controller so i can load the selected value details Here is the code which I have tried.

View:

 @Html.DropDownListFor(model => model.ProductName, new SelectList(Model.ProductsList, "ProductID", "ProductName"),  new
                   {
                       id = "Productslist",
                       @class = "GreenDropDownListStyle",
                       @datastyle = "dropdown",
                   })

java Script code:

        <script type="text/javascript">
            $(document).ready(function () {
                $("#Productslist").change(function () {
                    debugger;
                    var SelectedProductID = this.value;
                    if (SelectedProductID != "") {
                        $.ajax(
                            {
                                type: 'GET',
                                url: '/Inventory/ViewProduct',
                                data: { ProductID: SelectedProductID },
                                contentType: 'application/json; charset=utf-8',
                                success: function (details) {
                                    //alert("success"); 
                                },

                            });
                    } else {
                    }

                });

            });
        </script>

this code can get the id of selected and view succeed alert message but it doesn't send the selected value (id) to the post function in controller

Cotroller :

[HttpPost]
    public ActionResult ViewProduct(int? ProductID)
    {
         if (ProductID != null && ProductID >0)
            {

            }
            else
            {
               message = "";
            }
        return View();
    }

Answer 1

You should specify POST as the http method here.

$.ajax({
   method: 'POST',
   url: '/Inventory/ViewProduct',
   data: { ProductID: SelectedProductID },
   contentType: 'application/json; charset=utf-8',
   success: function (details) {
      //alert("success"); 
   }
});

Worth checking out this link for more details on how to use jquery ajax function.

By the way, use type: 'POST' instead of method: 'POST' if you're using versions of jQuery prior to 1.9.0.

Answer 2

Try this:

var jsn = { ProductID: SelectedProductID };
            jsn = JSON.stringify(jsn);
            $.ajax({
                type: "POST",
                url: "/Inventory/ViewProduct",
                data: jsn,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,
                success: function () {

                }
            });