Ajax demande pour aller chercher vue partielle

Question

je moi principale comme ceci:

<% @ Page Titre = "" Language = "C#" MasterPageFile = "~/Vues/Shared/Site.master" Inherits = » System.Web.Mvc.ViewPage » %>

Index

<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script> 

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script> 

<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> 

<h2> 
    Index</h2> 

<script type="text/javascript"> 
    $(function() { 
     $('#mylink').click(function() { 
      $('#resultpartial1').load(this.href); 
      return false; 
     }); 
    }); 

    $(function() { 
     $('#mysecondlink').click(function() { 
      $('#resultpartial1').load(this.href, { id: 123 }); 
      return false; 
     }); 
    }); 
</script> 

<%= Html.ActionLink("click me","Partial1","Foo",new MyViewModel { Foo = "123" , Bar="456" },new { id = "mylink" }) %> 
<%= Html.ActionLink("click me second link","Partial2", "Foo", new { id = "123" }, new { id = "mysecondlink" } 

)%>

et contrôleur comme ceci:

public class FooController : Controller 
{ 
    // 
    // GET: /Foo/ 

    public ActionResult Index() 
    { 
     return View(); 
    } 

    public ActionResult Partial1(string id) 
    { 
     // TODO: use the id to fetch the model from somewhere 
     MyViewModel model = new MyViewModel { Bar = "a", Foo = "1" }; 
     return View(model); 
    } 

    public ActionResult Partial2(string id) 
    { 
     // TODO: use the id to fetch the model from somewhere 
     MyViewModel model = new MyViewModel { Bar = "b", Foo = "2" }; 
     return View(model); 
    } 
} 

}

offre une vue partielle comme celle-ci:

<% @ Control Language = "C#" Inherits = "System.Web.Mvc.ViewUserControl" % >

Foo: Bar:

<% @ Control Language = "C#" Inherits = "System.Web.Mvc.ViewUserControl "%>

Foo: Bar:

Je suis toujours reçois des valeurs fixées par les actions du contrôleur. Je veux définir les valeurs en vue et passer en vue partielle. Comment puis-je faire ceci ?

Answer 1

En supposant que vous avez un modèle de vue

public class MyViewModel 
{ 
    public string Foo { get; set; } 
    public string Bar { get; set; } 
} 

et un contrôleur:

public class FooController: Controller 
{ 
    public ActionResult Partial1(string id) 
    { 
     // TODO: use the id to fetch the model from somewhere 
     MyViewModel model = ... 
     return View(model); 
    } 

    public ActionResult Partial2(string id) 
    { 
     // TODO: use the id to fetch the model from somewhere 
     SomeOtherViewModel model = ... 
     return View(model); 
    } 

} 

une vue partielle correspondante:

<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.MyViewModel>" 
%> 
<div>Foo: <%= Html.DisplayFor(x => x.Foo) %></div> 
<div>Bar: <%= Html.DisplayFor(x => x.Bar) %></div> 

et enfin dans votre vue principale vous pourriez avoir un lien:

<%= Html.ActionLink(
    "click me", 
    "Partial1", 
    "Foo", 
    new { id = "123" }, 
    new { id = "mylink" } 
) %> 
<div id="resultpartial1" /> 

qui pourrait être AJAXified:

$(function() { 
    $('#mylink').click(function() { 
     $('#resultpartial1').load(this.href); 
     return false; 
    }); 
}); 

Maintenant, bien sûr, si le paramètre id est connu uniquement avec javascript vous pouvez le faire:

<%= Html.ActionLink(
    "click me", 
    "Partial1", 
    "Foo", 
    null, 
    new { id = "mylink" } 
) %> 

puis:

$(function() { 
    $('#mylink').click(function() { 
     $('#resultpartial1').load(this.href, { id: 123 }); 
     return false; 
    }); 
}); 

---

MISE À JOUR:

Et pour le deuxième lien:

<%= Html.ActionLink(
    "click me second link", 
    "Partial2", 
    "Foo", 
    new { id = "123" }, 
    new { id = "mysecondlink" } 
) %> 
<div id="resultpartial2" /> 

puis:

$(function() { 
    $('#mysecondlink').click(function() { 
     $('#resultpartial2').load(this.href, { id: 123 }); 
     return false; 
    }); 
}); 

Answer 2

Ce qui semble être le problème?

modèle avec les deux liens doivent être (si vous utilisez jQuery):

$(function(){ 
    // attach link clicking functionality to call controller action via Ajax 
    $("#LinkID").click(function(evt) { // reference 1 below 
     evt.preventDefault(); 
     $.ajax({ 
      type: "GET", 
      url: $(this).attr("href"), // if link has the correct URL 
      success: function(data) { 
       $("#containerID").append(data); 
      }, 
      error: function(xhr, status, err) { 
       // Handle error ie. alert() 
      } 
     }); 
    }); 

    // add code for the second link 
}); 

Si les deux liens fonctionnent de la même, alors vous pouvez changer sélecteur ligne référence 1 pour inclure les liens qu'il contient. Mais s'ils fonctionnent avec un conteneur différent, vous pouvez ajouter un sélecteur de conteneur en tant qu'attribut personnalisé au lien et utiliser uniquement une fonctionnalité unique. Changez le code en conséquence.

Vous pouvez placer des liens sur votre écran principal en utilisant l'habituel

<%= Html.ActionLink("Link text", "action", "controller", null, new { id = "LinkID" }) %> 

ils auront l'URL correcte que vous pouvez utiliser comme par code ci-dessus. Utilisez l'action du contrôleur qui renvoie la vue partielle que vous devez afficher sur le client.