web-dev-qa-db-fra.com

Ouvrez la boîte de dialogue jQuery en cliquant sur Html.ActionLink + MVC4

J'ai une vue qui montre la liste des partis . Chaque parti a un ActionLink.

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

Mon lien d'action mène à l'action de modification et affiche une vue de l'éditeur.

L'idée principale est que, au clic de l'ActionLink, une boîte de dialogue jQuery devrait apparaître avec la vue Editeur et toute modification de la vue devrait être enregistrée dans la base de données.

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

Si la même chose peut être obtenue sans utiliser ActionLink, c'est également utile.

jqueryasp.net-mvc-4razor
11
mmssaann

Vous pouvez demander à votre action de renvoyer une vue partielle au lieu d'une vue complète, puis de lire la documentation du jQuery UI dialog et d'écrire le code nécessaire.

Commencez par donner un cours à votre ancre:

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

définir un espace réservé pour votre dialogue:

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

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

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

et enfin écrire le 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>

Inutile de dire que vous devez inclure le script jQuery ui après jquery ainsi que les feuilles de style nécessaires.

26
Darin Dimitrov

tu peux faire comme si 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
1
Aravind Kb

Vous n'avez pas besoin de faire tout ce bazar, 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 triche clé ici est l'attribut href.

Notez également que vous pouvez ajouter la boîte de dialogue à la page de votre choix 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 incluez ensuite les éléments suivants dans votre _Layout.cshtml:

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

Travaille pour moi :)

0
Orbitz