Home Razors Html Helpers
Reply: 1

Razors Html Helpers

yanker
1#
yanker Published in 2017-12-05 17:26:21Z

How do you make a Razors helper "Dropdownlist" or what arguments would have to pass to make it editable. For example if I want to scroll down it should let me or if I want type Instead it should let aswell.

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

Also, if you I choose to use twitter-typeahead with EF razors how do use the "Editfor" so that once the user click on the right item, it sends the ID of that item to the database. In-other words, how do use a navigation property with razors "Editfor" helper.

@Html.EditorFor(model => model.CustomerId,  null, "customer",new {htmlAttributes = new { @class = "form-control" } })
pitaridis
2#
pitaridis Reply to 2017-12-06 07:19:59Z

I will try to help you convert the basic example of the following page to a razor page equivalent.

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

You must know that this jquery plugin displays just a list of strings and the user will select one of the values and then you will have to find the id using C# code. I will just show you how to implement the twitter typehead using razor pages but you will have to make some extra work in order to get the id.

First of all you will need the html part

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

Next you need to declare your list using C#.

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

Now you will have the following 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)
});

I hope it helps.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.335041 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO