Cadastrar e atualizar dropDown com AJAX

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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á?

Answer 6

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

Answer 7

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

Answer 8

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>