如何用“预设回复”填充文本框？答案

【问题标题】：How to fill a textbox with a "canned response"?如何用“预设回复”填充文本框？
【发布时间】：2013-02-01 12:05:39
【问题描述】：

（免责声明/承认我的罪过：我被困在 Windows/桌面应用程序中很长一段时间，所以我的 Web 技能非常不发达。所以请原谅我在 UI 问题上愚蠢的新手问题！）

我正在编写一个 ASP/MVC3-Razor UI。我的模型包含以下属性（除其他外）：

public string MyResponse { get; set; }
public IEnumerable<CannedResponse> CannedResponses { get; set; }

CannedResponse 的属性在哪里

public int ID { get; set; }
public string Description { get; set; }
public string Text { get; set; }

在 UI 上，我有一个文本区域供用户输入他的响应文本。或者，为了节省时间，他可以从下拉列表中选择一个预设响应，然后该预设响应文本将填充文本区域。

我可以将所有正确的数据放入模型中。我不知道该怎么做的部分是使用客户端事件创建下拉列表，以使用所选预设响应的“文本”属性填充“我的响应”文本区域。我认为这必须在 Javascript 中完成，但我不确定如何将 Razor 代码与 Javascript 联系起来。到目前为止我所拥有的是：

@Html.DropDownList("cboCanned", Model.CannedResponsed.Select(c => 
  new SelectListItem { Value = c.ID.ToString(), Text = c.Description } ))
@Html.TextAreaFor(m => m.MyResponse)

JavaScript 代码应该是什么，如何将其连接到下拉选择事件？

【问题讨论】：

如果这更容易的话，您可以在服务器上执行此操作：有一个预设响应菜单和一个提交按钮，该按钮将 GET 提交到服务器，服务器又再次为页面提供服务，但响应为 pre - 填充文本区域。但是，这当然会将表单刷新回其原始状态，因此如果用户正在编辑其他控件，则不理想。
@halfer，是的，但效率较低，我想在客户端执行此操作，即使只是为了学习！
你当然可以用 JS 做到这一点，但我认为读者更希望你先尝试一下:)。 jQuery 适合你吗？如果是这样，那真的很容易——只需加载库，获取一个准备好 DOM 的侦听器，然后在其中设置一个菜单更改事件，并在其中重置 textarea 的值。听起来很复杂，但如果你把它分成几块并在网上搜索每一位，你会没事的。 jQuery 文档非常棒。
@halfer - {咧嘴一笑} ... ehhh ...你能指出一些开始的步骤吗？如何加载库，获取 DOM 就绪的侦听器？等等。？（我对这个 Web UI 的东西真的很陌生！）
加载库：<script type="text/javascript" src="/path/to/jquery.js"></script>。 DOM 就绪只是浏览器在准备好处理 HTML 结构时触发的事件，请参见此处：api.jquery.com/ready。

标签： c# javascript asp.net-mvc-3 razor

【解决方案1】：

据我了解，MyResponse 是保存您选择的“值”的变量，所以这应该会有所帮助：

 @Html.DropDownListFor(m => m.MyResponse , 
                              new SelectList{ Value = c.ID.ToString(), Text = c.Description },          
                              "Value", "Text", Model.MyResponse ))

第一个参数：将 DropDownList 与哪个值绑定：
m => m.MyResponse（这是您的模型，您将其发送到 Razor 视图）

第二个参数：您的列表（请注意，您可以在模型中传递列表，以免在视图中创建它，只是为了使视图尽可能简单）

第三个参数： "Value"（保存列表元素值成员的属性名称）

第四个参数： "Text"（保存列表元素显示成员的属性名称）

第五个参数： Model.MyResponse（模型中的选定变量持有选定项的值）

希望这些信息有用...

【讨论】：