1

Estoy trabajando con ASP.NET MVC 5 tengo un botón materialize el cual me despliega dos botones de los cuales al hacer clic en uno de ellos me debe llamar a una vista partial como popup. El código de los botones es este:

<div class="row">
    <div class="col-sm-12">
        <div class="action-btn-wrapper">
            <div class="fixed-action-btn my-custom-btn horizontal">
                <a class="btn-floating btn-large red">
                    <i class="large material-icons">mode_edit</i>
                </a>
                <ul>
                    <li><a class="btn-floating red"><i class="material-icons">playlist_add</i></a></li>
                    <li><a class="btn-floating green"><i class="material-icons">play_for_work</i></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Al final del Index tengo este código:

<div id="myModal" class="modal fade in">
<div class="modal-dialog">
    <div class="modal-content">
        <div id="myModalContent"></div>
    </div>
</div>

Ya tengo creada mi vista partial, solo falta llamarla, la vista partial es un Create.

@model Demo.ServiciosDominio.Dtos.ProveedorDto

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>ProveedorDto</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.RazonSocial, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.RazonSocial, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.RazonSocial, "", new { @class = "text-danger" })
        </div>
    </div>

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

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

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

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

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Necesito poner algo en el controller ProveedorController? como un

return PartialView()

Ya puedo llamar al modal pero me sale vacio

<li><a class="btn-floating red" onclick="llamarVistaParcial();" data-toggle="modal" data-target="#myModal"><i class="material-icons">playlist_add</i></a></li>
1
  • 2
    La persona que voto negativo sería bueno que nos explicara el por qué, a mi parecer es una pregunta muy válida
    – Phi
    Commented el 16 feb. 2017 a las 21:28

2 respuestas 2

2

Para llamar una vista parcial, lo haremos modificando solo unas pequeñas partes del código que actualmente tienes, realmente, ya tienes casi todo listo.

Partiendo del hecho que debemos invocar un Html.RenderAction con los parámetros Action y Controller (en este caso le puse de nombre Create a tu Action pero ahí debes poner el adecuado):

<div class="modal-content">
    <div id="myModalContent">
        @{ Html.RenderAction("Create", "Proveedor"); }
    </div>
</div>

El código de tu Controller quedaría de la siguiente forma:

public class ProveedorController: Controller
{
    public ActionResult Create()
    {
        return PartialView("CreatePartialView");
    }
}

Donde CreatePartialView es el nombre de tu vista parcial.

El contenido ese PartialView se va a renderizar en el div <div id="myModalContent">.

9
  • Funciono pero para que sirve esta linea de código entonces en le js function llamarVistaParcial() { var laURLDeLaVista = '@Url.Action("CreatePV", "Proveedor")'; $.ajax({ cache: false, async: true, type: "GET", url: laURLDeLaVista, data: {}, success: function (response) { $('#resultado').html(''); $('#resultado').html(response); } }); Commented el 16 feb. 2017 a las 20:49
  • 1
    Ese código hace una petición ajax y supongo que espera recibir un resultado variable, algo así como un HTML dinámico ya que finalmente el resultado lo pone con $('#resultado').html(response);, es decir, ese resultado se va a renderizar en #resultado :)
    – Phi
    Commented el 16 feb. 2017 a las 20:54
  • No sera que mi vista partial debe tener un id="resultado?" Commented el 16 feb. 2017 a las 20:57
  • Nesecito que funcione con ajax Commented el 16 feb. 2017 a las 21:06
  • 1
    No es necesario, con lo que tienes actualmente te puede funcionar a la perfección. De hecho yo quitaría ese ajax para que no cause conflicto
    – Phi
    Commented el 16 feb. 2017 a las 21:06
0

Lo que necesitas para que funcionen tus botones es agregar el campo de href en el boton haciendo referencia al modal (#myModal) ejem.

<a href='#myModal' class="btn-floating red"><i class="material-icons">playlist_add</i></a>

Ahora, para que la libreria tome ese boton como un modal-trigger es necesario que lo establezcas al cargar la pagina, agrega las siguientes lineas en tu código.

$(document).ready(function() { $('.btn-floating.red').leanModal(); });

$(document).ready(function() {
  $('.btn-floating.red').leanModal();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>

<!-- Modal Trigger -->
<div class="row">
  <div class="col-sm-12">
    <div class="action-btn-wrapper">
      <div class="fixed-action-btn my-custom-btn horizontal">
        <a class="btn-floating btn-large red">
          <i class="large material-icons">mode_edit</i>
        </a>
        <ul>
          <li><a href='#myModal' class="btn-floating red"><i class="material-icons">playlist_add</i></a></li>
          <li><a class="btn-floating green"><i class="material-icons">play_for_work</i></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Modal Structure -->
<div id="myModal" class="modal fade in">
  <div class="modal-dialog">
    <div class="modal-content">
      <div id="myModalContent">Modal Content</div>
    </div>
  </div>

2
  • Creo que la pregunta del OP es respecto a como llamar a una vista parcial (en .NET) desde el botón flotante para mostrar la vista en la modal.
    – gugadev
    Commented el 16 feb. 2017 a las 19:23
  • Estoy llamando una vista parcial modificare la pregunta Commented el 16 feb. 2017 a las 20:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.