コントローラでリダイレクトされた後、表示内容が正しく表示されないmvc

Question

コントローラにアクションメソッドがあり、言語が異なる2つのビューがあります。

public ActionResult Index(Guid id, string languageName) 
    { 
     var view = "Welcome_en"; 
     if (languageName == "Spanish") 
      view = "Welcome_es"; 
     return View(view, model); 
    } 

デフォルトの言語名は "英語"です（RouteConfig.csのデフォルト部分）。したがって、最初はページはhttp://localhost:12091/Some/sssf6bda-9r5e-64d7-9bd2-63c2te616adbに読み込まれます。

そして私はこのビューがWelcome_en.cshtmlであることを見ました。そのビューでは、アクティブな言語を切り替えるための言語のドロップダウンメニューがあります。私はスペイン語を選択し、次にajax呼び出しを行います。

$("#Languages").change(function() { 
      var activeLanguage= $(this).find('option:selected').val(); 
       $.ajax({ 
         url: "/Some/Index", 
         datatype: "text", 
       data: { id: '@Model.Guid', languageName: activeLanguage }, 
       type: "POST", 
       success: function() { 
        console.log('Success') 
       } 
       }) 

次に、コードが再びコントローラに入力されたことがわかりました。表示されるビューはWelcome_es.cshtmlである必要があります。

図Welcome_es.cshtmlは基本的Welcome_en.cshtmlと同じです。違いは、異なる言語のコンテンツです。そして私はWelcome_es.cshtmlにブレークポイントを設定しました。しかし、最終的に表示される結果はWelcome_en.cshtmlと同じです。

なぜ私は英語のコンテンツを表示するのかわかりませんが、私はクッキーをきれいにしましたが、それは同じです。また、英語のページにブレークポイントを設定しましたが、言語が「スペイン語」のときはそこには行きませんでした。

Answer 1

あなたの現在のコードはajax呼び出しを行っていますが、その呼び出しからの応答を使用していないです。

部分ビューの結果を返し、DOMの関連部分を更新して変更を確認する必要があります。あなたがあなたのページのid someDiv存在してdiv要素を持っていると仮定するとAJAX呼び出し

$.ajax({ 
    url: "/Some/Index", 
    data: { id: '@Model.Guid', languageName: activeLanguage }, 
    type: "POST", 
    success: function(response) { 
     $("#someDiv").html(response); 
    } 
}); 

の成功イベントでそれを行うことができ、上記のコードは、あなたのアヤックスからの応答とその要素の内部HTMLを更新します（クライアント側から渡している言語名に基づいて）対応するビューによって生成されたHTMLマークアップです。

通常のページロードとajax呼び出しで同じアクションメソッドを呼び出すことに気付きました。その場合、Ajaxコールで何を達成しようとしていますか？あなたは単にページをリロードすることができます。アヤックスは必要ありません。

$(function() { 

    $("#Languages").change(function() { 
     var activeLanguage = $(this).val(); 
     window.location.href = "@Url.Action("index","Home")?languageName=" 
            + activeLanguage +"&id=@Guid.NewGuid()"; 
    }); 

}); 

ページのリロードを使用している場合は、前のページの選択肢でドロップダウンを選択できます。この問題を解決するには、ページのビューモデルでHtml.DropDownListForヘルパを使用します。

新しいプロパティをビューモデルに追加して、選択した言語を保存します。

public class YourPageViewModel 
{ 
    // Your other existing properties goes here 

    public string SelectedLanguage { set;get;} 
} 

GETアクションメソッドでは、メソッドパラメータに基づいてSelectedLanguageプロパティ値を設定する必要があります。

あなたのビューで今すぐ

public ActionResult Index(Guid id, string languageName) 
{ 
    var view = "Welcome_en"; 
    if (languageName == "Spanish") 
     view = "Welcome_es"; 

    var model = new YourPageViewModel(); 
    model.SelectedLanguage = languageName; 

    return View(view, model); 
} 

、languagesはSelectListItem年代のリストであると仮定すると、

@model YourPageViewModel 
@Html.DropDownListFor(m => m.SelectedLanguage, languages, 
               new { @class = "form-control" }); 

DropDownListForヘルパーメソッドを使用します。ドロップダウンアイテムをレンダリングする必要があるコレクションに置き換えます。

ヘルパーは、名前とIDがSelectedLanguageのドロップダウンリストを表示します。ですから、あなたのjavasacriptでそれを更新してください。

$(function() { 

    $("#SelectedLanguage").change(function() { 
     var activeLanguage = $(this).val(); 
     window.location.href = "@Url.Action("index","Home")?languageName=" 
            + activeLanguage +"&id=@Guid.NewGuid()"; 
    }); 

}); 

Answer 2

あなたのAJAXリクエストはあなたのビューを返していますが、何もしていません。ビューが部分的な場合は、AJAX呼び出しの成功コールバックを変更して、HTMLが置き換えるページの部分を更新することができます。

$.ajax({ 
    url: "/Some/Index", 
    datatype: "text", 
    data: { id: '@Model.Guid', languageName: activeLanguage }, 
    type: "POST", 
    success: function (html) { 
    $('.partial').html(html); 
    } 
}); 

ビューが実際はフルページの場合は、AJAXを使用してリクエストしないでください。