Jak sprawić, aby Ajax.ActionLink zaktualizował element zamiast nawigować po całej stronie?

Próbuję zaktualizować <div> w moim widoku, gdy użytkownik kliknie na Ajax.ActionLink. Jednak zawsze porusza się po całej stronie, zamiast wstawiać odpowiedź serwera do wskazanego elementu.Jak sprawić, aby Ajax.ActionLink zaktualizował element zamiast nawigować po całej stronie?

Czuję, że robię wszystko w this example, ale nawet po utworzeniu najprostszego przypadku testowego nadal nie mogę utworzyć pożądanego zachowania.

W przypadku testowego, który następuje, załadować /Company/test i po kliknięciu „Go!”, Spodziewałem się <div> być zastąpione „Wszystko zrobione”, ale zamiast tego cała strona nawiguje do /Company/test_ajax.

Jestem pewien, że czegoś tutaj brakuje. Z góry dziękuję.

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>

Źródło

2009-05-17 Stephen Jennings

swoim przykładzie działa zgodnie z oczekiwaniami na moim komputerze. Sprawdź, czy pliki MicrosoftAjax.js i MicrosoftMvcAjax.js są naprawdę obecne w folderze ../../Scripts.

Źródło

2009-05-19 06:13:35

Jestem prawie pewien, że to był mój problem. Miałem problemy z uzyskaniem właściwych źródeł skryptów i stylów, chyba że użyłem składni Url.Content ("~/project/path/script.js"). –

Dla MVC3 i wyżej użyj "jquery.unobtrusive-ajax.js" – RickAndMSFT

musiałem zmodyfikować AjaxOptions w moje wezwanie actionlink aby to działa:

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

Źródło

2009-05-17 15:35:04 nkirkes

ta nie działa dla mnie: <% = Ajax.ActionLink ("Idź", "test_ajax", nowe AjaxOptions() {HttpMethod = "post", UpdateTargetId = "viewport", InsertionMode = InsertionMode.Replace})%> –

Jeśli używasz MVC 3, będziesz musiał dołączyć "jquery.unobtrusive-ajax.js" jako odniesienie. Powinien być już obecny w folderze Skrypty. \ m/

Źródło

2011-09-18 16:18:43 Vadois

To jest odpowiednia odpowiedź dla MVC 3+ – RickAndMSFT

Zauważyłem, że dodanie jquery.unobtrusive-ajax.js do mojej strony layout.cshtml pozwala uniknąć wszelkiego rodzaju głupich "dlaczego to nie działa?" momentów podczas pracy z obiektami/metodami ajax.

Źródło

2011-10-28 18:02:45 roblem

Wystąpił również problem. Używam VS2013 i jquery-1.10.2.min.js. Musiał użyć kombinacji 4 plików js, aby uruchomić go. Mam nadzieję, że ten przykładowy kod pomoże komuś.

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

Źródło

2014-08-13 19:33:21

Ten powinien mieć więcej kciuków, rozwiązał mój problem! Jednak potrzebowałem tylko tych 2: @ Scripts.Render ("~/Scripts/jquery-1.10.2.min.js") @ Scripts.Render ("~/Scripts/jquery.unobtrusive-ajax.js") –

Jak sprawić, aby Ajax.ActionLink zaktualizował element zamiast nawigować po całej stronie?

Odpowiedz

Powiązane problemy