在下拉列表选择

Question

我有一个详细信息页面（Details.cshtml）。我在该页面中有一个下拉列表。选择一个值后，它应该改变几个控件的状态（启用或禁用）。到目前为止我做了什么，

在视图（details.cshtml）

中

 @Html.DropDownList("HighlightData", new SelectListItem[]
 {
   new SelectListItem() { Text = "None", Value = "0" },
   new SelectListItem() { Text = "On Demand Production", Value = "1" }
}, new { @onchange = "CallChangeUI(this.value)" })

<script>
  function CallChangeUI(state)
  {
    var productId = @(Model.ProductId);
    $.ajax({
      url: "/Product/ChangeUI",
      type: "POST",
      data: "id=" + productId + "&state=" + state,
      success :function() {
      },
      error   : function () {
      }
    });
  }
</script>


@Html.Partial("Display", Model  )

在我的控制器中

我添加了这个

[HttpPost]
public ActionResult ChangeUI(int id, int state)
{
  return RedirectToAction("Details", new { id = id });
} 

此处的问题是详细信息视图只接受一个id参数。如何将附加参数“state”传递给Details以便我可以启用/禁用控件？

这是正确的做法吗？或者还有其他更简单的方法可以解决这个问题吗？

-Alan -

更新

部分视图（Display.cshtml）

 <div id="Details_@(territory.SalesTerritoryId)">
      <table class="formTable">
            <colgroup>
                <col class="width25" />
                <col class="width35" />
            </colgroup>
            <tr>
                <td class="display-label">@Html.LabelFor(t => t.Title.TitleId)</td>
                <td class="display-field">@Html.AuthorisedActionLink(Model.TitleId.ToString(), "Details", "Title", "Publishing", new { id = Model.TitleId }, null)</td>
                <td></td>
                <td></td>
             </tr>
        </table>              
<div>           

当选择值为1时，我想禁用@ Html.LabelFor（t =＆gt; t.Title.TitleId）。

Answer 1

没有必要调用服务器来执行此操作（并且在任何情况下，ajax调用都不会重定向，因此return RedirectToAction("Details", new { id = id });有点无意义。

停止使用行为污染您的标记并使用Unobtrusive Javascript

@Html.DropDownList("HighlightData", new SelectListItem[]
{
  new SelectListItem() { Text = "None", Value = "0" },
  new SelectListItem() { Text = "On Demand Production", Value = "1" }
})

$('#HighlightData').change(function() {
  if ($(this).val() == 1) {
    $(.display-label').addClass('disabled');
  } else {
    $(.display-label').removeClass('disabled');
  }
});

请注意，该脚本正在将该类应用于<td>元素，并假设您不会使用<label>，如下所示（否则可能是$(.display-label').children('label').addClass('disabled');）

并使用css为元素设置样式，例如

.disabled label {
  color: grey;
}

请注意，脚本会使用class="display-label"更改所有元素，因此如果您需要更具体的内容，可能需要提供元素id属性。由于您的元素不作为标签（没有关联的表单控件来设置焦点），因此元素应该是<span>或<div>或<td>中的文本，例如

<td class="display-label">@Html.DisplayFor(t => t.Title.TitleId)</td>