2012-07-18 32 views
8

Ok, así que estoy tratando de averiguar cómo llamar correctamente a una ventana emergente modal para mi página utilizando controladores de acuerdo con la sugerencia de este postMVC C emergente # modal

ASP.NET MVC modal dialog/popup best practice

y un poco utilizaron este:

http://microsoftmentalist.com/2011/09/14/asp-net-mvc-13-open-window-or-modal-pop-up-and-fill-the-contents-of-it-from-the-controller-method/

Tengo una vista que tiene una lista desplegable, si el usuario no puede encontrar el elemento/valor que está buscando, puede sugerir un valor (sugerir un nuevo enlace de valor) que se supone llamar al control y devuelve una página emergente con un par de campos.

Acá los objetos de la vista:

<script type="text/javascript"> 

     loadpopup = function() 
     { 
window.showModalDialog(‘/NewValue/New′ , "loadPopUp", ‘width=100,height=100′); 
     } 

    </script> 


<%: Html.DropDownList(model => model.ValueId, new selectlist........... %> 
<%: Html.ActionLink("Suggest Value", "New", "NewValue", null, new { onclick = 'loadpopup()') %> 

El controlador que tengo la intención de utilizar para volver a la página:

public class NewValueController : Controller{ 
    public Actionresult New(){ 
     return View(); 
    } 
} 

Ahora estoy atascado. Quería devolver una página donde pueda formatearla, ¿tengo que devolver una cadena? ¿No puedo devolver un aspx (engin i use) en su lugar, ya que el formateo sería más fácil?

Cualquier consejo sobre a qué dirección debo ir es muy apreciado.

Gracias!

Respuesta

17

Puede usar el jquery UI Dialog para la ventana emergente. Vamos a tener una pequeña configuración aquí.

Tendríamos un modelo de vista de la forma principal:

public class MyViewModel 
{ 
    public string ValueId { get; set; } 
    public IEnumerable<SelectListItem> Values 
    { 
     get 
     { 
      return new[] 
      { 
       new SelectListItem { Value = "1", Text = "item 1" }, 
       new SelectListItem { Value = "2", Text = "item 2" }, 
       new SelectListItem { Value = "3", Text = "item 3" }, 
      }; 
     } 
    } 

    public string NewValue { get; set; } 
} 

un controlador:

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(new MyViewModel()); 
    } 

    [HttpPost] 
    public ActionResult Index(MyViewModel model) 
    { 
     return Content("thanks for submitting"); 
    } 
} 

y una vista (~/Views/Home/Index.aspx):

<%@ Page 
    Language="C#" 
    MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="System.Web.Mvc.ViewPage<AppName.Models.MyViewModel>" 
%> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

    <% using (Html.BeginForm()) { %> 
     <%= Html.DropDownListFor(x => x.ValueId, Model.Values) %> 
     <br/> 
     <%= Html.EditorFor(x => x.NewValue) %> 
     <%= Html.ActionLink("Suggest Value", "New", "NewValue", null, new { id = "new-value-link" }) %> 
     <button type="submit">OK</button> 
    <% } %> 

    <div id="dialog"></div> 

</asp:Content> 

entonces podríamos tener cuidado de la ventana emergente. Se define un modelo de vista para ello:

public class NewValueViewModel 
{ 
    public string Foo { get; set; } 
    public string Bar { get; set; } 
} 

un controlador:

public class NewValueController : Controller 
{ 
    public ActionResult New() 
    { 
     return PartialView(new NewValueViewModel()); 
    } 

    [HttpPost] 
    public ActionResult New(NewValueViewModel model) 
    { 
     var newValue = string.Format("{0} - {1}", model.Foo, model.Bar); 
     return Json(new { newValue = newValue }); 
    } 
} 

y una vista correspondiente parcial (~/Views/NewValue/New.ascx):

<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.NewValueViewModel>" 
%> 

<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "new-value-form" })) { %> 
    <%= Html.EditorFor(x => x.Foo) %> 
    <%= Html.EditorFor(x => x.Bar) %> 
    <button type="submit">OK</button> 
<% } %> 

Ahora todo lo que queda es escribir un poco de javascript para cablear todo. Incluimos jQuery y jQuery UI:

<script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script> 
<script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.11.js") %>" type="text/javascript"></script> 

y una costumbre Javascript archivo que contendrá nuestro código:

$(function() { 
    $('#new-value-link').click(function() { 
     var href = this.href; 
     $('#dialog').dialog({ 
      modal: true, 
      open: function (event, ui) { 
       $(this).load(href, function (result) { 
        $('#new-value-form').submit(function() { 
         $.ajax({ 
          url: this.action, 
          type: this.method, 
          data: $(this).serialize(), 
          success: function (json) { 
           $('#dialog').dialog('close'); 
           $('#NewValue').val(json.newValue); 
          } 
         }); 
         return false; 
        }); 
       }); 
      } 
     }); 
     return false; 
    }); 
}); 
+0

intentado pero atm, en lugar de ello a aparecer, sólo se abre una nueva pagina. se preguntaba, ¿qué parte del jquery desencadena el modal? – gdubs

+0

Es la suscripción al evento '.click()' del enlace.Asegúrate de haber incluido correctamente los 3 archivos javascript ('jquery-1.5.1.min.js',' jquery-ui-1.8.11.js' y 'my.js' - que contienen el script que he mostrado en ese orden) y que no hay errores en la consola javascript. –

+0

vio el problema, era primo de un '});' jaja! ¡gracias de nuevo! – gdubs

-2
$('#CheckGtd').click(function() { 
    if ($(this).is(":checked")) 
     $("#tbValuationDate").attr("disabled", false); 
    else 
     $("#tbValuationDate").attr("disabled", "disabled"); 
}); 
Cuestiones relacionadas