【问题标题】:How can I access attributes of Html elements in ASP.NET MVC如何在 ASP.NET MVC 中访问 Html 元素的属性
【发布时间】:2011-02-08 08:32:44
【问题描述】:

使用 ASP.NET Webforms,我可以将控件拖放到表单上并能够访问其属性:

if (number == 0)
   AddButton.Enabled = false;

虽然我不能在 ASP.NET MVC 视图模板上拖放控件,但我可以更改它的属性吗?

例如:

  • 在某些情况下禁用按钮,并在情况发生变化时启用它。
  • 能够将按钮的文本从“Next->”更改为“Finish

【问题讨论】:

    标签: c# .net html asp.net-mvc


    【解决方案1】:

    ASP.NET MVC 是一种轻量级的编程模型。它不会像普通的 ASP.NET 那样在服务器上为您创建控制对象模型。通常,您将使用客户端 javascript(可能在 JQuery 的帮助下)来操作由视图中的标记放置在页面上的控件的属性。

    如果您想快速开始使用 ASP.NET MVC,请查看Sharp Architecture(开源)。他们提供指导和各种好东西,可帮助您快速提高 ASP.NET MVC 的工作效率。

    【讨论】:

    • 如果我想在生成HTML之前修改属性怎么样。让我们想象一些简单的事情。我有一个我展示的收藏。我还有一个按钮,其文本为“删除”。我事先不知道收藏的大小。如果集合为 0,我应该在视图呈现时保持启用删除按钮吗?我并不是说我想在视图渲染之后更改按钮的文本,而是在它渲染之前
    • @Richard77 我在您的控制器中做出 所有 类似的决定,并尽可能保持视图愚蠢。我会在我的模型上有一个属性为ShowRemoveButton,视图会查看它以显示或隐藏删除按钮。
    • @Mark -- 你能给出一个例子来说明这一点(不使用 Javascript -- 正如 Goerge Stocker 指出的那样)?
    • @Richard77 - 目前还不清楚您希望这发生在服务器上还是客户端上。如果您需要它在服务器上发生,乔治的回答是正确的,我会的。如果想让它发生在客户端上,正如 Tom 所说,jQuery 是你最容易的选择。
    • @Mark -- 我听说过所有关于程序员如何在不接触 Javascript 的情况下设置基本功能的说法。也就是说,我同意@George。但是,当您说最好将逻辑放在控制器中时,我正在等您这样做(我认为这就是您在编辑答案时所做的)。
    【解决方案2】:

    通常,您很少想要这样做。 MVC方式是:

    1. 让您的控制器使用生成 HTML 所需的对象填充模型
    2. 将模型传递给适当的视图
    3. 让视图根据模型中对象的值输出 HTML。

    如果您经常发现自己在生成 HTML 后需要修改 HTML 属性,那么您可能没有正确应用此模式。

    【讨论】:

    • 如果我想在生成HTML之前修改属性怎么样。让我们想象一些简单的事情。我有一个我展示的收藏。我还有一个按钮,其文本为“删除”。我事先不知道收藏的大小。如果集合为 0,我应该在视图呈现时保持启用删除按钮吗?我并不是说我想在视图呈现之后更改按钮的文本,而是在呈现之前。
    【解决方案3】:

    所有客户端行为都是通过 javascript 编写的。 MVC 默认附带 jQuery (www.jquery.com)。

    我已经概述了您可以如何处理您的示例:

    <input id="nextFinishBtn" type="button" value="Next ->"/>
    

    假设如果用户取消选中名为“配置高级设置”的复选框,您希望将其更改为“完成”。默认情况下是这样的

    <%= Html.CheckBox("DoAdvancedSettings", "true", new { onclick='changeNextButton()' }); %>
    <script langauge="javascript">
        function changeNextButton() {
            $('#nextFinishBtn').val('Finish');
        }
    </script>
    

    一般来说,您可以使用 .attr 结构访问 jQuery 中任何元素的任何属性:

    $('#nextFinishBtn').attr('disabled','disabled');
    

    你用两个参数调用它来设置一个值,只用一个参数来获取值。所以要查看按钮是否被禁用,你可以这样做:

    if ($('#nextFinishBtn').attr('disabled')=='disabled') { alert('button is disabled'); }
    

    【讨论】:

      【解决方案4】:

      有(至少)两种方法可以做到这一点:

      方法一:简单方法

      您可以通过在视图中添加逻辑来做到这一点:

      <input type="button" disabled=<%= Model.number <= 0 %> />
      

      Model.number 是控制器传递给视图的项目数。如果它小于或等于零,disabled 将是true

      语法可能不准确,我没有尝试过,但这是我要做的事情。

      这将适用于值的初始设置;正如其他答案所指出的那样,在不刷新页面的情况下更改它是使用 JavaScript 的问题。

      方法2:过于复杂但更“MVC”的方式

      如果你想要控制器而不是视图中的逻辑,你应该设置一个特定的 ViewModel 对象,你可以将逻辑添加到:

      视图模型

      public class MyObjectViewModel
      {
          MyObject MyObject {get; private set; }
          bool Enabled; {get; set; }
          public MyObjectViewModel(MyObject obj)
          {
              MyObject = obj;
          }
          string IsEnabled
          {
              get
              {
                   if (Enabled)
                   {
                       return "";
                   }
                   else return "disabled=disabled";
              }
          }
      

      控制器

      public ActionResult Show(int id)
      {
          MyObject myObject = repository.GetMyObjectById(id)
          MyObjectViewModel movm = myObject; 
          movm.Enabled = myObject.number > 0;
          return View(movm);
      }
      

      查看

      <input type="button" <%= Model.IsEnabled %> />
      

      再说一次,语法和用法可能有点偏差,我只是在头脑中制作这个原型,而且我还没有可以为你测试的地方。

      如果您对 ViewModel 感兴趣,这里有一些很好的资源:

      如果它实际上被禁用,我已将其更新为使用字符串返回 disabled=disabled

      【讨论】:

      • @George Stocker -- 这正是我想要的。我会尝试并回到这里,因为这也可能会打开其他门。
      • @George Stocker - 我想我宁愿看到在控制器中做出的决定而不是视图。
      • @Mark @Richard77 :查看更新的答案,如果您希望控制器做出决定,我添加了您将使用的逻辑。
      • @George:看起来“禁用”属性只能识别一个值()。所以为了让它工作,我用你写的作为逻辑的来源。但是,我还为 HtmlHelper 类编写了一个扩展方法,我称之为“InputSubmit”。扩展方法需要一个布尔参数,我称之为“IsEnabled”。当 IsEnabled = true -> 扩展方法生成“disabled = disabled”。如果 IsEnabled = false,则扩展方法生成“” -> 按钮被禁用
      • @Richard77 很酷的交易,随时修改我的答案并在底部添加您使用的代码,这样任何人都可以看到您做了什么。
      【解决方案5】:

      我会查看HTML helpers

      <%= Html.Button("AddButton","Button Text",HtmlButtonType.Submit,"SomeJavaScriptFunction()",new {disabled="disabled"} )  %>
      

      唯一真正的问题是,当您添加作为关键字的属性时,最后的匿名类会变得有趣。例如,要添加一个 Css 类,您需要一个类似于 new {@class="myCssClassName"} 的匿名类。

      【讨论】:

        【解决方案6】:

        在回复 George Stocker 时,我注意到 disabled 属性只能获得 1 个值(disabled = "disabled")。此外,其他任何东西也会禁用输入控件。例如, disabled = true 和 disable = false 仍将禁用控件。

        看起来(我不确定)禁用属性会禁用控件而没有启用控件。所以我决定为 HtmlHelper 类写一个扩展方法。

        public static class MyHelperClass
        {
          public static string InputDisable(this HtmlHelper html, string name, string myValue,     bool isEnabled)
          {
            string show = "";
            if(!isEnable)
               show = "disabled = \"disabled\"";
            return "<input type = \"submit\" value = \"" + myValue + "\"" + show + " />";
          }
        }
        

        现在我可以通过这种方式访问​​该方法

        <% = Html.InputDisable("myInput", "My Button", false)%>
        

        所以最后一个参数决定了输入控件是否可见。

        现在使用 Goerge Stocker 逻辑,我可以定义 isEnabled 的值。

        感谢您的所有回答

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2013-12-01
          • 1970-01-01
          • 1970-01-01
          • 2010-12-23
          • 2014-04-29
          • 2016-10-26
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多