Ouvrir jQuery boîte de dialogue, cliquez sur Html.ActionLink + MVC4

J'ai une vue qui affiche la liste des parties.
chaque partie a un ActionLink.

@Html.ActionLink("Edit", "Edit", new { id = 234 })

Mon lien d'action passe à l'action modifier et rend une vue de l'éditeur.

L'idée principale est, sur un clic de la ActionLink, jQuery boîte de dialogue devrait apparaître avec affichage de l'éditeur et toute modification dans la vue doit être enregistré dans la base de données.

Mon problème est que je ne sais pas comment ouvrir un affichage jQuery boîte de dialogue. Alors, comment voulez-vous ouvrir une vue dans un dialogue jQuery?

Si la même chose peut être réalisé sans l'aide de ActionLink, qui est également utile.

OriginalL'auteur mmssaann | 2013-07-12

  1. 26

    Vous pourriez avoir votre action de retour une vue partielle au lieu de plein la vue, alors lisez la documentation de la jQuery UI dialog et enfin écrire le code nécessaire.

    Commencez par donner à votre point d'ancrage d'une classe:

    @Html.ActionLink("Edit", "Edit", null, new { id = 234 }, new { @class = "modal" })

    définir un espace réservé pour votre boîte de dialogue:

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

    assurez-vous que votre contrôleur de l'action est de retour d'une vue partielle:

    public ActionResult Edit(int id)
{ 
    MyViewModel model = ...
    return PartialView(model);    
}

    et enfin écrire le code javascript pour le faire vivre:

    <script type="text/javascript">
    $(function () {
        $('#my-dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            modal: true
        });

        $('.modal').click(function() {
            $('#my-dialog').load(this.href, function() {
                $(this).dialog('open');
            });
            return false;
        });
    });
</script>

    Il va sans dire que vous devez inclure le script jQuery ui après jquery ainsi que les feuilles de style.

    Grâce Darin.il a vraiment travaillé
    J'ai trouvé ce message utile. Cependant, notez qu'il est important de veiller à un autre nom de la classe que de simplement 'modal' si l'on utilise des bibliothèques comme bootstrap, vous trouverez vous-même perdre la raison. Ce qui m'est arrivé, et sur le changement du nom (je inclure bootstrap), la solution fonctionne.

    OriginalL'auteur Darin Dimitrov

  2. 1

    vous pouvez faire comme ce simple

    formatter: function (cellvalue, options, rowObject) {
                    var x = '@Html.ActionLink("Col", "Index", "Lists", new { id = "listvalid" }, new { @style = "color:black;font-weight:bold;" })';
                    return x.replace("listvalid", rowObject.list_key).replace("Col", rowObject.list_name);
                }, sortable: true, align: 'left', width: 200, editable: true

    OriginalL'auteur Aravind Kb

  3. 0

    Vous n'avez pas besoin de faire tout ce que déconner, essayez quelque chose comme:

    @Html.ActionLink("Open Dialog", null, null, null, 
      new { data_role = "button", data_inline = true, data_rel = "dialog", 
            data_transition = "pop", href="#dialogId" })

    La clé de tricher ici est la href attribut.

    Également de garder à l'esprit que vous pouvez ajouter la boîte de dialogue de votre page désirée comme suit:

    @section dialogPages {
    &lt;div data-role="page" id="dialogId"&gt;
        &lt;div data-role="header"&gt;
        &lt;/div&gt;
        &lt;div data-role="content"&gt;
       &lt;/div&gt;
        &lt;div data-role="footer"&gt;
       &lt;/div&gt;
    &lt;/div&gt;
}

    Et ensuite inclure les éléments suivants dans votre _Layout.cshtml:

    @if (IsSectionDefined("dialogPages"))
{
    @RenderSection("dialogPages")
}

    Fonctionne pour moi 🙂

    OriginalL'auteur Orbitz