Question

以下是其中一个视图页面（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));
    }

Answer 1

您已经在使用的InvokeAsync的第二个参数是传递给视图组件上InvokeAsync方法的参数。就像您已经通过质量检查列表一样，请继续并通过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将忽略该属性。

Answer 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;
}

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

2 个答案: