在asp.net mvc中的下拉列表选择中的视图中动态填充模型字段

Question

我在ASP.NET MVC应用程序中有一个视图，带有下拉列表和其他文本字段。下拉列表中填充了特定目录中的文件名。因此，在从下拉列表中选择特定文件名时，我想在其他文本字段中填充所选文件中的内容。已经处理了文件的读取。

从下拉列表中选择文件名后，我正在努力填写文本字段。

我怎样才能做到这一点？

<div class="col-lg-4">
    @Html.DropDownList("cardProgram", null, "--Select--", new { @class = "form-control input-group-lg" })
</div>

Answer 1

Ajax代码：

$(document).ready(function () {
        $("#FileDDL_ID").change(function () {
            var file = $('#FileDDL_ID option:selected').text();

            $.ajax({
                url: "@Url.Action("YourAction", "Controller")",
                type: "POST",
                dataType: "json",
                data: { filename: file }, //pass file as parameter to controller
                async: false,

                error: function () {
                },

                //assuming your data property is called fileDetail1
                success: function (data) {
                    if (Object.keys(data).length > 0) {
                        $('#fileDetailtxtBox1').val(data[0].fileDetail1);                          
                        $('#fileDetailtxtBox2').val(data[0].fileDetail2);
                    }
                }
            });
        });
    });

控制器代码：

[HttpPost]
public JsonResult YourAction(string filename)
{
   using (var db = new DataContext())
   {
      //use filename as condition
      var details = db.YourDbset.Condition.ToList();
      return Json(details, JsonRequestBehavior.AllowGet);
   }
}

希望这很清楚，我试图根据你的问题命名变量。所以基本上，您将所选值从下拉列表传递给Controller操作并获取相关数据并使用jQuery Ajax填充字段。

Answer 2

我终于搞定了。见下文：html代码：

@Html.LabelFor(m => m.cardProgram, new { @class = "col-lg-2" })
<div class="col-lg-4">
     @Html.DropDownListFor(m => m.cardProgram, null, "--Select Card Profile--", new
                           {
                               @class = "col-lg-4 form-control input-group-lg",
                               @onchange = "BindProfile()"

                           })
</div>

ajax代码：

    <script>
        function BindProfile() {
            var selectedProfile = $('#cardProgram').val();
            $.ajax({
                url: '/CardCreation/BindProfile',
                type: "GET",
                dataType: "JSON",
                data: { cardProgram: selectedProfile },
                success: function (profile) {
                    $("#sBin").val(profile.card.bin)
                    $("#IsChip").val(profile.card.chip)

                    $("#IsBatches").val(profile.output.splitBatches)
                    $("#BatchSize").val(profile.output.batchSize)
                    $("#SplitPostcard").val(profile.output.splitPostcardFile)

                    $("#SubCat").val(profile.batchDetails.subcategory)
                    $("#UserCodeIncrement").val(profile.batchDetails.usercodeIncrement)
                    $("#ExpiryDate").val(profile.batchDetails.expiryWindowMM)

                    $("#Bureau").val(profile.chipDetails.bureau)
                    $("#BatchType").val(profile.chipDetails.batchType)
                    $("#EffectiveDate").val(profile.chipDetails.effectiveDateOffsetMM)

                    $("#ServiceCode").val(profile.emvApplications[0].serviceRestrictionCode)



                }
            });
        }
    </script>

控制器代码：

public async Task<ActionResult> BindProfile(string cardProgram)
        {
            var profile = new Profile();
            using (var client = new HttpClient())
            {
                client.BaseAddress = new Uri("http://localhost:59066/");
                client.DefaultRequestHeaders.Accept.Clear();
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
                ViewBag.country = "";
                HttpResponseMessage response = await client.GetAsync(client.BaseAddress + "api/CardCreation/GetSelectedCardProfile?selectedProfile=" + cardProgram);
                if (response.IsSuccessStatusCode)
                {
                    //profile = response.Content.ReadAsAsync<Profile>().Result;
                    profile = JsonConvert.DeserializeObject<Profile>(response.Content.ReadAsStringAsync().Result);
                    return Json(profile, JsonRequestBehavior.AllowGet);
                }
                else
                {
                    return Json(profile, JsonRequestBehavior.AllowGet); ;
                }
            }
        }