调用时禁用视图组件中的所有内容

Posted 2023-02-23

【中文标题】调用时禁用视图组件中的所有内容

【英文标题】：Disable everything in view components while invoking

【发布时间】：2018-12-17 04:10:09

【问题描述】：

下面是我在其中一个视图页面中的代码（Details.Cshtml）

<div id="QAcomp" >
            @await Component.InvokeAsync("QuestionAnswers", new  activityQuestionAnswersList = Model.ActivityQuestionAnswers?.ToList() )
</div>

以上代码根据 UI 值调用组件问题和答案。 我现在的问题是如何查看 Details.cshtml 页面中只有只读或禁用的组件。我的意思是无论内容是什么，它都应该被禁用。并且用户应该无法更改它。

谁能帮我解决这个问题？

 public async Task<IViewComponentResult> InvokeAsync(IList<ActivityQuestionAnswersModel> activityQuestionAnswersList = null, bool readsonly = false)
    
        var questions = await _context.FQuestions.AsNoTracking().OrderBy(s=>s.DisplayOrder)

            .ProjectTo<QuestionsViewModel>().ToListAsync();
        ViewData["readonly"] = readsonly;


        return activityQuestionAnswersList == null
            ? View(questions)
            : View("ActivityQuestionAnswers",GetActivityQuesetions(questions, activityQuestionAnswersList));
    

【参考方案1】：

您已经在使用的InvokeAsync 的第二个参数是传递给视图组件上的InvokeAsync 方法的参数。就像您已经在 QA 列表中传递一样，继续传递 bool，表明它是否是只读的。

public async Task<IViewComponentResult> InvokeAsync(
    List<ActivityQuestionAnswers> activityQuestionAnswersList, bool readonly = false)

    ViewData["readonly"] = readonly;
    ...

然后：

@await Component.InvokeAsync("QuestionAnswers", new  activityQuestionAnswersList = Model.ActivityQuestionAnswers?.ToList(), readonly = true )

然后，您可以在视图中利用此布尔值将 readonly 属性添加到您的输入中：

@
    var readonly = ViewData["readonly"] as bool? ?? false;


...

<input asp-for="Foo" readonly="@readonly">

如果@readonly 是false 或null，Razor 将省略该属性。

【讨论】：

我将以下方法更改为以下方法。但没有像你所说的那样工作。我仍然看到组件中的下拉菜单可以编辑，我希望它们变灰或禁用

您可能想要设置disabled 属性。它的工作原理相同。

【参考方案2】：

对于 ViewComponent，它将在 Web 浏览器中呈现为 Html。因此，如果要禁用 ViewComponent 中的所有内容，则需要控制 ViewComponent 中的 Contoller 样式。

不要在每个标签上添加disabled，我建议您尝试css 来格式化您的视图。

您可以尝试将以下内容添加到wwwroot/css/site.css：

#QAcomp 
text-decoration: none;
pointer-events: none;


#QAcomp input 
    display: block;

如果有一些控件没有被禁用，你可以添加额外的样式来禁用它们。

更新

变灰

#QAcomp 
text-decoration: none;
pointer-events: none;

#QAcomp input 
    display: block;
    background-color: #eee;

#QAcomp select 
    display: block;
    background-color: #eee;

【讨论】：

在 CSS 中是否有一个特殊的属性可以只显示 div QAcomp 中的文本框、下拉菜单？