How to get value to the controller from view

Question

I am struggling hard to get value to my controller. Please can some one suggest a way to get value to controller from view. Application is in .Net3.5 and MVC 2 for .Net3.5

The view with jquery and controller is:

The jquery and the html is:

<tr>
  <td style ="width: 313px">
    <label for="Product Code"> Product 
Code&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </label>&nbsp;&nbsp;
    <select id ="prodList" style = "width:150px">
      <option value ="GL ">GL </option>
      <option value ="Property" selected="selected">Property </option>
      <option value ="Package" >Package </option>
      <option value ="Island" >Island </option>
    </select>
  </td>
  <td style="width: 313px"><input type ="button" id="addProd" value ="Add Product" /></td>
</tr>

<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.4.1.min-vsdoc.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

<script type="text/javascript">
  $(function() {
    $("#addProd").click(function() {
      //alert("here");
      var selectedID = $("#prodList").val();
      alert("me 1" + selectedID);
      $.ajax({
        url: "/WorkFlowTest/ProductSubmission/",
        type: 'POST',
        data: { productID: $("#prodList").val() },
        contentType: 'application/json; charset=utf-8',
        success: function(data) {
          //alert(data.success);
          alert("success");
        },
        error: function() {
          alert("error");
        }
      });
    });
  });
</script>

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ProductSubmission(string productID, ViewModels.WorkFlowTestViewModel SubmissionModelView)
{
     SubmissionModelView.selectedProd = prodSelected   ;
     return View("Submission", SubmissionModelView);
}

In the jquery function the alert has the selected value, but for the SubmissionModelView has all properties null and the productId is null too.

Though in browser console I get Source {"productId":"Property"} , but I can not understand why my post does not get any value in the Action ProductSubmission .

Can any one help , I just need the controller to get the selected option value on Post or even a text value on Post. I am not able to get any value from view to controller and my model has also all properties null in POST. Please help

Answer 1

You should convert the object to JSON string by using the JSON.stringify function.

 $.ajax({
    url: "/WorkFlowTest/ProductSubmission/",
    type: 'POST',
    data: JSON.stringify({ productID: $("#prodList").val() }),
    contentType: 'application/json; charset=utf-8',
    success: function(data) {
      //alert(data.success);
      alert("success");
    },
    error: function() {
      alert("error");
    }
  });