Modal does not redirect while executing Post

Navigation
1

I have a View where I open a Modal to register a new data. It's working perfectly. The problem is that by registering using this Modal , it redirects me to the default page defined in c Controller . However, I only need the Modal to close, by clicking Salvar .

In my Controller , I have the following method to save: 

public ActionResult Adicionar()
        {
            return View();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Adicionar(ConstrutoraViewModel construtoraViewModel)
        {
            if (ModelState.IsValid)
            {
                _construtoraAppService.Adicionar(construtoraViewModel);
              //Faço o redirecionamento aqui, pois utilizo este método fora do modal também.
                return RedirectToAction("Index");
            }

            return View(construtoraViewModel);
        }

In% itself with% I do the redirect. However, I need it to continue because I use it to perform the Controller action as well.

My Modal signup is as follows: 

@model Sisco.Application.ViewModels.ConstrutoraViewModel

@{
    ViewBag.Title = "Adicionar Construtora";
}

@using (Html.BeginForm("Adicionar", "Construtora"))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <br /><br />
        @Html.ValidationSummary(true, "", new {@class = "text-danger"})
        <div class="form-group">
            <div class="row">
                @Html.LabelFor(model => model.Nome, new {@class = "control-label col-md-2"})
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Nome, new {htmlAttributes = new {@class = "form-control"}})
                    @Html.ValidationMessageFor(model => model.Nome, "", new {@class = "text-danger"})
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                @Html.LabelFor(model => model.CNPJ, new {@class = "control-label col-md-2"})
                <div class="col-md-10">
                    @Html.EditorFor(model => model.CNPJ, new {htmlAttributes = new {@class = "form-control"}})
                    @Html.ValidationMessageFor(model => model.CNPJ, "", new {@class = "text-danger"})
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                @Html.Label("DDD", new {@class = "control-label col-md-2"})
                <div class="col-md-1">
                    @Html.EditorFor(model => model.DDD, new {htmlAttributes = new {@class = "form-control"}})
                    @Html.ValidationMessageFor(model => model.DDD, "", new {@class = "text-danger"})
                </div>
                @Html.Label("Telefone", new {@class = "control-label col-md-2", style = "width: 100px"})
                <div class="col-md-4">
                    @Html.EditorFor(model => model.Telefone, new {htmlAttributes = new {@class = "form-control", style = "width: 81%"}})
                    @Html.ValidationMessageFor(model => model.Telefone, "", new {@class = "text-danger"})
                </div>
                <div class="3"></div>
            </div>
        </div>


        <hr />


        <div class="form-group">
            <div class="row">
                @Html.Label("CEP", new { @class = "control-label col-md-2" })
                <div class="col-md-2">
                    @Html.EditorFor(model => model.Endereco.CEP, new { htmlAttributes = new { @class = "form-control", @id = "cepConstrutora" } })
                    @Html.ValidationMessageFor(model => model.Endereco.CEP, "", new { @class = "text-danger" })
                </div>
                <div class="col-md-8"></div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                @Html.LabelFor(model => model.Endereco.Bairro, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Endereco.Bairro, new { htmlAttributes = new { @class = "form-control", @id = "bairroConstrutora" } })
                    @Html.ValidationMessageFor(model => model.Endereco.Bairro, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>


        <div class="form-group">
            <div class="row">
                @Html.Label("Logradouro", new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    @Html.EditorFor(model => model.Endereco.Logradouro, new { htmlAttributes = new { @class = "form-control", @id = "enderecoConstrutora" } })
                    @Html.ValidationMessageFor(model => model.Endereco.Logradouro, "", new { @class = "text-danger" })
                </div>
                @Html.Label("Nº", new { @class = "control-label col-md-1" })
                <div class="col-md-1">
                    @Html.EditorFor(model => model.Endereco.Numero, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Endereco.Numero, "", new { @class = "text-danger" })
                </div>
                <div class="5"></div>
            </div>
        </div>


        <div class="form-group">
            <div class="row">
                @Html.LabelFor(model => model.Endereco.Complemento, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Endereco.Complemento, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Endereco.Complemento, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                @Html.Label("Estado", new { @class = "control-label col-md-2" })
                <div class="col-md-2">
                    @Html.EditorFor(model => model.Endereco.Estado, new { htmlAttributes = new { @class = "form-control", @id = "estadoConstrutora" } })
                    @Html.ValidationMessageFor(model => model.Endereco.Estado, "", new { @class = "text-danger" })
                </div>
                @Html.Label("Cidade", new { @class = "control-label col-md-2" })
                <div class="col-md-2">
                    @Html.EditorFor(model => model.Endereco.Cidade, new { htmlAttributes = new { @class = "form-control", @id = "cidadeConstrutora" } })
                    @Html.ValidationMessageFor(model => model.Endereco.Cidade, "", new { @class = "text-danger" })
                </div>
                <div class="5"></div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-2"></div>
            <div class="col-md-3">
                <input type="submit" value="Salvar" class="btn btn-primary" />
            </div>
            <div class="col-md-7">
                <a href="@Url.Action("Index", "Construtora")" cla class="btn btn-danger">
                    <span class="glyphicon glyphicon-plus-sign" />
                    Cancelar
                </a>
            </div>
        </div>
    </div>
}

And I am calling View with Modal like this: 

    <div class="col-md-4" align="left">
                    @Html.ActionLink(" ", "Adicionar", "Construtora", new { href = "#myModal", data_toggle = "modal",
                                                                            @class = "btn btn-primary glyphicon glyphicon-plus-sign",
                                                                            @id = "btnAddConstrutora",
                                                                            @title="Adicionar Nova Construtora"
               })


<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Cadastrar Nova Construtora</h4>
            </div>
            <div class="modal-body">
                @Html.Partial("~/Views/Construtora/Adicionar.cshtml", new ConstrutoraViewModel());
            </div>
        </div>
    </div>
</div>

I thought about creating a similar method, not removing the redirection. But that would be a rework, and even then, I do not think that is the best option.

Problem summary: I need to run the View of Post on my Action , so it does not refresh the page. You simply close Modal .

  • I'm using Version 3.3.4 of Modal
asked by anonymous 28.04.2015 / 15:53

2 answers

1

Well, the best solution I've found so far is this:

I created a Ajax request, where I call Modal for it, like this: 

  <div class="col-md-4" align="left">
                            @Html.ActionLink(" ", "Adicionar", "Construtora", null, new
                    {
                        id = "btnAddConstrutora",
                        @class = "btn btn-primary glyphicon glyphicon-plus-sign",
                        @title = "Adicionar Nova Construtora"
                    })
<div class="modal fade bs-example-modal-lg" id="dialogDiv" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div id="dialogContent"></div>
</div>


<script type="text/javascript">
    $(function () {

        //Optional: turn the chache off
        $.ajaxSetup({ cache: false });

        $('#btnAddConstrutora').click(function () {
            $('#dialogContent').load(this.href, function () {
                $('#dialogDiv').modal({
                    backdrop: 'static',
                    keyboard: true
                }, 'show');
                bindForm(this);
            });
            return false;
        });
    });

    function bindForm(dialog) {
        $('form', dialog).submit(function () {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    if (result.success) {
                        $('#dialogDiv').modal('hide');
                        // Refresh:
                        // location.reload();
                    } else {
                        $('#dialogContent').html(result);
                        bindForm();
                    }
                }
            });
            return false;
        });
    }

</script>

And in my Controller I simply check if the request is coming from Ajax or not. If so, I know it's from my Modal and I do another treatment for him. In this case, I'm not giving Redirect . Staying like this: 

 public ActionResult Adicionar()
        {
            if (Request.IsAjaxRequest())
            {
                return View("_AdicionarModalPredio");
            }
            return View();
        }
[HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Adicionar(ConstrutoraViewModel construtoraViewModel)
    {
        if (ModelState.IsValid)
        {
            _construtoraAppService.Adicionar(construtoraViewModel);

            if (Request.IsAjaxRequest())
            {
                return Json(new { success = true });
            }
            return RedirectToAction("Index");
        }

        return View(construtoraViewModel);
    }

In this way, I call a PartialView instead of View , only to treat Layout better.

    
28.04.2015 / 20:20
1

One suggestion is to create a void method that executes adicionar , so it will not redirect after insert, and in order to avoid duplication of code the method that redirects can call this method void and then do the targeting.

    
28.04.2015 / 16:15
Fill form dynamically with angularJS Doubt in Creating an app / Server / Notifications