3

BirdのBirdSizeプロパティを持つMVCビューがあります。

鳥の体重または身長の選択リストが変更されると、このBirdSizeプロパティの値が変更される可能性があります。

私が望んでいるのは、この更新が完全な画面更新なしで行われることなので、jqueryだと思います。

BirdSizeプロパティコードを特に複製したくはありませんが、そのまま使用したいと思います。

したがって、クラス：

public class Bird
{
   public int WeightId { get; set; }
   public Weight Weight { get; set; }
   public int HeightId { get; set; }
   public Height Height { get; set; }


public string BirdSize
{
   if(Height == "Tall" && Weight == "Heavy") {
      return "Big";
   }
   else {
      return "Small";
   }
}
}

それから私は見解を持っています：

@model Ahb.Insite.HerdRegistration.WebUI.ViewModels.BirdModel

<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/Views/HerdRegistrationWizard/index.js" type="text/javascript"></script>

<h3>Bird Weight/h3>
<div>
    @Html.DropDownListFor(model => model.Bird.WeightId, Model.BirdWeightSelectListItems, new { @id = "weightddl" })
</div>
<h3>Bird Height/h3>
<div>
    @Html.DropDownListFor(model => model.Bird.HeightId, Model.BirdHeightSelectListItems, new { @id = "heightddl" })
</div>
<h3> Bird Size</h3>
<div>
    @Html.DisplayFor(model => model.Bird.BirdSize)
</div>

したがって、selectは次のようになります。

<select id="weightddl">
   <option value="1">Light</option>
   <option value="2">Medium</option>
   <option value="3">Heavy</option>
</select>

<select id="heightddl">
   <option value="1">Short</option>
   <option value="2">Medium</option>
   <option value="3">Tall</option>
</select>

だから私はこれらのスクリプトコードで何かをするだろうと思います：

$('#weightddl').change(function() {
   //Do something to update birdsize
});

$('#heightddl').change(function() {
   //Do something to update birdsize
});

最善の方法がわかりません。私が考えることができる唯一の方法は、新しい鳥を作成し、その鳥のサイズを送り返すサーバーメソッドに送信される新しい値を使用することです。この機能を機能させるためのより良い方法を知っている人はいますか？

多分あなたは部分的なビューを使うことができますか？

4

3 に答える 3

2

上に示したようにロジックが本当に単純な場合は、@Jonasによって行われるようにJavaScriptでコードを複製する問題はありません。ユーザーにより良い体験を提供する何かを達成するために、ルール（DRY）を破らなければならない場合があります。コードを複製しない場合は、サーバーに追加のリクエストを行うことになり、鳥はサイズを知る前に飛び去ります:)

しかし、それでもあなたがやりたいのなら..

モデル

public class BirdViewModel
  {
    public Bird Bird { get; set; }
    public IEnumerable<SelectListItem> Heights { get; set; }
    public IEnumerable<SelectListItem> Weights { get; set; }
  }

  public class Bird
  {
    public int WeightId { get; set; }
    public int HeightId { get; set; }
    public string Weight { get; set; }
    public string Height { get; set; }

    public string BirdSize
    {
      get
      {
        if (HeightId == 3 && WeightId == 3)
        {
          return "Big";
        }
        else
        {
          return "Small";
        }
      }
    }
  }

コントローラ

public class BirdController : Controller
  {
    public ActionResult Index()
    {
      var model = new BirdViewModel();

      model.Weights = new[]
         {
           new SelectListItem{ Text = "Light", Value = "1" },
           new SelectListItem{ Text = "Medium", Value = "2" },
           new SelectListItem{ Text = "Heavy", Value = "3" }
         };

      model.Heights = new[]
         {
           new SelectListItem{ Text = "Short", Value = "1" },
           new SelectListItem{ Text = "Medium", Value = "2" },
           new SelectListItem{ Text = "Tall", Value = "3" }
         };

      return View(model);
    }

    [HttpPost]
    public PartialViewResult DisplaySize(Bird bird)
    {
      return PartialView(bird);
    }
  }

Index.cshtml

@model Birds.Models.BirdViewModel

@{
    ViewBag.Title = "Index";
    var ajaxOptions = new AjaxOptions 
    {
       UpdateTargetId = "birdSize",
       Url = "Bird/DisplaySize"
    };
}

<h2>Index</h2>


@using (Ajax.BeginForm(ajaxOptions))
{
  <h3>Bird Weight</h3>
  <div>
    @Html.DropDownListFor(model => model.Bird.WeightId, Model.Weights, new { @id = "weightddl" })
  </div>
  <h3>Bird Height</h3>
  <div>
      @Html.DropDownListFor(model => model.Bird.HeightId, Model.Heights, new { @id = "heightddl" })
  </div>
  <h3> Bird Size</h3>
  <div id="birdSize">
      @Html.Partial("DisplaySize", Model.Bird ?? new Birds.Models.Bird())
  </div>
}

<script type="text/javascript">
  $("select").change(function () {
    $("form").submit();
  });
</script>

DisplaySize.cshtml

@model Birds.Models.Bird

@Html.DisplayFor(model => model.BirdSize)

私が使用したので、ライブラリAjax.BeginFormを含める必要があります。jquery.unobtrusive-ajax.min.js

于 2012-06-15T06:02:07.490 に答える
0

バードサイズの div に id を指定すると

<div id="birdsize">
    @Html.DisplayFor(model => model.Bird.BirdSize)
</div>

次に、それをつかんで、このようにコンテンツを変更できます

$('#weightddl, #heightddl').change(function() {
  //Do something to update birdsize
  if($('#weightddl').val() == "3" && $('#heightddl').val() == "3")
      $('#birdsize').text('Big');
  else
      $('#birdsize').text('Small');

});

于 2012-06-15T01:30:45.687 に答える
0

最も簡単な方法は、Javascript でコードを複製することですが、DRY ではありません。最も単純な DRY ソリューションは、身長と体重をサーバーに送信し、JSON でサイズ文字列を受け取る Ajax 呼び出しです。その後、birdsize div を更新できます。

要するに、JavaScript で BirdSize コードを複製せずにアクセスする唯一の方法は、サーバーを呼び出すことです。ただし、ページ全体のポストバックである必要はありません。

于 2012-06-15T01:20:33.900 に答える