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...).
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
Vous devez vous connecter pour publier un commentaire.
Exemple avec un dialogue statique (Sans AJAX)
Définir un
div
pour votre boîte de dialogue contenu dans une vue partielle:Dialogue de déclenchement et vue partielle:
Javascript:
Maintenant, si vous avez plus d'un client sur une page, vous aurez besoin d'une boîte de dialogue par le client. Après quelques clients, il devient laid. Au lieu de cela, remplissez la boîte de dialogue contenu dynamiquement.
Dialogue dynamique de contenu (AJAX)
Boîte de dialogue contenant pour votre partielle est vide au départ:
Obtenir l'partielle via AJAX:
Contenu dynamique (Sans AJAX)
Un autre moyen de remplir la boîte de dialogue serait de remplir la
data
attributs de l'élément déclencheur, puis remplacez le contenu à l'aide de javascript.Vous aurez une liste de déclencheurs. Peut-être que ce jsfiddle de l'aide.
OriginalL'auteur Jasen
Mettre ce contenu dans votre feuille de style
et dans le code suivant
cette logique a fonctionné pour moi. Espérons que cela fonctionne pour vous aussi.
Au lieu d'utiliser
<a href="#close" title="Close" class="close" target="">X</a>
pour la fermeture, il est préférable de vous accédez à un parent de la page à la place.OriginalL'auteur Shiva Saurabh