在ASP.NET MVC中的下拉列表选择视图中动态填充模型字段

时间:2019-04-12 11:48:32

标签: asp.net-mvc model-view-controller controller dropdownlistfor

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

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

我该怎么做?

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

2 个答案:

答案 0 :(得分:0)

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取回相关数据并填充字段。

答案 1 :(得分:0)

我终于开始工作了。见下文 : 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); ;
                }
            }
        }