ページ全体をナビゲートするのではなく、Ajax.ActionLinkの更新を要素にする方法を教えてください。

ユーザーがAjax.ActionLinkをクリックしたときに私の表示で<div>を更新しようとしています。ただし、指定した要素にサーバーの応答を挿入するのではなく、ページ全体を常にナビゲートします。ページ全体をナビゲートするのではなく、Ajax.ActionLinkの更新を要素にする方法を教えてください。

私はthis exampleですべてをやっているように感じますが、最も簡単なテストケースを作成した後でも、私が望む動作を作成できません。次のテストケースで

は、私が /Company/testロードし、「ゴー！」をクリックした後、私は「すべて完了」に置き換えられる <div>を期待し、代わりにページ全体が /Company/test_ajaxに移動します。

私はここに何か不足していると確信しています。前もって感謝します。

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>

出典

2009-05-17 Stephen Jennings

あなたの例私のコンピュータでは正常に動作します。ファイルMicrosoftAjax.jsとMicrosoftMvcAjax.jsが実際に../../Scriptsフォルダに存在するかどうかを確認します。

出典

2009-05-19 06:13:35

これは私の問題だったと確信しています。 Url.Content（ "〜/ project/path/script.js"）の構文を使用しない限り、スクリプトとスタイルの正しいソースを取得することができませんでした。 –

MVC3以上の場合は "jquery.unobtrusive-ajax.js" – RickAndMSFT

私はそれが働いて得るために、私ActionLinkの呼び出しでAjaxOptionsを変更する必要がありました：

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

出典

2009-05-17 15:35:04 nkirkes

これが私のために動作しませんでした： <％= Ajax.ActionLink（ "！行く"、 "test_ajax"、新AjaxOptions（）{HTTPMETHOD = "POST"、UpdateTargetId = "viewport"、InsertionMode = InsertionMode.Replace}）％> –

MVC 3を使用している場合は、「jquery.unobtrusive-ajax.js」を参照として含める必要があります。既にScriptsフォルダに存在しているはずです。 \ m/

出典

2011-09-18 16:18:43 Vadois

これはMVC 3+ – RickAndMSFT

jquery.unobtrusive-ajax.jsをlayout.cshtmlページに追加すると、すべての種類のばかげたものが避けられます。「なぜこれは機能しませんか？」 ajaxオブジェクト/メソッドを操作するときの瞬間。

出典

2011-10-28 18:02:45 roblem

この問題もありました。 VS2013とjquery-1.10.2.min.jsを使用しています。 4 jsファイルを組み合わせて使用する必要がありました。このサンプルコードが誰かを助けることを願っています。

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

出典

2014-08-13 19:33:21

の正解です。これはもっと親指を上げて、問題を解決しました。しかし、私はこれら2つを必要としました：@ Scripts.Render（ "〜/ Scripts/jquery-1.10.2.min.js"） @ Scripts.Render（ "〜/ Scripts/jquery.unobtrusive-ajax.js"） –

ページ全体をナビゲートするのではなく、Ajax.ActionLinkの更新を要素にする方法を教えてください。

答えて

関連する問題