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

I have an MVC view that has a property BirdSize for a Bird on it.

我有一个MVC视图，它有一个鸟群大小的属性。

When the weight or height select lists of the bird changes this BirdSize property's value can potentially change.

当鸟类的体重或高度选择列表发生变化时，这个鸟类尺寸属性的值可能会发生变化。

What I'm wanting is for this update to happen without complete screen refresh so jquery I guess.

我想要的是在没有完全屏幕刷新的情况下进行更新，所以我想是jquery。

I don't particularly want to duplicate the BirdSize property code but just want to use it as is.

我不是特别想复制BirdSize的属性代码，但我只是想按原样使用它。

So the class:

所以类:

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

Then I have a View:

然后我有一个观点:

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

So the selects would look like:

因此，选择如下:

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

So I guess I would do something in these script codes:

所以我想我应该用这些脚本代码做点什么:

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

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

I'm not sure the best way of going about it. Only way I can think of is to use the new values to be sent to a server method which will create a new bird and send back that bird's size. Anyone know of a better way to get this functionality working?

我不确定最好的办法。我能想到的唯一方法是将新值发送到服务器方法，该方法将创建一个新鸟并将该鸟的大小发回。有人知道更好的方法使这个功能工作吗?

Maybe you could use a partial view?

也许你可以用局部视图?

3 个解决方案

#1

If the logic is really simple as you shown above then there is no problem of duplicating the code in JavaScript as done by @Jonas. Sometimes we have to break the rules(DRY) to achieve something that gives a better experience to the user. If you don't duplicate the code then you are making an additional request to the server and the bird will fly away before knowing it's size :)

如果逻辑真的像上面所示的那样简单，那么就可以像@Jonas那样在JavaScript中复制代码了。有时我们必须打破规则(枯燥的)去实现一些能给用户带来更好体验的东西。如果您不复制代码，那么您正在向服务器发出一个附加请求，在知道它的大小之前，这只鸟会飞走:)

But still if you want to do then..

但如果你还想这样做……

Models

模型

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

Controller

控制器

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

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

DisplaySize.cshtml

@model Birds.Models.Bird

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

I've used Ajax.BeginForm so you have to include the jquery.unobtrusive-ajax.min.js library.

我使用Ajax。BeginForm使您必须包含jquer.unobtrusive -ajax.min。js库。

#2

Simplest method would be to duplicate the code in Javascript, but then you're not DRY. Simplest DRY solution would be an Ajax call that sends the height and weight to the server and receives back the size string in JSON. You can then update the birdsize div.

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

Bottom line is, without duplicating the BirdSize code in javascript the only way to access it is to make a call to the server. It doesn't have to be a full page post-back, though.

最重要的是，不需要在javascript中复制BirdSize代码，访问它的唯一方法就是调用服务器。不过，它不一定非得是一页完整的回邮。

#3

If you give the birdsize div an id

如果你给小鸟大小的分区一个id

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

Then you can grab it and change it's content like this

然后你可以抓取它并改变它的内容

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

});

});