Question

我有一个调用视图组件的视图，并以下列方式传递一个名为Konstant的模型：

@foreach (Konstant item in Model)
{
    <div class="tab-content">
        <div id="@item.KANAL" class="tab-pane fade in">
            @await Component.InvokeAsync("MeterReader2", new { k = item })
        </div>
    </div>
}

如果我们查看ViewComponent，它看起来像这样：

public class MeterReader2ViewComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync(Models.Konstant k) 
    // Endast en kanal.
    { 
     // logic.... 
    }
}

到目前为止，这对我有用。我的问题是，如何在视图中引入两个文本框，其中应包括开始和结束日期字段，其中应将输入的值发送到视图组件？

我在想这样的事情：

<input type="text" id="startDate", name="start" value="" />
<input type="text" id="endDate", name="end" value="" />

然后：

@foreach (Konstant item in Model)
{
    <div class="tab-content">
        <div id="@item.KANAL" class="tab-pane fade in">
            @await Component.InvokeAsync("MeterReader2", new { k = item, start = startDate, end = endDate })
        </div>
    </div>
}

最后，在View Component本身中：包含参数：

public async Task<IViewComponentResult> InvokeAsync(Models.Konstant k, string start, string end) // Endast en kanal.
{ 
  // logic.... 
}

有什么想法吗？

Answer 1

我建议创建：

，而不是将模型设为IEnumerable

public class KonstantViewModel
{
   public List<Konstant> Konstants { get; set; }

   public string start { get; set; }

   public string end { get; set; }
}

由于输入的名称是开始和结束，因此命名输入将回发并映射到此模型中的开始和结束属性（如果您也喜欢，也可以使用NameFor扩展来显式映射）。所以在回发时，模型将接收开始/结束，然后您可以将这些模型属性传递给视图组件。

你遇到的问题是你需要一个中间人来传递价值观。此解决方案期望您需要获取值并在回发方案期间传递它们。如果您希望在客户端上发生这种情况，则需要JavaScript解决方案。

Answer 2

您可以添加到ViewData，然后在您的视图中将其添加到此

中

public async Task<IViewComponentResult> InvokeAsync(Models.Konstant k, string start, string end)
{
     ViewData["startDate"] = start;
     ViewData["endDate"] = end;
     rest of your logic here ...
}

<input type="text" id="startDate", name="start" value="@ViewData["startDate"]" />
<input type="text" id="endDate", name="end" value="@ViewData["endDate"]" />

将文本框值从视图传递到ViewComponent

2 个答案: