Intereting Posts

jQuery remplace le texte en laissant les frères et soeurs intacts Obtenir dynamicment le nom du groupe de boutons radio à l’aide de jQuery jQuery Submit Rafraîchissant Page Toute émulation ou alternative de fonction jquery en direct qui ajoute un listner à la fois pour les éléments présents et futurs La fenêtre modale de Joomla supprimant les noms d’identifiant et de classe Problème Fancybox sur iPhone Centrer un div sur l’écran même lorsque la page est déroulable Fuseaux horaires jquery datepicker dropzone js pour lier supprimer l’URL avec le bouton Supprimer Jquery .width () donnant des valeurs différentes sur chrome et firefox DataTables: le sorting par ordre numérique ne fonctionne pas? Flip div avec deux côtés de HTML Impossible de soumettre mon formulaire modal dans Bootstrap Jquery toastr onHidden, fonction ajout d’un champ de saisie de texte via js ou jQuery lors d’un clic sur un autre champ de saisie dans les rails 3

extensible dans une application Web ASP .NET MVC

Dans l’action Details de PersonController je souhaite afficher toutes les informations relatives à l’object Person .

Au départ, je veux seulement montrer quelques informations sur la Person et le rest sera réduit, puis je veux cliquer sur un bouton / une flèche / quoi que ce soit et le rest des informations se développera.

Avant de cliquer sur le bouton / la flèche / quel que soit le type de données chargé, mais simplement masqué Si je ne suis pas obligé, je ne veux pas utiliser AJAX (je ne le connais pas bien).

Les dessins montrent ce que je veux dire.

AVANT CLIQUEZ

entrez la description de l'image ici

APRÈS CLIQUER

entrez la description de l'image ici

En ce moment, la vue Details ressemble à ça:

 @model WebApplication2.Models.Person @{ ViewBag.Title = "Details"; } Details
  Person
 
   @Html.DisplayNameFor(model => model.FirstName) 
  @Html.DisplayFor(model => model.FirstName) 
  @Html.DisplayNameFor(model => model.LastName) 
  @Html.DisplayFor(model => model.LastName) 
  @Html.DisplayNameFor(model => model.CellNumber) 
  @Html.DisplayFor(model => model.CellNumber) 
  @Html.DisplayNameFor(model => model.SecondaryPhoneNumber) 
  @Html.DisplayFor(model => model.SecondaryPhoneNumber) 
  @Html.DisplayNameFor(model => model.Address) 
  @Html.DisplayFor(model => model.Address) 
  @Html.DisplayNameFor(model => model.BirthDate) 
  @Html.DisplayFor(model => model.BirthDate) 
  @Html.DisplayNameFor(model => model.Pesel) 
  @Html.DisplayFor(model => model.Pesel) 
  @Html.DisplayNameFor(model => model.Notes) 
  @Html.DisplayFor(model => model.Notes)

EDIT: La solution originale de Pragnesh Khalas a fonctionné à merveille, mais je voulais faire passer l’object Person entière à une vue partielle. J’ai donc modifié le script en remplaçant:

  data: { parentEls: '@Model.FirstName' }

avec

 data: { person: '@Model' }

et dans le contrôleur:

  [HttpPost] public ActionResult Test(Person person) { System.Diagnostics.Debug.WriteLine("PASSED: " + person); return PartialView(person); }

mais Person person dans l’action de Test est null part que tout fonctionne. Pourquoi (modèle) n’a pas été adopté?

Code complet:

Scénario:

  function BtnOnclick() { $.ajax({ type: 'POST', url: '@Url.Content("~/Person/Test")', data: { person: '@Model' }, success: function (data) { $('#divpopup').css("display", "block"); $('#btnExpand').css("display", "none"); $('#divpopup')[0].innerHTML = data; } }); } function CollapseDiv() { $('#divpopup').css("display", "none"); $('#btnExpand').css("display", "block"); }

Vue:

Action du contrôleur:

  [HttpPost] public ActionResult Test(Person person) { // ViewBag.Chk = parentEls; System.Diagnostics.Debug.WriteLine("PASSED: "); System.Diagnostics.Debug.WriteLine(person.FirstName); return PartialView(person); } }

Vue partielle:

 @model WebApplication2.Models.Person 
 Survey 1
   @Html.DisplayNameFor(model => model.Notes) 
  @Html.DisplayFor(model => model.Notes)

Si vous avez besoin d’afficher une vue partielle dans la vue principale, utilisez donc ajax dans ce cas.

En utilisant ajax, vous serez en mesure d’appeler la méthode d’action et de renvoyer une vue partielle. De plus, dans l’action vue partielle, vous pourrez transmettre la valeur de votre choix à partir de la vue principale.

Consultez ci-dessous des exemples, cela vous aidera.

 //==Your Code in main View============  @Html.DisplayFor(model => model.Notes) 
 //==Your Code============ //============Added   
  
 //============Added

Lorsque vous cliquez sur le bouton Expand, appelez la fonction javascript BtnOnclick et définissez cette vue partielle dans divpopup div.

Comme ci-dessous script: –

Au-dessus de l’appel ajax, vous pourrez transmettre n’importe quelle valeur à l’action Test. Dans l’exemple ci-dessus, transmettez le prénom des propriétés du modèle.

Vue partielle (côté contrôleur): –

 [HttpPost] public ActionResult Test(ssortingng parentEls) { ViewBag.Chk = parentEls; return PartialView(); }

Vue partielle (vue latérale):

 
 Partial View
 @ViewBag.Chk

Malheureusement, vous devrez le faire avec Javascript. Cela peut être réalisé avec une relative facilité, cependant. Dans mon exemple, je me sers de jQuery, qui est beaucoup plus puissant qu’un simple Javascript. Je vous recommande vivement de le prendre si vous envisagez de travailler avec des projets Web.

Assurez-vous de rendre le partiel dans une div avec un identifiant, par exemple:

A votre avis:

  @Html.RenderPartial("_DetailsDropDown", personModel)

Dans votre section / fichier Javascript:

 $("div#details").click(function() { if ($("div#details").hasClass("hidden")) { $("div#details").removeClass("hidden"); } else { $("div#details").addClass("hidden"); } });

Cela utilise une classe ‘cachée’, qui peut être définie dans votre CSS comme ceci:

 div.hidden { display: none; }

Notez que vous pouvez attacher l’événement click à tout ce que vous voulez, comme un bouton ou un lien, ou au div lui-même (comme je l’ai fait dans l’exemple).

Ensuite, vous ajoutez une vue partielle dans Views / Shared / et vous la nommez comme suit: _PersonDropDown.cshtml et vous remplacez votre commentaire dans la vue Détails par:

 @Html.RenderPartial("_PersonDropDown", yourModel)

ou s’il s’agit d’une méthode Action qui renvoie un résultat HTML partiel, vous utilisez:

 @Html.RenderAction("methodNameThatRendersPartialView")

Mais vous devez toujours faire le contenu compressible vous-même dans la vue partielle. Bonne chance!