MVC 4 - Ajax - 部分的なビューを別のビューに置き換えます

Question

メインビューのdivの内容を、@ Ajax.ActionLinkがクリックされた部分に応じて部分的なビューに置き換えようとしています。

最初に_CaseLoadパーシャルビューを読み込み、関連するActionLinkをクリックすると_CaseLoadと_Vacanciesの2つの部分ビューを切り替えることができます。私は 'Main'フォルダ内の部分ビューとインデックスビューを持っています。

[空席]リンクをクリックすると、LoadingElementIDが簡単に表示されますが、_CaseLoadの部分表示が_Vacanciesの部分表示に置き換わることはありませんか？

コントローラのアクション（メインコントローラ）：

public ActionResult Index(int page = 1, string searchTerm = null) 
    { 
     MainIndexViewModel model = new MainIndexViewModel() 
     // Populate Model 

     return View(model); 

    } 

メインインデックスビュー：

@model Project.WebUI.Models.MainIndexViewModel 

@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<div id="MainIndex"> 
     <div id="Menu"> 

      @Ajax.ActionLink("CaseLoad", "_CaseLoad", "Main", null, new AjaxOptions() { UpdateTargetId = "Main", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", 
       LoadingElementId = "busycycle" }) | 

      @Ajax.ActionLink("Vacancies", "_Vacancies", "Main", null, new AjaxOptions() { UpdateTargetId = "Main", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", 
       LoadingElementId = "busycycle" }) 

     </div><hr/> 


     <div id="busycycle" style="display:none;"><img src="~/Content/images/preloader-w8-cycle-black.gif" /></div> 
     <div id="Main"> 
      @Html.Partial("_CaseLoad") 
     </div> 

    </div> 

Answer 1

あなたの呼び出しは、あなたはこれを間違ってやっているされています

@Ajax.ActionLink("CaseLoad", "_CaseLoad", "Main", null, new AjaxOptions() { UpdateTargetId = "Main", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", 
      LoadingElementId = "busycycle" }) 

あなたのリンクのテキストは、「取扱件数」であり、「メインコントローラ」に呼び出されるアクションは「_CaseLoad」されることを意味し？ "_CaseLoad"は部分ビューの名前ではありませんか？

これを修正するには、MainControllerにCaseLoadと空き領域のアクションを作成し、両方のメソッドがPartialView（ "_ CaseLoad.cshtml"、model）を返すようにする必要があります。以下のようなPartialView（ "_ Vacancies.cshtml、モデル）：

public ActionResult CaseLoad(int page = 1, string searchTerm = null) 
{ 
    MainIndexViewModel model = new MainIndexViewModel() 
    // Poopulate Model 

    return PartialView("_CaseLoad.cshtml", model); 
} 

私はちょうどあなたの問題を解決する方法についてのアイデアを得るために、すべての実装の詳細を遮断

。

Answer 2

私は（私はChromeをお勧めします開発ツールの良いセットを持っているブラウザを使用してみてくださいと言うだろう）F12をヒットします。開発ツールを開いた状態で、[ネットワーク]タブに切り替え、次にajaxリンクをクリックします。 Loading要素は、リクエストの進行中にのみ表示され、必ずしも成功したとは限りません。 「ネットワーク」タブを使用すると、Ajaxリクエストからの応答が何であったのかを確認し、それがエラーであったかどうか、結果として得られた部分ビューが実際に何であったかを判断できるはずです。 @ Ajax.ActionLinkへ