web-dev-qa-db-ja.com

他のフォームフィールドを更新するMVC DropDownList OnChange

私はMVCが初めてで（従来のASP.Netのダークサイドから移行しています）、SOは「なぜこの動作しないのか」ということですが、新しいMVCに、私は何かを達成する方法を尋ねたかっただけです-現時点では方法がわからないので、実際にはコードやマークアップはありません。

右、類似の例を使用して...私は「ウィジェット」のリストのドロップダウンを持つフォームを持っています（SOのおかげでそれが機能しています）...そして他のフィールド（長さ/高さ/幅）があります）「デフォルト」の値があります。

フォームが表示されると、ドロップダウンが表示されますが、ユーザーがDDLから1つを選択するまで、L/H/Wのフォームフィールドは空/無効になります。

さて、古典的なASP.Netの世界では、 "onselectedindexchange"でPostBackを実行し、選択されたアイテムを見てから、L/H/Wフィールドを "マスターウィジェットエントリ"バージョンの値で更新します。

MVCにはポストバックがないので...これはどのように達成されますか？

c#jqueryasp.net-mvc-4razorhtml.dropdownlistfor
15
Chris Hammond

Asp.Net MVCでは、コントロール値が変更されたときのWebフォームでのようなポストバック動作はありません。フォームを投稿し、アクションメソッドで、選択した値（投稿された値）を読み取り、テキストボックスの値を読み込んで、ページを再度レンダリングすることができます。これは完全なフォーム投稿です。しかし、ajaxを使用してこれを行うより良い方法があるので、ユーザーは完全なページのリロードを経験できません。

あなたがすることは、ユーザーがドロップダウンを変更したとき、選択されたアイテムの値を取得し、入力フィールドに表示したいデータを取得してそれらを設定するためにサーバーを呼び出します。

ページのビューモデルを作成します。

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

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

    public int? SelectedWidget { set; get; }    
}

GETアクションで、このオブジェクトを作成し、Widgetsプロパティを初期化して、ビューに送信します

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);
}

そして、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>
}

上記のコードは、SELECT要素のHTMLマークアップと、幅と高さの2つの入力テキストフィールドをレンダリングします。 （ページで「ソースの表示」を実行して確認してください）

これで、SELECT要素のchangeイベントをリッスンし、選択したアイテムの値を読み取るjQueryコードが作成されます。サーバーへのajax呼び出しを行い、選択したウィジェットのHeightとWidthを取得します。

<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>

Ajax呼び出しを処理するために、GetDetault内にHomeControllerというアクションメソッドがあることを確認する必要があります。

[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" });
}
17
Shyju
  1. 「Action」で「Json」データを返すコントローラーを作成します。
  2. Ajax呼び出しにドロップダウンの「onchange」をその「Action」に呼び出します。
  3. Ajaxでは、「response（json）uは値を取得し、それらの値をjson responseのフィールドに設定します。

これは、フィールド値を更新する方法です。

4
Parth Trivedi