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>

Solution 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
}

Solution 2

Try this

@Html.DropDownList("id", (SelectList)ViewBag.Values, new { onchange = string.Format("UpdateProductsDB(this, {0})", item.id) })  

And your UpdateProductsDB function will now accept id as well.

function UpdateProductsDB(categorySelected, productId) {
 ...
}

Also depending on the type of your id, if it is an integer than you can just use:

string.Format("UpdateProductsDB(this, {0})", item.id)

But if it is a GUID or a string you will have to put single quotes around:

string.Format("UpdateProductsDB(this, '{0}')", item.id)

Solution 3

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();" })
}

Comments

[milagvoniduak]

Question is not very clear here, but I think user is trying to get product id into the UpdateProduct javascript function, or I might be wrong here...

[Jack]

@MyP3uK It read to me like he is coming from WebForms and is used to having dropdowns ajax postback automatically, but you could be right as well.

[Mike Howe]

I'm cofused on the "function UpdateProductsDB(categorySelected, productId) { ...}". I have the update code in the action method : public ActionResult UpdateProduct(int prodID, int catID) { . . . I don't know have to write javascript code.

[milagvoniduak]

Maybe I am not completely understanding your question. What I gathered from your post is that you don't know how to pass product id to your client side javascript function, is this right?

[Mike Howe]

I don't know how to do anything in javascript or jQuery. But I want to update the database with an Action Method when an item in the DropDown is selected. I posted the code i have so far above. Thanks.

[Nick Kahn]

where does the item.Id is coming from? if that is in the foreach loop then its good otherwise the above code will not work.