すべてのページに国をリストするドロップダウンと、選択した国に基づく子データを含む別のドロップダウンが必要なサイトがあります。
この記事と同様のアプローチをとっています。
MVC 3 レイアウト ページ、Razor テンプレート、および DropdownList
したがって、次のような機能が必要です。
- 1.) レイアウト ページに常に存在するコンテキスト コントロール (国のドロップダウンとそれに依存)
- 2.) 国ドロップダウンが変更されたら、2 番目のドロップダウンにその国に関連するデータを入力します。
現在、get および post リクエストを処理し、部分ビューを返す UserContextController があります。
UserContextController からのインデックス アクション:
[HttpPost]
public ActionResult Index(UserContextViewModel userContext)
{
//CurrentUserContext is a Session wrapper to store the selections from the dropdowns
//in application scope for ease of reference. This is accessed in a base controller all controllers inherit from
this.CurrentUserContext.SetCountryContext(this.countryRepository.GetList().SingleOrDefault(c => c.Id == userContext.CountryId));
if (userContext.TerritoryId > 0)
{
//return partial view containing model data and select list data
return PartialView("ContextControls", new UserContextViewModel(this.countryRepository.GetList(),
AvailableTerritories,
CurrentUserContext.CurrentCountry,
CurrentUserContext.CurrentTerritory));
}
UserContextController と Index アクションを参照する私のレイアウト ページ:
<header>
<div class="content-wrapper">
<a href=".">HOME</a>
@Html.Action("Index", "UserContext")
</div>
</header>
レイアウト ページに追加された部分ビューのドロップダウンには、変更時に UserContextController への http ポストを呼び出すいくつかの jquery があります (UserContextViewModel スキーマに整形されます)。
//_targetUrl is: /UserContext
$.post(_targetUrl, { CountryId: $('#CountryId').val(),TerritoryId:$('#TerritoryId').val() }, function (result) { });
選択した項目を設定するビュー モデル コード:
public IEnumerable<SelectListItem> CountrySelectItems
{
get
{
int selectedCountryId = this.selectedCountry==null ? 0 : this.selectedCountry.Id;
return new SelectList(this.countries, "Id", "Name",selectedCountryId);
}
}
選択した国を設定する ViewModel のコンストラクター:
public UserContextViewModel(IEnumerable<Country> countries, IEnumerable<Territory> territories,Country selectedCountry,Territory selectedTerritory)
{
this.countries = countries;
this.territories = territories;
this.selectedCountry = selectedCountry;
this.selectedTerritory = selectedTerritory;
}
部分的なビュー:
<p>
<label>Country:</label>
@Html.DropDownList("CountryId", @Model.CountrySelectItems, new { @class = "context-control" })
</p>
値セットを保持するユーザー コンテキスト セッション ラッパー:
protected IUserContext CurrentUserContext
{
get
{
const string contextKey = "USER_CONTEXT";
if (HttpContext.Session[contextKey] == null)
{
HttpContext.Session.Add(contextKey, new UserContext());
}
return HttpContext.Session[contextKey] as IUserContext;
}
}
したがって、これは機能し、UserContext の値を更新しますが、国のドロップダウンは選択した国を設定せず、常にリストの最初の項目にデフォルト設定されます。つまり、英国とドイツが含まれます。ドイツを選択 -> コントローラに投稿 -> 選択した値を設定 -> ドロップダウンは引き続き英国に!!
これらのドロップダウンが UI でレンダリングされるデータに影響を与えるため、UI は開始ページに戻る必要があり、ユーザーは「コンテキストの変更」を認識する必要があります (たとえば、別の国のコンテキストのデータを追加しないようにするため)。 .
興味深いのは、Fiddler でドロップダウンが変更されたときに、返された応答にレイアウト ページ全体が含まれており、ドロップダウン HTML に正しく選択されたオプションがあることです!
私のアプローチは間違っていると思います...誰かが達成した同様の機能を持っていますか? 私は、ユーザー コントロールを介して同じことを行い、MVC で PoC を作成したいと思っていたが、惨めに失敗した最近完了した WebForms の製品プロジェクトの観点からこれに到達しました。
Angular から WebAPI リクエストへのドロップダウンとコンテキストの設定を行う必要があると思います。