Question

我正在使用ASP.NET MVC和实体框架构建一个网站。我有一个带有国家信息的数据库表：

CountryID int;
ShortName nvarchar;
CountryCode nvarchar;

在我的观点中，我有：

<div class="editor-field"><%: Html.DropDownListFor(model => model.address.CountryID, Model.countriesList, "<--Select Country-->") %></div>
<div class="display-field"><%: Html.TextBoxFor(m => m.phone.CountryCode)%>></div>

我传递给视图的列表是：

countriesList = new SelectList(countries, "CountryID", "ShortName");

更新 javascript代码：

<script src="/Scripts/jquery-1.4.1.min.js" language="javascript" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function()
{
    $("#address.CountryID").change(function()
    {
        $.get("/PersonalInfo/GetCountryCode", $(this).val(), function(data)
        {
            $("#phone.CountryCode").val(data);
        });
    });
});

控制器方法：

public ActionResult GetCountryCode(int id)
    { 
        Country c = personalInfoRepository.GetUserCountryByID(id);
        string countryCode = c.PhoneCode;
        return Content(countryCode);
    }
</script>

我想要做的是每次用户从下拉列表中选择不同的国家/地区时，使用相应的CountryCode填充显示字段。我理解ajax可以用来实现这一点，但不幸的是我没有经验。我很感激任何帮助代码或一些链接到初学者的简单教程。

如果我沿countriesList传递countryCodeList，是否可以在不回发到服务器的情况下执行此操作？

Answer 1

这是一个很棒的教程，有3种不同的方法可以使用ASP.NET MVC创建级联下拉列表 - http://stephenwalther.com/blog/archive/2008/09/07/asp-net-mvc-tip-41-creating-cascading-dropdown-lists-with-ajax.aspx

填充文本框的概念将类似。首先，您需要一个控制器操作，它将返回给定国家/地区的正确国家/地区代码：

public ActionResult GetCountryCode(int countryId)
{
    //logic to find country code goes here
    string countryCode = "1";
    return Content(countryCode);
}

现在您需要一些javascript绑定到您所在国家/地区下拉菜单的更改事件，并通过ajax调用您的控制器操作。我建议使用jquery：

<script type="text/javascript">
    $(document).ready(function()
    {
        $("#address_CountryID").change(function()
        {
            $.get("/Countries/GetCountryCode", $(this).val(), function(data)
            {
                $("#phone_CountryCode").val(data);
            });
        });
    });
</script>

使用基于下拉列表选择的数据填充文本框（onChange）

1 个答案: