Question

我有一个网站，其中所有网页都需要一个下拉列表国家/地区，另一个下拉列表包含基于所选国家/地区的子数据。

我对本文采取了类似的方法：

MVC 3 Layout Page, Razor Template, and DropdownList

所以我需要以下功能：

1。）上下文控件始终出现在布局页面上（国家/地区下拉列表，依赖于它）
2.。）当国家/地区下拉列表更改时，请使用与该国家/地区相关的数据填充第二个下拉列表。

目前我有一个UserContextController，它处理get和post请求并返回部分视图：

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>

添加到布局页面的局部视图中的下拉列表有一些jquery，当它们发生变化时调用到UserContextController的http帖子（形状为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中的值，但国家/地区下拉列表从不设置所选国家/地区，并始终默认为列表中的第一项。即包含英国和德国。选择德国 - ＆gt;发布到控制器 - ＆gt;设置所选值 - ＆gt;还在英国的下拉!!

当这些下拉列表发生变化时，UI应该返回到起始页面，因为它会影响UI中呈现的数据，并且用户需要了解“上下文更改”（因此他们不会为不同的国家/地区上下文添加数据）例如）。

有趣的是，在Fiddler中，当下拉列表发生变化时，我可以看到返回的响应包含整个布局页面，而下拉列表HTML则具有正确选择的选项！

我认为我的做法是错误的......有没有人有类似的功能？我从最近完成的生产WebForms项目的角度出发，通过用户控件执行相同的操作，并希望在MVC中生成PoC但却失败了！

我认为我需要通过Angular将下拉列表驱动到WebAPI请求以及设置上下文。

具有依赖下拉列表和上下文控制的ASP.NET MVC布局页面

0 个答案: