在下拉选择中更改 HTML 控件的状态答案

【问题标题】：Changing the state of HTML Control on dropdown selection在下拉选择中更改 HTML 控件的状态
【发布时间】：2015-11-28 16:24:11
【问题描述】：

我有一个详细信息页面 (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，以便启用/禁用控件？

这是正确的方法吗？或者有没有其他更简单的方法来解决这个问题？

-艾伦-

更新

局部视图（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>

I would like to disable @Html.LabelFor(t => t.Title.TitleId) when the selection value is 1.

【问题讨论】：

你为什么要进行 ajax 调用（而不是仅仅改变当前页面上控件的状态）。而且 ajax 调用不会重定向，所以 return RedirectToAction("Details", new { id = id }); 毫无意义。
我正在考虑重新发布页面并更改控件的状态。告诉我我是否完全脱离了轨道
更新视图，显示一些你想禁用的其他控件，这样我就可以给你一个答案（你确实意识到禁用的控件不会回发？）
其实我在这里漏了一点。我需要禁用在细节视图中呈现的局部视图中的控件。我将编辑问题
禁用@Html.LabelFor(t => t.Title.TitleId) 是什么意思（您可以禁用<label> 元素-它不是表单控件），您甚至似乎没有属性Title.TitleId 的表单控件所以为什么你还有<label> 元素？

标签： jquery asp.net-mvc asp.net-mvc-4 asp.net-mvc-5

【解决方案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>

【讨论】：