trying do a cascade update in a dropDownList, but the $.getJson wasn’t call the action on Controller. I’m using mvc 2 and SqlServer 2008 with Entitie
Please could you give me some direction to follow. Thanks in advance.
Controller AdminProduto
[HttpPost]
public JsonResult PegarSubCategoriaProduto(int categoria)
{
IQueryable<SubCatProduto> subCatProduto = repository.ListarSubCategoriasDeProdutoPorCategoria(categoria);
SelectList subCategoria = new SelectList(subCatProduto, "sub_cat_produto_id", "sub_cat_produto_nome");
return Json(subCategoria, JsonRequestBehavior.AllowGet);
}
SiteAdmin.master
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>Administração Tudo de Massinha</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LogOnUserControl"); %>
</div>
<div id="menucontainer">
<ul id="menu">
<li><%: Html.ActionLink("Vídeo", "Index", "AdminVideo")%></li>
<li><%: Html.ActionLink("Produto", "Index", "AdminProduto")%></li>
<li><%: Html.ActionLink("Categoria Produto", "Index", "AdminCatProduto")%></li>
<li><%: Html.ActionLink("SubCategoria Produto", "Index", "AdminSubCatProduto")%></li>
<li><%: Html.ActionLink("Galeria", "Index", "AdminGaleria")%></li>
<li><%: Html.ActionLink("Categoria Galeria", "Index", "AdminCatGaleria")%></li>
<li><%: Html.ActionLink("SubCategoria Galeria", "Index", "AdminSubCatGaleria")%></li>
</ul>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
</div>
</div>
</div>
</body>
</html>
Page Novo.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/SiteAdmin.Master" Inherits="System.Web.Mvc.ViewPage<TudoDeMassinha.ViewModel.ProdutoViewModel>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
TUDO DE MASSINHA - Admin - Novo Produto
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<h2>Produto</h2>
<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm("Novo", "AdminProduto", FormMethod.Post, new { enctype = "multipart/form-data" })){%>
<%: Html.ValidationSummary(true, "Por favor corrija os erros abaixo e tente novamente:")%>
<fieldset>
<legend>Novo Produto</legend>
<fieldset>
<legend>Detalhes</legend>
<div class="caixa-detalhe">
<div class="editor-label">
<%: Html.LabelFor(model => model.Produto.produto_id)%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Produto.produto_id, new { disabled = "disabled" })%>
<%: Html.ValidationMessageFor(model => model.Produto.produto_id)%>
</div>
</div>
<div class="caixa-detalhe">
<div class="editor-label">
<%: Html.LabelFor(model => model.Produto.cat_produto_id)%>
</div>
<div class="editor-field">
<%:Html.DropDownListFor(m => m.Produto.cat_produto_id, Model.Categoria,"-- Selecione uma Categoria -- ")%>
<%: Html.ValidationMessageFor(model => model.Produto.cat_produto_id)%>
</div>
</div>
<div class="caixa-detalhe">
<div class="editor-label">
<%: Html.LabelFor(model => model.Produto.sub_cat_produto_id)%>
</div>
<%--<div class="editor-field">--%>
<%--<%:Html.DropDownListFor(m => m.Produto.sub_cat_produto_id, Model.SubCategoria, "-- Selecione uma Sub Categoria --")%>--%>
<select id="subCat" name="subCat" disabled="disabled"></select>
<%--<%: Html.ValidationMessageFor(model => model.Produto.sub_cat_produto_id)%>--%>
<%--</div> --%>
</div>
<div class="caixa-detalhe">
<div class="editor-label">
<%: Html.LabelFor(model => model.Produto.produto_nome)%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Produto.produto_nome)%>
<%: Html.ValidationMessageFor(model => model.Produto.produto_nome)%>
</div>
</div>
<div class="caixa-detalhe">
<div class="editor-label">
<%: Html.LabelFor(model => model.Produto.produto_descricao)%>
</div>
<div class="editor-field">
<%: Html.TextAreaFor(model => model.Produto.produto_descricao)%>
<%: Html.ValidationMessageFor(model => model.Produto.produto_descricao)%>
</div>
</div>
<div class="caixa-detalhe">
<div class="editor-label">
<%: Html.LabelFor(model => model.Produto.produto_preco)%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Produto.produto_preco)%>
<%: Html.ValidationMessageFor(model => model.Produto.produto_preco)%>
</div>
</div>
<div class="caixa-detalhe">
<div class="editor-label">
<%: Html.LabelFor(model => model.Produto.produto_quantidade)%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Produto.produto_quantidade)%>
<%: Html.ValidationMessageFor(model => model.Produto.produto_quantidade)%>
</div>
</div>
<div class="caixa-detalhe">
<div class="editor-label">
<%: Html.LabelFor(model => model.Produto.produto_peso)%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Produto.produto_peso)%>
<%: Html.ValidationMessageFor(model => model.Produto.produto_peso)%>
</div>
</div>
<div class="caixa-detalhe">
<div class="editor-label">
<%: Html.LabelFor(model => model.Produto.produto_altura)%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Produto.produto_altura)%>
<%: Html.ValidationMessageFor(model => model.Produto.produto_altura)%>
</div>
</div>
<div class="caixa-detalhe">
<div class="editor-label">
<%: Html.LabelFor(model => model.Produto.produto_largura)%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Produto.produto_largura)%>
<%: Html.ValidationMessageFor(model => model.Produto.produto_largura)%>
</div>
</div>
<div class="caixa-detalhe">
<div class="editor-label">
<%: Html.LabelFor(model => model.Produto.produto_comprimento)%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Produto.produto_comprimento)%>
<%: Html.ValidationMessageFor(model => model.Produto.produto_comprimento)%>
</div>
</div>
<%--<div class="caixa-detalhe">
<div class="editor-label">
<%: Html.LabelFor(model => model.Produto.produto_data_inicio)%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Produto.produto_data_inicio)%>
<%: Html.ValidationMessageFor(model => model.Produto.produto_data_inicio)%>
</div>
</div>--%>
<div class="caixa-detalhe">
<div class="editor-label">
<%: Html.LabelFor(model => model.Produto.produto_promocao)%>
</div>
<div class="editor-field">
Sim <%: Html.RadioButtonFor(m => m.Produto.produto_promocao, 1)%>
Não <%: Html.RadioButtonFor(m => m.Produto.produto_promocao, 0)%>
<%: Html.ValidationMessageFor(model => model.Produto.produto_promocao)%>
</div>
</div>
<div class="caixa-detalhe">
<div class="editor-label">
<%: Html.LabelFor(model => model.Produto.produto_ativo)%>
</div>
<div class="editor-field">
Sim <%: Html.RadioButtonFor(m => m.Produto.produto_ativo, 1)%>
Não <%: Html.RadioButtonFor(m => m.Produto.produto_ativo, 0)%>
<%: Html.ValidationMessageFor(model => model.Produto.produto_ativo)%>
</div>
</div>
</fieldset>
<%--<fieldset>
<legend>Vídeos</legend>
<div class="caixa-detalhe">
<div class="editor-label">
<%: Html.LabelFor(model => model.Video.produto_video_nome)%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Video.produto_video_nome)%>
<%: Html.ValidationMessageFor(model => model.Video.produto_video_nome)%>
</div>
</div>
<div class="caixa-detalhe">
<div class="editor-label">
<%: Html.LabelFor(model => model.Video.produto_video_url)%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Video.produto_video_url)%>
<%: Html.ValidationMessageFor(model => model.Video.produto_video_url)%>
</div>
</div>
</fieldset>--%>
<fieldset>
<legend>Imagem 1</legend>
<div class="caixa-detalhe">
<div class="editor-label">
Icone 1
</div>
<div class="editor-field">
<input type="file" name="icone1" id="icone1" />
</div>
<div id="previa_imagem">
<!--Colocar ajax para previa da imagem que será incluida -->
</div>
</div>
<div class="caixa-detalhe">
<div class="editor-label">
Imagem 1
</div>
<div class="editor-field">
<input type="file" name="imagem1" id="imagem1" />
</div>
<div class="previa_imagem">
<!--Colocar ajax para previa da imagem que será incluida -->
</div>
</div>
</fieldset>
<fieldset>
<legend>Imagem 2</legend>
<div class="caixa-detalhe">
<div class="editor-label">
Icone 2
</div>
<div class="editor-field">
<input type="file" name="icone2" id="icone2" />
</div>
<div class="previa_imagem">
<!--Colocar ajax para previa da imagem que será incluida -->
</div>
</div>
<div class="caixa-detalhe">
<div class="editor-label">
Imagem 2
</div>
<div class="editor-field">
<input type="file" name="imagem2" id="imagem2" />
</div>
<div class="previa_imagem">
<!--Colocar ajax para previa da imagem que será incluida -->
</div>
</div>
</fieldset>
<fieldset>
<legend>Imagem 3</legend>
<div class="caixa-detalhe">
<div class="editor-label">
Icone 3
</div>
<div class="editor-field">
<input type="file" name="icone3" id="icone3" />
</div>
<div class="previa_imagem">
<!--Colocar ajax para previa da imagem que será incluida -->
</div>
</div>
<div class="caixa-detalhe">
<div class="editor-label">
Imagem 3
</div>
<div class="editor-field">
<input type="file" name="imagem3" id="imagem3" />
</div>
<div class="previa_imagem">
<!--Colocar ajax para previa da imagem que será incluida -->
</div>
</div>
</fieldset>
<fieldset>
<legend>Imagem 4</legend>
<div class="caixa-detalhe">
<div class="editor-label">
Icone 4
</div>
<div class="editor-field">
<input type="file" name="icone4" id="icone4" />
</div>
<div class="previa_imagem">
<!--Colocar ajax para previa da imagem que será incluida -->
</div>
</div>
<div class="caixa-detalhe">
<div class="editor-label">
Imagem 4
</div>
<div class="editor-field">
<input type="file" name="imagem4" id="imagem4" />
</div>
<div class="previa_imagem">
<!--Colocar ajax para previa da imagem que será incluida -->
</div>
</div>
</fieldset>
<p>
<input type="submit" value="Salvar" />
</p>
</fieldset>
<% } %>
<script type="text/javascript">
$("#Produto_cat_produto_id").change(function () {
var categoriaId = $(this).val();
var subCategoria = $("#subCat");
if (categoriaId.length > 0) {
subCategoria.attr("disabled", false);
ajustarSubCategoriaDropDown();
} else {
subCategoria.attr("disabled", true);
subCategoria.emptySelect();
}
});
function ajustarSubCategoriaDropDown() {
var categoriaId = $("#Produto_cat_produto_id").val();
var subCategoria = $("#subCat");
if (categoriaId.length > 0) {
//working until here
$.getJSON('/AdminProduto/PegarSubCategoriaProduto/', {categoria : categoriaId },
function (data) {
alert("worked");
});
}
}
</script>
<div class="voltar-link">
<a href="<%: Url.Action("Index") %>">
<img src="<%: Url.Content("~/Content/Img/Design/voltar.png") %>" alt="Voltar" title="Voltar para Lista"/>
</a>
</div>
</asp:Content>
This part works until the comment “work until here”
$("#Produto_cat_produto_id").change(function () {
var categoriaId = $(this).val();
var subCategoria = $("#subCat");
if (categoriaId.length > 0) {
subCategoria.attr("disabled", false);
ajustarSubCategoriaDropDown();
} else {
subCategoria.attr("disabled", true);
subCategoria.emptySelect();
}
});
function ajustarSubCategoriaDropDown() {
var categoriaId = $("#Produto_cat_produto_id").val();
var subCategoria = $("#subCat");
if (categoriaId.length > 0) {
//working until here
$.getJSON('/AdminProduto/PegarSubCategoriaProduto/', {categoria : categoriaId },
function (data) {
alert("worked");
});
}
}
$.getJSON uses a GET request and your controller action is decorated with
[HttpPost], so will not allow GET requests (only POST).To get it working, you can either:
Change your action to allow GET (decorate with
[HttpGet]instead of[HttpPost])or:
Switch to using $.post in your jQuery call.