Affichage de la vue partielle en vue en utilisant mvc 4
Je veux afficher une vue partielle à l'intérieur d'une fenêtre principale en cliquant sur le lien affichage, à l'intérieur de la même page. Aider moi s'il vous plaît, je suis novice en MVC. Est-il un autre moyen de le faire autrement que par l'utilisation de l'Ajax.ActionLink()?
C'est mon Ajouter des Détails contrôleur.
public ActionResult DisplayDetails()
{
SqlConnection connect = new SqlConnection(ConfigurationManager.ConnectionStrings["connect"].ToString());
connect.Open();
DataSet ds = ExecuteQuery("select EmployeeID, EmployeeName, EmailID from EmployeeDetails");
IList<AddDetails> lst = new List<AddDetails>();
AddDetails ad;
foreach (DataRow dr in ds.Tables[0].Rows)
{
ad = new AddDetails();
ad.EmployeeId = Convert.ToInt32(dr["EmployeeID"]);
ad.EmployeeName = dr["EmployeeName"].ToString();
ad.EmailId = dr["EmailID"].ToString();
lst.Add(ad);
}
connect.Close();
return PartialView("DisplayDetails", lst);
}
Ici est la vue principale
AddDetail affichage(affichage principal).
@model mvcEmployeeTask.Models.AddDetails
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
@using (Html.BeginForm("AddDetail", "AddDetails", FormMethod.Post))
{
<table>
@* <tr>
<td>
@(Html.Label("Employee ID : "))
</td>
<td>
@Html.TextBoxFor(model => model.EmployeeId)
@Html.HiddenFor(model => model.EmployeeId)
</td>
</tr>*@
@Html.HiddenFor(model => model.EmployeeId)
<tr>
<td>
@(Html.Label("Employee Name : "))
</td>
<td>
@(Html.TextBoxFor(model => model.EmployeeName))
</td>
</tr>
<tr>
<td>
@(Html.Label("Email ID : "))
</td>
<td>
@(Html.TextBoxFor(model => model.EmailId))
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit" name="Add" />
</td>
<td>
@* @Html.ActionLink("View", "DisplayDetails")*@
@Html.ActionLink("View", "DisplayDetails")
</td>
</tr>
</table>
@Html.Action("DisplayDetails", "AddDetails");
}
Voici la vue partielle (Affichage).
@model IList<mvcEmployeeTask.Models.AddDetails>
@{
Layout = null;
}
@using (Html.BeginForm("DisplayDetails", "AddDetails", FormMethod.Get))
{
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>DisplayDetails</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
</head>
<body> <div class="table" align="center">
<table border="1" >
<tr>
<th>EmployeeID</th>
<th>EmployeeName</th>
<th>Email</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@item.EmployeeId
</td>
<td>
@item.EmployeeName
</td>
<td>
@item.EmailId
</td>
<td>
@Html.ActionLink("Edit", "EditDetails", new { id= item.EmployeeId })
</td>
<td>
@Html.ActionLink("Delete", "DeleteDetails", new { id= item.EmployeeId })
</td>
</tr>
}
</table>
</div>
</body>
</html>
}
S'il vous plaît Aider moi!!
- tout d'abord corriger vos actionlink comme @Html.ActionLink("DisplayDetails", "Vue"), et afin de charger partielle sur cliquez de actionlink alors vous pouvez le faire avec jquery(ajax demande)
- Ok, est-il une autre méthode sans utiliser jQuery? Il y a le même genre de problème. Url est fournie ci-dessous: stackoverflow.com/questions/7295835/...
- sans l'aide de l'ajax d'aides et de jquery.. je ne pense pas que son possible..
- Pouvez-vous en mesure de m'aider? J'ai fait une correction, comme vous l'avez mentionné.
- Vous vue principale a un Modèle plus simple que la Vue partielle (qui est une liste de l'élément unique de la vue principale a). Qui ne semble pas être correcte (il semble à l'envers). pouvez-vous préciser?
- Ouais, TrueBlueAussie. J'ai omis de certaines parties de l'affichage principal. D'éditer et d'afficher les détails.
Vous devez vous connecter pour publier un commentaire.
Vous devez utiliser
Raison:
Ajax.ActionLink est un peu comme le Html.ActionLink contrepartie, il crée également le lien Cliquez ici, mais lorsque l'utilisateur clique dessus et avoir le JavaScript activé sur votre navigateur, Ajax.ActionLink envoie la requête asynchrone au lieu d'accéder à de nouvelles URL. Avec L'Ajax.ActionLink nous préciser quel contrôleur d'action de la méthode à invoquer et de spécifier de quoi faire avec la réponse rentrant de la méthode d'action et il convient à votre cas est vraiment bien.
Au lieu de
Description:
Il va rendre la vue partielle sur le même écran d'index au lieu d'ouvrir une nouvelle fenêtre.
Quelque chose comme cela
Votre Vue Principale
UpdateTargetId
dans unAjaxOptions
paramètre de sorte qu'il sait où placer le contenu retourné?charge div ci-dessous à l'aide de son id d'événement particulier(disons cliquez sur le bouton de votre vue principale) ensuite, vue partielle sera en charge sur votre fenêtre principale.
@Html.Partial
rend une vue partielle sur côté serveur avant que la page est renvoyée.$("#loadpartialview").show();
sera pas la cause de la charge lorsqu'il est indiqué. Il va juste montrer la div (en supposant qu'il était caché, que votre exemple ne fait pas mention).est sympa tutoriel comment mettre en œuvre:
http://mvc4beginner.com/Tutorial/MVC-Partial-Views.html
La version simple de code est
Théorie:
Pour l'avoir, dynamique, vous avez besoin créer appel ajax pour rendre l'action sur le serveur et d'insérer le résultat de la page.
la question de savoir comment mettre en œuvre ce qui a été déjà répondu ici:
MVC vue Partielle avec le contrôleur, ajax - comment puis-je ge partielle contrôleur pour obtenir des données?
Ajax.ActionLink
est une solution appropriée ici.