cách đăng lại trên danh sách thả xuống đã thay đổi trong mục mvc4

Question

Tôi có một menu thả xuống trong trang của mình. Khi chọn giá trị trong menu thả xuống, tôi muốn thay đổi văn bản nhãn. Đây là mã của tôi:

@model FND.Models.ViewLender 

@{ 
    ViewBag.Title = "Change Lender"; 
} 

@using (Html.BeginForm()) 
{ 
    @Html.Label("Change Lender : ") 
    @Html.DropDownList("Ddl_Lender", Model.ShowLenderTypes) 
    @Html.DisplayFor(model => model.Description) 
} 

Khi thay đổi giá trị trong danh sách thả xuống Tôi muốn Mô tả thay đổi tương ứng.

Answer 1

Bạn có thể bắt đầu bằng cách đặt các mô tả vào một div và đưa ra danh sách thả xuống của bạn một id duy nhất:

@model FND.Models.ViewLender 

@{ 
    ViewBag.Title = "Change Lender"; 
} 

@using (Html.BeginForm()) 
{ 
    @Html.Label("Change Lender : ") 
    @Html.DropDownList("Ddl_Lender", Model.ShowLenderTypes, new { id = "lenderType" }) 
    <div id="description"> 
     @Html.DisplayFor(model => model.Description) 
    </div> 
} 

Bây giờ tất cả những gì còn lại là để đăng ký onchange sự kiện javascript của thả xuống này và cập nhật mô tả tương ứng.

Ví dụ, nếu bạn đang sử dụng jQuery đó là nhiệm vụ khá tầm thường:

$(function() { 
    $('#lenderType').change(function() { 
     var selectedDescription = $(this).find('option:selected').text(); 
     $('#description').html(selectedDescription); 
    }); 
}); 

---

này đang được nói tôi có lẽ hiểu lầm câu hỏi của bạn và mô tả này phải đến từ máy chủ. Trong trường hợp này, bạn có thể sử dụng AJAX để truy vấn một hành động điều khiển sẽ trả về mô tả tương ứng. Tất cả chúng ta cần phải làm là cung cấp các url hành động này như là một đĩa dữ liệu HTML5 * gán cho menu thả xuống để tránh hardcoding nó trong tập tin javascript:

@Html.DropDownList(
    "Ddl_Lender", 
    Model.ShowLenderTypes, 
    new { 
     id = "lenderType", 
     data_url = Url.Action("GetDescription", "SomeController") 
    } 
) 

và bây giờ trong trường hợp .change chúng tôi kích hoạt các yêu cầu AJAX:

$(function() { 
    $('#lenderType').change(function() { 
     var selectedValue = $(this).val(); 
     $.ajax({ 
      url: $(this).data('url'), 
      type: 'GET', 
      cache: false, 
      data: { value: selectedValue }, 
      success: function(result) { 
       $('#description').html(result.description); 
      } 
     }); 
    }); 
}); 

và bước cuối cùng tất nhiên là phải có hành động điều khiển này sẽ lấy mô tả tương ứng dựa trên giá trị được chọn:

public ActionResult GetDescription(string value) 
{ 
    // The value variable that will be passed here will represent 
    // the selected value of the dropdown list. So we must go ahead 
    // and retrieve the corresponding description here from wherever 
    // this information is stored (a database or something) 
    string description = GoGetTheDescription(value); 

    return Json(new { description = description }, JsonRequestBehavior.AllowGet); 
}