Question

MVC 4 Changing multiple display fields based on DropDownListFor selection

我正在尝试按照上面的示例，但我认为我的javascript或我的控制器都遇到了问题。

视图中的JavaScript

        $('#InstitutionDDL').change(function () {

        var institutionID = $(this).val();

        $.ajax({
            type: 'POST',
            url: '/Compendia/FillImplementationInfo?InstitutionID=' + institutionID,
            dataType: 'json',
            contentType: 'application/json',
            data: { InstitutionID: institutionID },

            success: function (ret) {
                $('#RegionImplementedField').val(ret.implementedRegion);
                $('#ProvinceImplementedField').val(ret.implementedProvince);
                $('#DistrictImplementedField').val(ret.implementedDistrict);
                $('#LocationImplementedField').val(ret.implementedLocation);
            },
            error: function (ex) {

            }
        });
        return false;

    });

控制器操作

    [HttpGet]
    public JsonResult FillImplementationInfo(int InstitutionID)
    {
        var ret = (from e in db.Institutions                     
                   where e.ID == InstitutionID
                   select new
                   {
                       implementedRegion = e.Province.Region.RegionName,
                       implementedProvince = e.Province.ProvinceName,
                       implementedDistrict = e.District,
                       implementedLocation = e.InstitutionAdress
                   }).FirstOrDefault();
        return Json(ret, JsonRequestBehavior.AllowGet);
    }

视图中的DropDownList来源

        <div class="form-group">
        @Html.LabelFor(model => model.InstitutionID, "Institution", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(m => m.InstitutionID, new SelectList(""), "--Select Institution--", htmlAttributes: new { @class = "form-control", @id ="InstitutionDDL" })
            @Html.ValidationMessageFor(model => model.InstitutionID, "", new { @class = "text-danger" })
        </div>
    </div>

^从中选择之后，我想使用InstitutionID从连接表中提取所有相关数据，并将其放在各自已知的ID为#ImplementedField

的文本框中

调试结果

从DropDownList中选择一个选项后，我的脚本可以将该机构ID捕获到 $。ajax（{data：{InstitutionID：institutionID} 。但是，它会跳过 success：function （ret）完全直接进入 return false; 。此外，返回的错误是500内部服务器错误，并且基于调试器， ret 在任何地方都被视为未定义。我已经尝试多次修改我的控制器和/或javascript但没有成功。如果我的linq语句有问题，我也在这里发布我的模型。道歉为了长篇大论，我真的不知道我哪里出错了。

模型

public class Compendium
    {
        public int ID { get; set; } 
        public int InstitutionID { get; set; }
        public string RegionImplemented { get; set; }
        public string ProvinceImplemented { get; set; }
        public string DistrictImplemented { get; set; }
        public string LocationImplemented { get; set; }
        public virtual Institution Institution { get; set; }
    }

public class Institution
{
    public int ID { get; set; }
    public int ProvinceID { get; set; }
    public District? District { get; set; } //enum
    public virtual ICollection<Compendium> Compendia { get; set; }
    public virtual Province Province { get; set; }
}

public class Province
    {
        public int ID { get; set; }
        public int RegionID { get; set; }
        public virtual Region Region { get; set; }
        public string ProvinceName { get; set; }
        public virtual ICollection<Institution> Institutions { get; set; }
     }

Answer 1

首先，带有查询字符串的URL模式不正确，无法启动AJAX调用：

url: '/Compendia/FillImplementationInfo?InstitutionID=' + institutionID,

您需要更改int Url.Action或只删除其上的查询字符串：

url: '/Compendia/FillImplementationInfo',

// or
url: '@Url.Action("FillImplementationInfo", "Compendia")'

然后删除contentType: 'application/json'，因为返回类型已经使用dataType: 'json'声明为JSON。

其次，作为一般惯例，jQuery AJAX调用＆amp;必须匹配控制器操作方法才能成功发送参数数据。在视图方面，作为POST方法发送的AJAX调用：

$.ajax({
           type: 'POST',
           ...
      });

但是操作方法使用HTTP GET，导致AJAX调用无法访问操作方法，因为它只接受GET请求：

[HttpGet]
public JsonResult FillImplementationInfo(int InstitutionID)
{
    ...
}

请注意，您可以在AJAX调用中使用GET或POST方法，但请确保它们彼此匹配。以下是一个例子：

查看（jQuery AJAX）

$.ajax({
          type: 'GET', // ensure this HTTP method same as used by controller action method
          ...
      });

<强>控制器

[HttpGet]
public JsonResult FillImplementationInfo(int InstitutionID)
{
    ...
}

基于DropDownList的自动填充文本框

1 个答案: