javascript/jquery modal popup MVC 4 / render vue partielle

J'ai été en utilisant le DevExpress PopupControl. Ils ont l'air sympa et jolie, mais ils ne pas afficher les barres de défilement sur les appareils iOS/Android. Je tiens donc à trouver une alternative. Mon utilisation immédiate est juste pour l'affichage d'une vue partielle, en lecture seule et un bouton de fermeture.

Je ne suis pas familier avec jquery donc je vais avoir du mal à rassembler tous les différents messages sur ce sujet.

Mon index.cshtml est un portail avec de nombreuses vues partielles. L'une des vues partielles sur une liste de clients. Le nom du client est un lien vers un client de détail. C'est là que j'ai besoin de la boîte de dialogue contextuelle.

Vue partielle avec la liste des clients (note le lien appelle une fonction javascript en passant l'ID que je voudrais voir:

<table style="text-align: left;">
    @if ((Model != null) && (Model.Items != null))
    {
        foreach (WebMVC.Models.VisitDetails p in Model.Items)
        {                       
            sTime = p.StartTime.ToString("MM/dd") + " " + p.StartTime.ToShortTimeString().PadLeft(8,'_') + " - " + p.EndTime.ToShortTimeString().PadLeft(8,'_');

            <tr>
                <td style="width: auto">
                    @Html.DevExpress().HyperLink(
                        settings =>
                        {
                            settings.Name = "indexHyperLinkClient" + p.VisitID.ToString();
                            settings.Properties.Text = @p.NameNumZone;
                            settings.Properties.ClientSideEvents.Click = 
                                string.Format("function(s, e) {{ MethodClient('{0}'); }}", p.Account);
                        }
                    ).GetHtml()
                </td>
            </tr>
        }
    }
</table>

actuel javascript dans la page d'index.cshtml qui gère le popup:

<script type="text/javascript">
    var _clientId;
    function MethodClient(clientid) {
        _clientId = clientid;
        popClient.PerformCallback();
        popClient.Show();
    }

    function OnBeginCallbackClient(s, e) {
        e.customArgs["clientid"] = _clientId;
    }
<script type="text/javascript">

popClient est la zone de dialogue que je veux remplacer. Je voudrais la boîte de dialogue à une hauteur spécifique, indépendamment de la taille du contenu.

exemple de la vue partielle pour être affiché dans la boîte de dialogue:

@model WebMVC.Models.ClientDetail

@{
    DateTime now = DateTime.Today;
    int age = now.Year - Model.Birthdate.Year;
    if (Model.Birthdate > now.AddYears(-age))
    {
        age--;
    }

    string sBirthdate = Model.Birthdate.ToShortDateString() + "  (Age: " + age + ")";
}

<div id="contentDiv">
    <span class="display-label">@Html.DisplayNameFor(model => model.NameNumZone):</span>
    <span class="display-field">@Html.DisplayFor(model => model.NameNumZone)</span>
    <br />

    <span class="display-label">@Html.DisplayNameFor(model => model.Sex):</span>
    <span class="display-field">@Html.DisplayFor(model => model.Sex)</span>
    <br />

    <span class="display-label">@Html.DisplayNameFor(model => model.Birthdate):</span>
    <span class="display-field">@Html.DisplayFor(model => @sBirthdate)</span>
    <br />

    <span class="display-label">@Html.DisplayNameFor(model => model.Address):</span>
    <span class="display-field">@Html.DisplayFor(model => model.Address)</span>
    <br />
</div>

Contrôleur:

public ActionResult Details()
{
    string id = "";
    if (!string.IsNullOrEmpty(Request.Params["clientid"]))
        id = Request.Params["clientid"];

    int clientid = 0;
    if (id != "")
        clientid = Convert.ToInt32(id);

    ClientDetail cl;
    if (clientid != 0)
        ClientDetail cl = GetClientDetails(clientid);
    else
       ClientDetail cl = new ClientDetail();

    return PartialView("ClientPopupPartial", cl);
}

Peut, j'ai une liste déroulante et afficher différentes vues partielles (peut-être en ajoutant une codé en dur param tels que la superficie = 1, = 2 pour la méthode de l'appel du client)? Ou devrait-il y avoir un popup pour chaque zone de détail (client, visiter, directions...).

Avant de s'inquiéter de multiples jQuery modaux, êtes-vous réussi à faire le premier travail? Les deux cas que vous avez définies sont possibles, mais distinct des modaux sera le plus facile de cas. La réutilisation d'un modal aura probablement besoin de jQuery, les appels ajax pour charger le pop up div.
Non, je ne sais pas par où commencer. Puis-je réécrire ma fonction javascript "MethodClient" à l'appui d'un nouveau pop-up ou dois-je utiliser un contrôleur? J'ai parlé de "plusieurs requêtes auxiliaires modaux", de sorte que ce qui peut être conçu correctement dès le début.

OriginalL'auteur Gina Marano | 2013-05-16