developer tip

Html.DropDownList-사용 안함 / 읽기 전용

copycodes 2020. 11. 22. 19:56
반응형

Html.DropDownList-사용 안함 / 읽기 전용


MVC Html.DropDownList를 사용할 때 드롭 다운 상자를 읽기 전용으로 만들려면 어떤 옵션을 설정해야합니까?

나는 같은 것을 시도했다 ....

Html.DropDownList("Types", Model.Types, new { _Enabled = "false" })

... 그리고이 라인을 따라 많은 다른 것들; 아아 기쁨이 없다!

쉬울 거라 생각했는데 ..... 아마도!


이 시도

Html.DropDownList("Types", Model.Types, new { @disabled = "disabled" })

캐치 22에 관하여 :

를 사용 @disabled하면 필드가 액션 (Mamoud)으로 전송되지 않으며를 사용하는 @readonly경우에도 드롭 다운 버그로 값을 변경할 수 있습니다.

해결 방법 :을 사용 @disabled하고 드롭 다운 뒤에 숨겨진 필드를 추가합니다.

@Html.HiddenFor(model => model.xxxxxxxx)

그런 다음 진정으로 비활성화되고 작업에도 전송됩니다.


<script type="text/javascript">
$(function () {
        $(document) .ajaxStart(function () {
                $("#dropdownID").attr("disabled", "disabled");
            })
            .ajaxStop(function () {
                $("#dropdownID").removeAttr("disabled");

            });

});
</script>

드롭 다운 목록을 비활성화하고 기본 ID를 숨겨야했습니다.

<div class="form-group">
        @Html.LabelFor(model => model.OBJ_ID, "Objs", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("OBJ_ID", null, htmlAttributes: new { @class = "form-control", @disabled = "disabled"})
            @Html.HiddenFor(m => m.OBJ_ID)
            @Html.ValidationMessageFor(model => model.OBJ_ID, "", new { @class = "text-danger" })
        </div>
    </div>

또는 다음과 같이 시도 할 수 있습니다.

Html.DropDownList("Types", Model.Types, new { @readonly = "true" })

스타일에 넣어

 select[readonly] option, select[readonly] optgroup {
        display: none;
    }

어떤 사람들에게는 분명하지만 다른 사람들에게는 분명하지 않을 수있는 팁 ..

기반으로 HTML 도우미를 사용하는 경우 DropDownListForID가 HiddenFor입력에 복제됩니다 . 따라서 HTML에 잘못된 중복 ID를해야합니다 그리고 당신은 자바 스크립트를 사용하는 경우를 채울 HiddenForDropDownList다음 문제가있는 것입니다.

해결책은 htmlattributes 배열에서 ID 속성을 수동으로 설정하는 것입니다.

@Html.HiddenFor(model => model.Entity)

@Html.EnumDropDownListFor(
  model => model.Entity, 
  new { 
         @class = "form-control sharp", 
         onchange = "", 
         id =` "EntityDD", 
         disabled = "disabled" 
       }
)

그냥해서 하루라고 불러

Model.Id > -1 ? Html.EnumDropDownListFor(m => m.Property, new { disabled = "disabled" }) : Html.EnumDropDownListFor(m => m.Property)

@Html.DropDownList("Types", Model.Types, new { @disabled = "" })

공장


Html.DropDownList ( "Types", Model.Types, new {@disabled = "disabled"}) @ Html.Hidden (Model.Types) 및 데이터 저장 및 복구를 위해 숨겨진 컨트롤 사용


For completeness here is the HTML Helper for DropDownListFor that adds enabled parameter, when false select is disabled. It keeps html attributes defined in markup, or it enables usage of html attributes in markup, it posts select value to server and usage is very clean and simple.

Here is the code for helper:

public static MvcHtmlString DropDownListFor<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> selectList, object htmlAttributes, bool enabled)
{
  if (enabled)
  {
    return SelectExtensions.DropDownListFor<TModel, TProperty>(html, expression, selectList, htmlAttributes);
  }

  var htmlAttributesAsDict = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
  htmlAttributesAsDict.Add("disabled", "disabled");
  string selectClientId = html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(ExpressionHelper.GetExpressionText(expression));
  htmlAttributesAsDict.Add("id", selectClientId + "_disabled");

  var hiddenFieldMarkup = html.HiddenFor<TModel, TProperty>(expression);
  var selectMarkup = SelectExtensions.DropDownListFor<TModel, TProperty>(html, expression, selectList, htmlAttributesAsDict);
  return MvcHtmlString.Create(selectMarkup.ToString() + Environment.NewLine + hiddenFieldMarkup.ToString());
}

and usage, goal is to disable select if there is just one item in options, markup:

@Html.DropDownListFor(m => m.SomeValue, Model.SomeList, new { @class = "some-class" }, Model.SomeList > 1)

And there is one even more elegant HTML Helper example, no post support for now (pretty straight forward job, just use HAP and add hidden input as root element sibling and swap id's):

public static MvcHtmlString Disable(this MvcHtmlString previous, bool disabled, bool disableChildren = false)
{
  if (disabled)
  {
    var canBeDisabled = new HashSet<string> { "button", "command", "fieldset", "input", "keygen", "optgroup", "option", "select", "textarea" };
    var doc = new HtmlDocument();
    doc.LoadHtml(previous.ToString());
    var rootElements = doc.DocumentNode.Descendants().Where(
      hn => hn.NodeType == HtmlNodeType.Element && 
      canBeDisabled.Contains(hn.Name.ToLower()) && 
      (disableChildren || hn.ParentNode.NodeType == HtmlNodeType.Document));

    foreach (var element in rootElements)
    {
      element.SetAttributeValue("disabled", "");
    }
    string html = doc.DocumentNode.OuterHtml;
    return MvcHtmlString.Create(html);
  }
  return previous;
}

For example there is a model property bool AllInputsDisabled, when true all html inputs should be disabled:

@Html.TextBoxFor(m => m.Address, new { placeholder = "Enter address" }).Disable(Model.AllInputsDisabled)

@Html.DropDownListFor(m => m.DoYou, Model.YesNoList).Disable(Model.AllInputsDisabled)

I've create this answer after referring above all comments & answers. This will resolve the dropdown population error even it get disabled.

Step 01

Html.DropDownList("Types", Model.Types, new {@readonly="readonly"})

Step 02 이것은 CSS 포인터 이벤트 제거 코드입니다.

<style type="text/css">
    #Types {
        pointer-events:none;
    }
</style>
그러면 예상 한 결과를 얻을 수 있습니다.

테스트 및 검증

참고 URL : https://stackoverflow.com/questions/1636103/html-dropdownlist-disabled-readonly

반응형