Come faccio a fare in modo che Ajax.ActionLink aggiorni un elemento invece di navigare nell'intera pagina?

Sto tentando di aggiornare un <div> nella mia vista quando l'utente fa clic su un Ajax.ActionLink. Tuttavia, naviga sempre l'intera pagina anziché inserire la risposta del server nell'elemento che specifica.Come faccio a fare in modo che Ajax.ActionLink aggiorni un elemento invece di navigare nell'intera pagina?

Mi sento come se stessi facendo tutto in this example, ma anche dopo aver creato il caso di test più semplice non riesco ancora a creare il comportamento che voglio.

Nel caso di test che segue, mi carico /Company/test e dopo aver fatto clic su "Go!", Mi aspettavo che il <div> essere sostituito con "Tutto fatto", ma invece l'intera pagina naviga a /Company/test_ajax.

Sono sicuro che mi manca qualcosa qui. Grazie in anticipo.

CompanyController

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

public ActionResult test_ajax() 
{ 
    return Content("All done"); 
}

Test.aspx

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>test</title> 
<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script> 
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> 
</head> 
<body> 

<h2>test</h2> 
<%= Ajax.ActionLink("Go!", "test_ajax", 
    new AjaxOptions { 
     UpdateTargetId="viewport" 
     }) %> 
<div id="viewport">Replace me!</div> 

</body></html>

fonte

2009-05-17 Stephen Jennings

Il tuo esempio funziona come previsto sul mio computer. Controlla se i file MicrosoftAjax.js e MicrosoftMvcAjax.js sono realmente presenti nella cartella ../../Scripts.

fonte

2009-05-19 06:13:35

Sono abbastanza sicuro che questo era il mio problema. Ho avuto problemi nel trovare le giuste fonti per script e stili a meno che non avessi usato la sintassi Url.Content ("~/project/path/script.js"). –

Per MVC3 e versioni successive "jquery.unobtrusive-ajax.js" – RickAndMSFT

ho dovuto modificare le AjaxOptions nella mia chiamata ActionLink per farlo funzionare:

<%= Ajax.ActionLink("Update", "UpdateContent", new AjaxOptions() { HttpMethod = "Post", UpdateTargetId = "target", InsertionMode = InsertionMode.Replace })%>

fonte

2009-05-17 15:35:04 nkirkes

Questo non ha funzionato per me: <% = Ajax.ActionLink ("Go!", "Test_ajax", nuovi AjaxOptions() {HttpMethod = "Post", UpdateTargetId = "viewport", InsertionMode = InsertionMode.Replace})%> –

Se si utilizza MVC 3, è necessario includere "jquery.unobtrusive-ajax.js" come riferimento. Dovrebbe essere già presente nella cartella Scripts. \ m/

fonte

2011-09-18 16:18:43 Vadois

Questa è la risposta giusta per MVC 3+ – RickAndMSFT

Ho trovato che l'aggiunta di jquery.unobtrusive-ajax.js alla mia pagina layout.cshtml evita ogni sorta di stupido "perché non funziona?" Momenti quando si lavora con oggetti/metodi ajax.

fonte

2011-10-28 18:02:45 roblem

Ha avuto problemi anche con questo. Sto usando VS2013 e jquery-1.10.2.min.js. Ho dovuto usare una combinazione di 4 file js per farlo funzionare. Spero che questo codice di esempio aiuti qualcuno.

Test.cshtml:

@{ 
    Layout = null; 
} 

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>test</title> 

     <script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script> 
     <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script> 
     <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> 
     <script src="@Url.Content("~/Scripts/jquery.history.js")" type="text/javascript"></script> 


    <script type="text/javascript"> 

     $(function() { 
      $.history.init(function (hash) { 
       if (hash.length > 0) { 
        $("#" + hash).click(); 
       } 
      }, 
      { unescape: ",/" }); 
     }); 

     function AddHashTag(hashTag) { 
      window.location.hash = hashTag; 
     } 

    </script> 

</head> 
<body> 
      @Ajax.ActionLink("Render Circle", "GetCircle", null, 
       new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "divContent", OnSuccess = "AddHashTag('circle')" }, 
       new { @id = "circle" }) 

      @Ajax.ActionLink("Render Diamond", "GetDiamond", null, 
       new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "divContent", OnSuccess = "AddHashTag('diamond')" }, 
       new { @id = "diamond" }) 

      @Ajax.ActionLink("Render Star", "GetStar", null, 
       new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "divContent", OnSuccess = "AddHashTag('star')" }, 
       new { @id = "star" }) 

     <div id="divContent" style="width: 300px; height: 300px; text-align: center; vertical-align: middle; 
    margin: 50px 50px;"> 
     </div> 
</body> 
</html> 


star.cshtml: 
star<div class="star"></div> 

diamond.cshtml: 
diamond<div class="diamond"></div> 

circle.cshtml: 
circle<div class="circle"></div> 


Home Controller: 

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

     [HttpGet] 
     public ActionResult GetCircle() 
     { 
      return PartialView("Circle"); 
     } 

     [HttpGet] 
     public ActionResult GetDiamond() 
     { 
      return PartialView("Diamond"); 
     } 

     [HttpGet] 
     public ActionResult GetStar() 
     { 
      return PartialView("Star"); 
     }

fonte

2014-08-13 19:33:21

Questo dovrebbe avere più pollici in su, ha risolto il mio problema! Tuttavia, avevo solo bisogno di questi 2: @ Scripts.Render ("~/Scripts/jquery-1.10.2.min.js") @ Scripts.Render ("~/Scripts/jquery.unobtrusive-ajax.js") –

Come faccio a fare in modo che Ajax.ActionLink aggiorni un elemento invece di navigare nell'intera pagina?

risposta

Problemi correlati