CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-3asp.net-mvc-4
Mike Howe
Mike Howe

Reputation: 263

MVC "post back" DropDown List onchange when selected

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>

Upvotes: 3

Views: 19280

Answers (3)

Mike Howe
Mike Howe

Reputation: 263

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

Upvotes: 4

Jack
Jack

Reputation: 8941

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
}

Upvotes: 7

milagvoniduak
milagvoniduak

Reputation: 3254

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)

Upvotes: 3

Related Questions