Razors Html助手

时间:2017-12-05 17:26:22

标签: asp.net razor asp.net-mvc-5

如何制作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" } })

1 个答案:

答案 0 :(得分:0)

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

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

我希望它有所帮助。