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

【问题标题】：Pass textbox values from view to ViewComponent将文本框值从视图传递到 ViewComponent
【发布时间】：2017-07-07 13:15:10
【问题描述】：

我有一个视图，它调用视图组件并通过以下方式传递一个名为 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>
}

最后，在视图组件内部：包含参数：

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

有什么想法吗？

【问题讨论】：

标签： c# razor asp.net-core asp.net-core-viewcomponent

【解决方案1】：

我建议不要将模型设为 IEnumerable，而是创建：

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

   public string start { get; set; }

   public string end { get; set; }
}

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

您遇到的问题是您需要一个中间人来传递值。此解决方案期望您需要在回发场景中获取值并将其传递。如果您希望在客户端上发生这种情况，那么需要一个 JavaScript 解决方案。

【讨论】：

这样的 JavaScript 怎么会像 @Brian Mains？
可能是这样的：stackoverflow.com/questions/40954683/…
我通常使用控制器操作，它会返回所需的任何内容（对我来说是部分视图，因为我仍在 MVC 5 上）：stackoverflow.com/questions/12559515/…
我仍然停留在这个问题上。你想直接帮助我吗？ @布莱恩电源？我已经下载了 Knockout JS 来绑定一些数据模型。虽然不能让它正常工作......

【解决方案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"]" />

【讨论】：