Switching From Textbox To Dropdownlistbox

Following a tutorial online I was able to pull data from two database tables (Merchandises and Categories) using Entity Framework in a RESTful WCF service. The Merchandises table is related to the Categories table through the foreign key column CategoryID.

I successfully consumed the RESTful WCF service in an MVC web app but the problem is the tutorial uses a textbox for the user to enter the CategoryID.

When users need to change an existing merchandise from one category to another, i.e. change from shoes to hat, they have to enter a new CategoryID for the new merchandise. This is not ideal since it's hard for users to memorize the CategoryID for each merchandise.

Instead of using a textbox to hold the CategoryID I want to use a dropdownlist box showing category names and when a category name is selected the CategoryID associated with it is automatically selected.

The following are my code in the MerchandiseController and Edit View which don't work.

[HttpGet]
public ActionResult Edit(string id)
{
 MerchandiseServiceClient msc = new MerchandiseServiceClient();            
 MerchandiseViewModel mvm = new MerchandiseViewModel();
 mvm.Merchandise = msc.FindMerchandiseByID(id);
 ViewBag.CategoryList = new SelectList(msc.FindAllCategories(), "ID", "Name");
 
     return View("Edit", mvm);   
}
 
[HttpPost]
public ActionResult Edit(MerchandiseViewModel mvm)
{
  MerchandiseServiceClient msc = new MerchandiseServiceClient();            
  msc.EditMerchandise(mvm.Merchandise);           
     return RedirectToAction("Index");
}
 

//--------------------------EDIT View---------------------------//
 
<tablecellspacing="2"cellpadding="2"><tr><td>@Html.LabelFor(model=>model.Merchandise.ID, "MerchandiseID")</td><td>
       @Html.ValueFor(model => model.Merchandise.ID)
       @Html.HiddenFor(model=>model.Merchandise.ID)                    
   </td></tr><tr><td>@Html.LabelFor(model=>model.Merchandise.Name)</td><td>@Html.TextBoxFor(model=>model.Merchandise.Name)</td></tr><tr><td>@Html.LabelFor(model=>model.Merchandise.Price, "Price Per Unit")</td><td>@Html.TextBoxFor(model=>model.Merchandise.Price)</td></tr><tr><td>@Html.LabelFor(model=>model.Category.ID, "Category")</td><td> @Html.DropDownList("CategoryList", "Select Category")</td></tr><tr><td></td><td><inputtype="submit"value="Save"/></td></tr></table>

The dropdownlist box renders successfully and I was able to select a category but nothing happens when I click on the Save button.