Home Modal Bootstrap on ASP.NET MVC
Reply: 0

Modal Bootstrap on ASP.NET MVC

lorranpalmeira
1#
lorranpalmeira Published in 2017-11-13 20:02:14Z

I trying to do a responsive async page with Modal bootstrap, it´s things all right, although when a save object on modal form, is did a update, but the return is to a json page:

The Controller Method returns a Json

using CaelumEstoque.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace CaelumEstoque.Controllers
{
    public class ProdController : Controller
    {


        public static List<Prod> _listaProdutos = new List<Prod>()
        {
            new Prod { Codigo=01, Descricao="Produto 1", Preco=10 },
            new Prod { Codigo=02, Descricao="Produto 2", Preco=15 },
            new Prod { Codigo=03, Descricao="Produto 3", Preco=20 }
        };

        public ActionResult Index()
        {

            IList<Prod> lista = _listaProdutos;

            return View(lista);
        }


        public ActionResult Details(int id)
        {

            var existe = _listaProdutos.Find(x => x.Codigo == id);

            ViewBag.Detalhes = existe;
            return View("parcial", existe);
        }

        public ActionResult Edit(int id)
        {
            var existe = _listaProdutos.Find(x => x.Codigo == id);

            return View(existe);
        }

        public ActionResult ParcialEdit(Prod p)
        {
            var registro = _listaProdutos.Find(x => x.Codigo == p.Codigo);
            registro.Descricao = p.Descricao;
            registro.Preco = p.Preco;

            return Json(registro);
        }

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

My Model:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace CaelumEstoque.Models
{
    public class Prod
    {

        public int Codigo { get; set; }

        public string Descricao { get; set; }

        public double Preco { get; set; }
    }
}

Index View:

@model IEnumerable<CaelumEstoque.Models.Prod>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Codigo)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Descricao)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Preco)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr id="prod@(item.Codigo)">
            <td>
                @Html.DisplayFor(modelItem => item.Codigo)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Descricao)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Preco)
            </td>
            <td>
                <a href="#" class="btn btn-default details" data-url="@Url.Action("Details", "Prod", new { id = item.Codigo })">Detalhe</a>
                <a href="#" class="btn btn-primary edit" data-url="@Url.Action("Edit", "Prod", new { id = item.Codigo })"><i class="glyphicon glyphicon-edit"></i></a>
                @*<button class="btn btn-default details" data-id="@item.Codigo"><i class="glyphicon glyphicon-file"></i></button>
                    <button class="btn btn-danger delete" data-id="@item.Codigo"><i class="glyphicon glyphicon-trash"></i></button>
                    <button class="btn btn-primary edit" data-id="@item.Codigo"><i class="glyphicon glyphicon-edit"></i></button>*@


            </td>
        </tr>
    }
</table>

<div class="modal" id="modal">

</div>


<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>


    $(function () {
        $('.details').click(function () { // class name selector
            var url = $(this).data('url'); // use data(), not attr()
            $("#modal").load(url, function () {
                $("#modal").modal("show");
            })
        });
    })

    /*
    $(".edit").click(function () {
        var url = $(this).data('url'); // use data(), not attr()
        $("#modal").load(url, function () {
            $("#modal").modal("show");
        })
        
    })
    */
    $("#.edit").click(function () {

        $.ajax({
            type: "POST",
            url: "",
            data: $('#modal').serialize(),
            success: function (data) {
                alert('Registro salvo com sucesso.');
                $('#modal').modal('hide');
            },
            error: function (data) {
                alert('Erro ao Salvar Registro.');
            }
        });
    });
    



</script>

Modal View:

@model CaelumEstoque.Models.Prod
@{
    Layout = null;
}


<div class="modal-dialog">
    <div class="modal-content">
        @using (Ajax.BeginForm("ParcialEdit", "Prod", new AjaxOptions { UpdateTargetId = "Error", InsertionMode = InsertionMode.Replace, OnSuccess = "OnSuccess(data)" }))

        {
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Editar produto</h4>
            </div>

            <div class="modal-body">
                <div class="form-horizontal">
                    @Html.ValidationSummary(true)
                    <div class="form-group">
                        @Html.LabelFor(model => model.Codigo, new { @class = "control-label col-md-3" })
                        <div class="col-md-9">
                            @Html.TextBoxFor(model => model.Codigo, new { @class = "form-control", @readonly = "readonly" })
                            @Html.ValidationMessageFor(model => model.Codigo)
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Descricao, new { @class = "control-label col-md-3" })
                        <div class="col-md-9">
                            @Html.TextBoxFor(model => model.Descricao, new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.Descricao)
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Preco, new { @class = "control-label col-md-3" })
                        <div class="col-md-9">
                            @Html.TextBoxFor(model => model.Preco, new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.Preco)
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="submit" value="Salvar" class="btn btn-primary salvar" />
                @*<input type="button" value="Salvar" class="btn btn-primary salvar" data-url="@Url.Action("ParcialEdit", "Prod", new {p =  Model })" /> *@
                <input type="button" value="Cancelar" class="btn btn-default" data-dismiss="modal" />
            </div>
        }
    </div>
</div>

<script>
  

</script>

I want to know what is my mistake Thank you

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.307931 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO