剃须刀 Html 助手

Question

如何制作 Razors 助手“Dropdownlist”或必须传递哪些参数才能使其可编辑。例如，如果我想向下滚动它应该让我，或者如果我想输入相反它也应该让我。

@Html.DropDownList("CustomerId", null, htmlAttributes: new { @class = "form-control" } )

另外，如果您选择在 EF 剃须刀上使用 twitter-typeahead，如何使用“Editfor”，以便用户单击正确的项目后，它将该项目的 ID 发送到数据库。换句话说，如何使用带有剃须刀“Editfor”助手的导航属性。

@Html.EditorFor(model => model.CustomerId,  null, "customer",new {htmlAttributes = new { @class = "form-control" } })

Answer 1

我将尝试帮助您将以下页面的基本示例转换为等效的剃须刀页面。

http://twitter.github.io/typeahead.js/examples/

您必须知道这个 jquery 插件只显示一个字符串列表，用户将选择其中一个值，然后您必须使用 C# 代码查找 id。我只会向您展示如何使用剃须刀页面实现 twitter 字体，但您必须做一些额外的工作才能获得 id。

首先你需要html部分

<div id="the-basics">
  <input class="typeahead" type="text" placeholder="States of USA">
</div>

接下来，您需要使用 C# 声明您的列表。

List<string> Values = new List<string> { "Value 1", "Value 2", "Value 3" };

现在您将拥有以下 HTML。

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var states = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Values));

$('#the-basics .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'states',
  source: substringMatcher(states)
});

希望对你有帮助。