3

我有一个 MVC 视图，它上面有一个 Bird 的属性 BirdSize。

当鸟的体重或身高选择列表发生变化时，此 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 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);
    }
  }

索引.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>

显示尺寸.cshtml

@model Birds.Models.Bird

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

我用过Ajax.BeginForm，所以你必须包括jquery.unobtrusive-ajax.min.js图书馆。

于 2012-06-15T06:02:07.490 回答
0

最简单的方法是在 Javascript 中复制代码，但这样你就不会干了。最简单的 DRY 解决方案是一个 Ajax 调用，它将身高和体重发送到服务器，并以 JSON 格式接收回大小字符串。然后您可以更新birdsize div。

底线是，无需在 javascript 中复制 BirdSize 代码，访问它的唯一方法就是调用服务器。不过，它不必是整页的回发。

于 2012-06-15T01:20:33.900 回答
0

如果你给birdsize 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 回答