MVC DropDownList OnChange do aktualizacji innych pól formularza

W Asp.Net MVC, nie ma postbacku takiego jak w formularzach internetowych, gdy zmieniana jest wartość kontrolna. Nadal możesz opublikować formularz, a w metodzie akcji możesz odczytać wybraną wartość(wysłane wartości), załadować wartości dla swoich pól tekstowych i ponownie renderować stronę. To jest kompletny formularz zamieszczania. Ale są lepsze sposoby, aby to zrobić za pomocą ajax, więc użytkownik nie doświadczy pełnego przeładowania strony.

To, co robisz, gdy użytkownik zmieni listę rozwijaną, Pobierz wybrany wartość elementu i wykonaj połączenie z serwerem, aby uzyskać dane, które chcesz wyświetlić w polach wejściowych i ustawić je.

Utwórz model widoku dla swojej strony.

public class CreateViewModel
{
    public int Width { set; get; }
    public int Height{ set; get; }

    public List<SelectListItem> Widgets{ set; get; }

    public int? SelectedWidget { set; get; }    
}

Teraz w akcji GET, utworzymy obiekt tego, Zainicjalizujemy właściwość Widgets i wyślemy do widoku

public ActionResult Create()
{
  var vm=new CreateViewModel();
  //Hard coded for demo. You may replace with data form db.
  vm.Widgets = new List<SelectListItem>
            {
                new SelectListItem {Value = "1", Text = "Weather"},
                new SelectListItem {Value = "2", Text = "Messages"}
            };
 return View(vm);
}

I twój widok create, który jest mocno wpisany do CreateViewModel

@model ReplaceWithYourNamespaceHere.CreateViewModel
@using(Html.BeginForm())
{
    @Html.DropDownListFor(s => s.SelectedWidget, Model.Widgets, "Select");

    <div id = "editablePane" >
         @Html.TextBoxFor(s =>s. Width,new { @class ="myEditable", disabled="disabled"})
         @Html.TextBoxFor(s =>s. Height,new { @class ="myEditable", disabled="disabled"})
    </div>
}

Powyższy kod wyrenderuje znaczniki html dla elementu SELECT oraz 2 wejściowe pola tekstowe dla szerokości i wysokości. (Zrób " widok źródło " na stronie i zobacz)

Teraz będziemy mieli kod jQuery, który nasłuchuje zdarzenia change elementu SELECT i odczytuje wartość wybranego elementu, wykonuje ajax wywołanie do serwera, aby uzyskać wysokość i szerokość wybranego widżetu.

<script type="text/javascript">
 $(function(){

      $("#SelectedWidget").change(function() {

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

            if (t !== "") {               
                $.post("@Url.Action("GetDefault", "Home")?val=" + t, function(res) {
                    if (res.Success === "true") {

                      //enable the text boxes and set the value

                        $("#Width").prop('disabled', false).val(res.Data.Width);
                        $("#Height").prop('disabled', false).val(res.Data.Height);

                    } else {
                        alert("Error getting data!");
                    }
                });
            } else {
                //Let's clear the values and disable :)
                $("input.editableItems").val('').prop('disabled', true);
            }

        });
 });

</script>

Musimy się upewnić, że mamy metodę akcji o nazwie GetDetault wewnątrz HomeController do obsługi wywołania ajax.

[HttpPost]
public ActionResult GetDefault(int? val)
{
    if (val != null)
    {
        //Values are hard coded for demo. you may replae with values 
       // coming from your db/service based on the passed in value ( val.Value)

        return Json(new { Success="true",Data = new { Width = 234, Height = 345}});
    }
    return Json(new { Success = "false" });
}