MVC "post back" DropDown List onchange when selected

Question

Here is what I have so far:

@Html.DropDownList("id", (SelectList)ViewBag.Values, new { onchange = "UpdateProduct(this);" })

<script language="JavaScript">
    $('#id').on('change', function () {
        var data = { prodID: 5, catID: 8 }; // < added test values
        $.post('GiftList/UpdateProduct', data, function (responseData) {
            //callback function
        });
    });
</script>

This is my action method for the Update :

[HttpPost]
public ActionResult UpdateProduct(int prodID, int catID)
{
    ........
    product.Category= catID;
   _productService.UpdateProduct(product);
    ... 

I just don't' know how to "wire" it all.

Original question:

I have a DropDown that, when an item is Selected, some code is run and the Product table in the database is updated.

This dropdown contains items from the Category Table (id and name):

@Html.DropDownList("id", (SelectList)ViewBag.Values, new { onchange = "UpdateProductsDB(this);" })    

I'll need to pass in the 'id' field from the Category selected.

I also need to pass in the Product Id from the Product table for the update.

I have access to the Product Id ('id') in the View by:

    @foreach (var item in Model.Products)
    {  ....
        item.Id

A hidden field I added:

<input id="item_Id" name="item.Id" type="hidden" value="43" />

Is this even possible with MVC? From my searches, it seems jQuery will do it. Please give as many details as you can because I don't know jQuery at all.

 <tr><span >Panasonic HDC-SDT750K</span>

                <input id="item_Id" name="item.Id" type="hidden" value="41" />
        </tr>       
                <tr>
                    <td width="125px" height="20px" align="right">Model: </td>
                    <td width="325px" align="left">
                        <span style="display:inline-block;width:325px;"></span>
                    </td>
                    ................

<select id="id" name="id" onchange="UpdateProductsDB(this);">

<option value="5">Accessories</option>
<option selected="selected" value="1">Desktops</option>
<option value="8">Camera, photo</option>
<option value="9">Cell phones</option>
<option value="12">Jewelry</option>  . . .
</select>
</td>


<td ><a href="/DBMJ33/GiftList/Edit/id41">Edit</a></td>
<td ><a href="/DBMJ33/GiftList/Delete/id41">Delete</a>

Answer 1

This should get you on the right track.

//your javascript
$('#myDropdown').on('change', function(){
   var data = {someData : someDataValue, someMoreData : someMoreDatavalue};
   $.post('myControllerName/UpdateProduct', data, function(responseData){
        //callback function
   });

});

//in your controller

[HttpPost]
public ActionResult UpdateProduct(int someData, string someMoreData)
{
  //do something with your data
}

Answer 2

Turns out I didn't need jQuery or AJAX at all, just these 3 lines. When an item is selected in the drop down, this "posts back" or runs immediately :

@using (Html.BeginForm("UpdateProduct", "GiftList"))
{
    @Html.Hidden("prodID", item.Id)
    @Html.DropDownList("catID", (SelectList)ViewBag.Values, new { onchange = "this.form.submit();" })
}