Wie kann ich Ajax.ActionLink ein Element aktualisieren anstatt die ganze Seite zu navigieren?

Ich versuche, eine <div> in meiner Ansicht zu aktualisieren, wenn der Benutzer auf eine Ajax.ActionLink klickt. Es navigiert jedoch immer die gesamte Seite, anstatt die Antwort des Servers in das angegebene Element einzufügen.Wie kann ich Ajax.ActionLink ein Element aktualisieren anstatt die ganze Seite zu navigieren?

Ich fühle mich wie ich mache alles in this example, aber auch nach dem Erstellen der einfachste Testfall kann ich immer noch nicht das Verhalten, das ich will.

Im Testfall, der, ich laden /Company/test und nach einem Klick auf „Go!“, Erwartete ich die <div> ersetzt werden mit „Fertig“, sondern die ganze Seite navigiert zu /Company/test_ajax folgt.

Ich bin sicher, dass ich hier etwas vermisse. Danke im Voraus.

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>

Quelle

2009-05-17 Stephen Jennings

Ihr Beispiel funktioniert wie erwartet auf meinem Computer. Überprüfen Sie, ob die Dateien MicrosoftAjax.js und MicrosoftMvcAjax.js wirklich im ../../Scripts-Ordner vorhanden sind.

Quelle

2009-05-19 06:13:35

Ich bin mir ziemlich sicher, dass das mein Problem war. Ich hatte Probleme, die richtigen Quellen für Skripte und Stile zu bekommen, wenn ich nicht die Syntax Url.Content ("~/project/path/script.js") verwendete. –

Für MVC3 und höher verwenden Sie "jquery.unobtrusive-ajax.js" – RickAndMSFT

Ich hatte die Ajaxoptions in meiner Action Aufruf zu ändern, es zum Laufen zu bringen:

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

Quelle

2009-05-17 15:35:04 nkirkes

Das ist nicht für mich arbeiten: <% = Ajax.ActionLink ("! Go", "test_ajax", new Ajaxoptions() {Httpmethod = "Post", UpdateTargetId = "viewport", InsertionMode = InsertionMode.Replace})%> –

Wenn Sie MVC 3 verwenden, müssen Sie "jquery.unobtrusive-ajax.js" als Referenz angeben. Es sollte bereits in Ihrem Scripts-Ordner vorhanden sein. \ m/

Quelle

2011-09-18 16:18:43 Vadois

Dies ist die richtige Antwort für MVC 3+ – RickAndMSFT

Ich habe festgestellt, dass das Hinzufügen von jquery.unobtrusive-ajax.js zu meiner layout.cshtml Seite vermeidet alle Arten von dumm "Warum funktioniert das nicht?" Momente beim Arbeiten mit Ajax-Objekten/Methoden.

Quelle

2011-10-28 18:02:45 roblem

Hatte ein Problem mit diesem auch. Ich benutze VS2013 und jquery-1.10.2.min.js. Musste eine Kombination von 4 js-Dateien verwenden, um es zum Laufen zu bringen. Hoffe, dieser Beispielcode hilft jemandem.

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"); 
     }

Quelle

2014-08-13 19:33:21

Dieser sollte mehr Daumen hoch haben, löste es mein Problem! Allerdings brauchte ich nur diese 2: @ Scripts.Render ("~/Scripts/jquery-1.10.2.min.js") @ Scripts.Render ("~/Scripts/jquery.unobtrusive-ajax.js") –

Wie kann ich Ajax.ActionLink ein Element aktualisieren anstatt die ganze Seite zu navigieren?

Antwort

Verwandte Themen