J'ai un bouton dans une page d'une vue. modal est dans une autre page. Je devrais obtenir ce modèle ouvert lorsque le bouton est cliqué. Comment y parvenir? Il y a principalement deux points de vue.
1: addacteur (vue partielle) 2: films.cshtml (vue principale) p>
p>
<div class="modal fade" id="exampleModalactor" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document" id="stylemodel">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="myModalBodyDiv1">
<form id="actorform">
<div class="row">
<div class="col-6">
<b>@Html.DisplayName("Name")</b>
@Html.TextBoxFor(x=>x.name,new {@class="form-control"})
<input type="text" name="name" class="form-control" />
<b>@Html.DisplayName("Sex")</b>
@Html.TextBoxFor(x => x.sex, new { @class = "form-control", @placeholder = "" })
</div>
<div class="col-6">
<b> DOB </b>
@Html.TextBoxFor(x => x.dob, new { @class = "form-control", @placeholder = "plot" })
<b> C </b>
@Html.TextBoxFor(x => x.bio, new { @class = "form-control", @placeholder = "cast" })
</div>
</div>
<input type="submit" name="submit" value="Add actor" />
<a href="#" id="btnsave" class="btn btn-success">Update Changes</a>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" id="saveactor" >Add Actor</button>
</div>
</div>
</div>
</div>4 Réponses :
Essayez ci-dessous le code pour appeler votre mode modal.
$(document).delegate("#btnactor", "click", function () {
$("#exampleModalactor").modal("show");
});
Montrez votre code petit plus de frère. Donc, quelqu'un peut comprendre ce dont vous avez besoin exactement.
Puisque vous ne montrez pas votre vue principale et ci-dessous La configuration doit fonctionner pour afficher la vue partielle modale dans votre vue principale. P > Méthodes d'action strong> p> Vue d'index forte> p> partielle code>, j'ai écrit ci-dessous la réponse à titre d'exemple. <script>
$(document).ready(function () {
$('#btnGetData').click(function () {
var requestUrl = '@Url.Action("GetSomeData", "Home")';
$.get(requestUrl)
.done(function (responsedata) {
console.log("success");
$("#partialViewContent").html(responsedata);
$('#myModal').modal('show')
})
.fail(function () {
alert("error");
})
.always(function () {
console.log("finished");
});
})
});
</script>
Ca ne fonctionne pas. Veuillez vérifier les changements que j'ai faits
Dans vos films.cshtml Vous pouvez simplement utiliser la vue partielle comme, sans aucun besoin d'ajouter un script supplémentaire pour afficher le modal, vous pouvez simplement définir l'attribut de la cible de données et de la bascule de données dans votre bouton.
@section Styles{
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
}
This is movies.cshtml
<button class="btn btn-warning" id="btnactor" data-toggle="modal" data
target="#exampleModalactor">Add Actor</button>
<!-- your modal from partial view will be rendered here.-->
@Html.RenderPartial("Addactor")
@section scripts{
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
}
Tout d'abord, je n'utilise pas View Modal. J'ai créé une vue partielle pour une action. De ma vue principale, je dois appeler le modal situé à la vue partielle en utilisant un bouton clic
dans les films.cshtml Ajoutez la ligne:
@Html.Partial("~/Views/Shared/Addactor.cshtml")
Pourquoi est-ce dans une autre vue? Est la vue modale dans
vue partielle ? , Pouvez-vous ajouter votre point de vue principal et une autre vue à poser pour aider plus loin?@stom yeaa..exactement. Modal est en vue partielle
Pouvez-vous ajouter votre point de vue principal et votre vision partielle à la question pour vous aider davantage?
@stom, je dois appeler modal en partiel à partir de la vue principale. J'ai un bouton dans la vue principale
Créez un fichier de visualisation séparé de bootstrap modal et d'inclure où que vous souhaitiez utiliser.
@jaypatel qui ne fonctionnera pas pour moi. Mis à jour !! S'il vous plaît vérifier
Pouvez-vous s'il vous plaît ajouter où vous rendant cette vision partielle de la vôtre car dans vos films.cshtml je ne peux pas voir @await html.parialasync ("addactor.cshtml") en supposant que votre vue partielle est dans un dossier partagé. Est-ce présent dans votre mise en page principale?
@Piyushsanadhya Il est dans le dossier partagé. Pouvez-vous expliquer l'utilisation de cela
Y a-t-il une erreur ou quelque chose? Veuillez l'élaborer correctement afin que les autres puissent vous aider ...