2013-02-02 6 views
0

Я изучаю ASP.NET MVC 2, что я пытаюсь сделать, это довольно просто:MVC 2 - Обновление View на основе выпадающего выбора

  1. я заполнить выпадающий список продукции типы
  2. Когда значение drop down изменяется, я отправляю его в модель и передаю выбранное значение.
  3. Заполните коллекцию со списком продуктов для конкретного типа продукта

До этого момента все работает, но на мой взгляд не обновляется и список продуктов для определенного типа продукта не отображается.

Я думал, может быть, это потому, что [HTTPPost] просто отправляет на просмотр модели и что она фактически не обновляет представление?

Любые предложения о том, как я могу обновить представление на основе выпадающего списка?

Модель:

общественного класса SuppliersModel { общественного SuppliersModel() { }

public SuppliersModel(string type) 
{ 
    ProductsByType = Products.Where(i => i.Type == type); 
} 

public IEnumerable<Products> ProductsByType { get; set; } 

public List<Products> Products 
{ 
    get 
    { 
     List<Products> mockProducts = new List<Products>() 
     { 
      new Products{Type="Fruit", Name="Apple"}, 
      new Products{Type="Fruit", Name="Orange"}, 
      new Products{Type="Vegetables", Name="Potato"}, 
      new Products{Type="Vegetables", Name="Carrot"} 
     }; 
     return mockProducts; 
    } 
} 

public SelectList ProductTypes 
{ 
    get { return GetProductTypes(); } 
} 

private SelectList GetProductTypes() 
{ 
    var productTypes = new List<SelectListItem> 
     { 
      new SelectListItem{ Value="Fruit",Text="Fruit"}, 
      new SelectListItem{ Value="Vegetables",Text="Vegetables"} 
     }; 

    var list = new SelectList(productTypes, "Value", "Text"); 
    return list; 
} 

}

общественного класса Продукты { общественная строка типа {получить; задавать; } public string Имя {get; задавать; } }

Вид:

<script type="text/javascript"> 
    $(function() { 
     $('#products').change(function() { 
      $.post('<%=Url.Action("GetProductsByType", "Suppliers")%>', { type: $(this).val() }, 
      function (result) { 
      }); 
     }); 
    }); 
</script> 
<h2> 
    Suppliers</h2> 
<%= Html.DropDownList("products",Model.ProductTypes) %> 
<table> 
    <% if (Model.ProductsByType != null) foreach (var item in Model.ProductsByType) 
      { %> 
    <tr> 
     <td> 
      <%= item.Name %> 
     </td> 
     <td> 
      <%= item.Type %> 
     </td> 
    </tr> 
    <% } %> 
</table> 

Контроллер:

public class SuppliersController : Controller 
{ 
    public ActionResult Suppliers() 
    { 
     SuppliersModel model = new SuppliersModel(); 
     return View(model); 
    } 

    [HttpPost] 
    public ActionResult GetProductsByType(string type) 
    { 
     //This executes when the value in the drop down changes 
     SuppliersModel model = new SuppliersModel(type); 
     return View(model); 
    } 
} 

ответ

0

Похоже, что вы ничего не делаете с HTML, что ваш контроллер возвращается после того, как пост,

<script type="text/javascript"> 
    $(function() { 
     $('#products').change(function() { 
      $.post('<%=Url.Action("GetProductsByType", "Suppliers")%>', { type: $(this).val() }, 
      function (result) { 
       //result will have the html that your controller returns after the post 
       // you can do something like, 
       $('#some-div').html(result); 
      }); 
     }); 
    }); 
</script> 
+0

Я поместил 'debugger'' in 'function (result)', но он не попадает, никаких идей? –

+0

привет @Deni, к сожалению, вы не можете размещать точки останова внутри javascript с помощью visualstudio (даже если кажется, что можете), вы можете сделать «alert (result);», чтобы увидеть, что ур возвращается –

+0

, если вы используете Chrome-разработчик инструменты вы можете поставить точку останова btw –

Смежные вопросы