MVC C# modal popup

ok donc je vais essayer de comprendre comment l'appeler correctement modal popup pour ma page à l'aide des Contrôleurs par ce post suggestion

ASP.NET MVC boîte de dialogue modale/popup meilleures pratiques

et un peu utilisé cette:

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/

J'ai une vue qui a un dropdownlist, si l'utilisateur ne peut pas trouver l'élément /la valeur qu'il/elle est à la recherche d', il peut proposer une valeur (de suggérer de nouvelles de la valeur de lien) qui est censé appeler le contrôleur et le retour d'un popup page avec un couple de champs.

Voici les objets de la vue:

<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()') %>

Le contrôleur que j'ai l'intention d'utiliser pour retourner à la page:

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

Maintenant je suis coincé. Je voulais revenir sur une page où je peux le formater, dois-je retourner une chaîne de caractères ? je ne peux pas retourner un aspx (engin que j'utilise) au lieu de cela, car la mise en page qu'il serait plus facile?

Des conseils quant à la direction que je devrais aller est très apprécié.

Merci!

OriginalL'auteur gdubs | 2012-07-18

  1. 17

    Vous pouvez utiliser le jquery UI Dialog de la fenêtre contextuelle. Nous allons avoir une petite installation ici.

    Nous avons un modèle d'affichage pour le formulaire 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 contrôleur:

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

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

    et d'une vue (~/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>

    puis nous avons pu prendre soin de la fenêtre contextuelle. Nous définissons un modèle de vue:

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

    un contrôleur:

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

    et une vue partielle (~/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>
<% } %>

    Maintenant tout ce qui reste est d'écrire un peu de code javascript pour fil de tout ce. Nous inclure jquery et 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>

    et une coutume fichier javascript qui contient notre code:

    $(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;
    });
});
    il a essayé, mais atm, au lieu d'éclater, il vient d'ouvrir une nouvelle page. je me demandais, quelle partie de l'jquery déclenche le modal?
    C'est l'abonnement à la .click() cas de le lien. Assurez-vous que vous avez inclus tous les 3 fichiers javascript (jquery-1.5.1.min.js, jquery-ui-1.8.11.js et my.js contenant le script que j'ai montré dans cet ordre) et qu'il n'y a pas d'erreurs dans la console javascript.
    vu le problème, c'était parce que d'un supplément '});' lol! merci encore!
    btw, désolé pour les questions de suivi. mais,je voulais mettre à jour le <%= Html.DropDownListFor(x => x.ValueId, Modèle.Les valeurs) %>avec la Nouvelle Valeur que j'ai ajouté.Sera le retour Json(new { newValue = newValue }); gérer cela? comment peut-elle devenir un selectlistitem pour la liste déroulante, juste curieux.
    Vous pouvez ajouter un nouveau <option> élément de la liste déroulante dans le gestionnaire de succès au lieu de définir la NewValue champ.

    OriginalL'auteur Darin Dimitrov

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

    OriginalL'auteur narsimhareddy venna