none
Cadastrar e atualizar dropDown com AJAX RRS feed

  • Pergunta

  • Boa noite! Estou apanhando feito condenado pra entender o funcionamento do ajax no mvc

    Meu cenário é o seguinte, tenho um dropDownList de representantes, e posso ter vários representantes, ou seja, com o metodo .clone do javascript eu vou inserindo dropDowns conforme a necessidade e ai seleciono os representantes pra cada um. Mas preciso implementar também o cadastro de representantes nessa tela, e ai atualizar todos os dropDowns que houverem na página.

    O fluxo é: Usuário seleciona um representante no dropDown, clica no botão para adicionar mais um dropDown, verifica que tem um representante que deseja cadastrar, clica no botão para cadastrar um novo, abre a modal com os campos de cadastro, retorna para a tela anterior com os dropDowns com o novo representante.

    Minha view Create ta assim:

    @using (Html.BeginForm()) {
        @Html.ValidationSummary(true)
        <fieldset>
            <legend>contas</legend>
    
            <div class="editor-label">
                <label>Nome</label>
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.nome)
                @Html.ValidationMessageFor(model => model.nome)
            </div>
    
            <div class="editor-label">
                <label>Tipo de conta</label>
            </div>
            <div class="editor-field">
                @Html.DropDownListFor(x => x.idTipo, Model.tipo)
            </div>
    <div id="listaResponsaveis">
                    <input id='cadastrarResponsavel' type='submit' value='Cadastrar novo' class='btn' />
                    <div id='div0'>
                        @Html.DropDownListFor(x => x.idResponsaveis, Model.responsaveis)
                    </div>     
            </div>
            
    
            <p>
                <input type="submit" value="Criar" class='btn btn-success'/>
            </p>
        </fieldset>
    }
    
    <div>
        @Html.ActionLink("Voltar à lista", "Index")
    </div>

    Criei uma partial view que deverá aparecer para o usuário inserir os dados do representante:

    @model Sacer.Models.responsavelporconta
    @{
        Layout = null;
    }
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    
    @using (Html.BeginForm()) {
        @Html.ValidationSummary(true)
        
    
            <div class="editor-label">
                @Html.LabelFor(model => model.Matricula)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Matricula)
                @Html.ValidationMessageFor(model => model.Matricula)
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.Nome)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Nome)
                @Html.ValidationMessageFor(model => model.Nome)
            </div>
    
            <p>
                <input type="submit" value="Criar" />
            </p>
    
    }
    
    <div>
        @Html.ActionLink("Voltar à lista", "Index")
    </div>

    Eu sei que devo usar um using @{@Ajax.ActionLink("Controller", "View", new AjaxOptions(){UpdateTargetId = "cadastrarResponsavel"})}, e tbm no controller verificar com .isAjaxRequest, o problema é que não estou conseguindo juntar as informações, se puderem me passar tutorial, artigo, link, macumba, qualquer coisa que me ajude.... Obrigado

    quinta-feira, 4 de outubro de 2012 04:24

Todas as Respostas

  • Kakashi um exemplo básico aqui,

    View

    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    
    
    @Ajax.ActionLink("Segundos", "PegarSegundos", "Home", new AjaxOptions
                {
                    UpdateTargetId = "horas",
                    InsertionMode = InsertionMode.Replace
                })
    
    <div id="horas" />
    

            public PartialViewResult PegarSegundos()
            {
                //tenho uma PartialView PegarSegundos
                return PartialView("PegarSegundos");
            }

    att.

    quinta-feira, 4 de outubro de 2012 11:16
    Moderador
  • Qual o erro que ocorre?

    Você está incluindo os scripts certos?

    jquery? jquery.unobtrusive-ajax.js?


    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    quinta-feira, 4 de outubro de 2012 11:16
  • Bom dia!

    Agora quando eu clico no link, até aparece a partial view com os dados a serem cadastrados, e eu até consigo cadastrar, mas a página é direcionada para outra quando eu cadastro o responsavel, e quando eu volto a página, o dropdown não pegou os novos dados, apenas se eu der F5.

    <div id="listaResponsaveis">
                    
                    @Ajax.ActionLink("cadastrarResponsavel", "cadastrarResponsavel", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "listaResponsaveis" })
                    <input type="button" class='btn' onclick='adicionarResponsavel();' value='Adicionar' />
                    <div id='div0'>
                        @Html.DropDownListFor(x => x.idResponsaveis, Model.responsaveis)
                    </div>     
            </div>

    E os controles da partialView

    public ActionResult cadastrarResponsavel()
            {
                responsavelporconta rp = new responsavelporconta();
    
                return View(rp);
    
            }
    
            [HttpPost]
            public ActionResult cadastrarResponsavel(responsavelporconta responsavel)
            {
                db.responsavelporconta.AddObject(responsavel);
                db.SaveChanges();
                return View();
            }

    quinta-feira, 4 de outubro de 2012 13:32
  • Tenta usar Ajax.BeginForm na partial e retorna o objeto salvo em json.

    Depois é só usar js para fazer o que for preciso.


    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    quinta-feira, 4 de outubro de 2012 13:47
  • Hmmm consigo entender o porque, mas não sei como fazer, a minha partial ficaria assim?

    @model Sacer.Models.responsavelporconta
    @{
        Layout = null;
    }
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    
    @using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "listaResponsaveis" }))
        @Html.ValidationSummary(true)
        
    
            <div class="editor-label">
                @Html.LabelFor(model => model.Matricula)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Matricula)
                @Html.ValidationMessageFor(model => model.Matricula)
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.Nome)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Nome)
                @Html.ValidationMessageFor(model => model.Nome)
            </div>
    
            <p>
                <input type="submit" value="Criar" />
            </p>
    
    }
    
    <div>
        @Html.ActionLink("Voltar à lista", "Index")
    </div>

    O submit dessa partial vai para o HttpPost, e oq faço lá?

    quinta-feira, 4 de outubro de 2012 14:07
  • Você pode retornar o objeto que foi incluido.

    return Json(objeto);
    algo do tipo:
    <script>
        var form = {
            onComplete: function () {
                //adiciona na lista
            }
        }
    </script>
    
    @using (Ajax.BeginForm("Save", "Contrato",new AjaxOptions()
    {
        OnComplete="form.onComplete",
        HttpMethod = "POST",
        Url = "/Person/Save"
    }))
    {
        //inputs
        <input type="submit" />
    }


    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    quinta-feira, 4 de outubro de 2012 15:59
  • Murilo Kunze muito obrigado pela ajuda, acho que estou quase conseguindo.

    Agora da um erro:

    GET http://localhost:11929/conta/cadastrarResponsavel?X-Requested-With=XMLHttpRequest&_=1349380316882 500 (Internal Server Error) 

    Só que existe sim o HttpGeet do cadastrarResponsavel, a controller abaixo:

     [HttpGet]
            public ActionResult cadastrarResponsavel()
            {
                responsavelporconta rp = new responsavelporconta();
                if (Request.IsAjaxRequest())
                {
                    return PartialView("cadastrarResponsavel", rp);
                }
                return View();
            }
    
            [HttpPost]
            public ActionResult cadastrarResponsavel(responsavelporconta responsavel)
            {
                if (Request.IsAjaxRequest())
                {
                    db.responsavelporconta.AddObject(responsavel);
                    db.SaveChanges();
                    return PartialView("cadastrarResponsavelJson", responsavel);
                }
    
                return View();
               
            }


    • Editado Kakashi963 quinta-feira, 4 de outubro de 2012 19:52
    quinta-feira, 4 de outubro de 2012 19:47

  • Consegui corrigir o erro acima, ta quaaaaaaaase, oq me falta agora é apenas fazer abrir a modal, pq não está abrindo... seguem os trechos:

    1° da minha view que chama a req.  ajax:

    <div id="listaResponsaveis">
                    
                    @Ajax.ActionLink("Cadastrar", "cadastrarResponsavel", "conta", null, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "listaResponsaveis" }, new { @class = "btn-dialog btn", data_dialog_id = "cadastrarDialog" })
                    
                    <input type="button" class='btn' onclick='adicionarResponsavel();' value='Adicionar' />
                    <div id='div0'>
                        @Html.DropDownListFor(x => x.idResponsaveis, Model.responsaveis)
                    </div>     
            </div>

    2° do ma minha partialView que retorna o cadastro via ajax:

    @model Sacer.Models.responsavelporconta
    @{
        Layout = null;
    }
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    
    @using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "cadastrarDialog" }))
    
    {
            @Html.ValidationSummary(true)
        
    
            <div class="editor-label">
                @Html.LabelFor(model => model.Matricula)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Matricula)
                @Html.ValidationMessageFor(model => model.Matricula)
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.Nome)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Nome)
                @Html.ValidationMessageFor(model => model.Nome)
            </div>
    
            <p>
                <input type="submit" value="Criar" />
            </p>
    
    }
    
    <div>
        @Html.ActionLink("Voltar à lista", "Index")
    </div>

    3° da minha partialView que retorna o conteudo JSON

    @model Sacer.Models.responsavelporconta
    
    <fieldset>
        <legend>Responsavel por conta</legend>
    
        <div class="display-label">Nome</div>
        <div class="display-field">@Model.Nome</div>
    
        <div class="display-label">Matricula</div>
        <div class="displayfield">@Model.Matricula</div>
    </fieldset>
    
    <script type="text/javascript">
        $(function () {
            var option = document.createElement('option');
            option.setAttribute('value', '@Model.IdResponsavelPorConta');
            option.setAttribute('selected', 'selected');
            option.setAttribute('text', '@Model.Nome');
            $('idResponsaveis').append(option).trigger("change");
            $("#cadastrarDialog").dialog("close");
        });
    </script>
    


    • Editado Kakashi963 quinta-feira, 4 de outubro de 2012 20:21
    quinta-feira, 4 de outubro de 2012 20:20