Question

我有一个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
});

我不确定最好的方法。我能想到的唯一方法是使用新值发送到服务器方法，该方法将创建一只新鸟并发回该鸟的大小。任何人都知道更好的方法来使这项功能有效吗？

也许你可以使用局部视图？

Answer 1

如果逻辑非常简单，如上所示那么就没有像@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库。

Answer 2

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

底线是，在没有重复javascript中的BirdSize代码的情况下，访问它的唯一方法是调用服务器。不过，它不必是一个完整的回页。

Answer 3

如果你给birdize 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');

}）;

如何使用jquery更新MVC视图上的属性

3 个答案: