Passing "data-" to controller - asp.net-mvc

Question

I have the following code...
HTML:
<button type="button" class="btn btn-primary" id="filterData"
data-filterString="#Model.LastName">Filter</button>
TypeScript:
$("button[id='filterData']").click(() => {
var dataList = [];
var filter = $(this).data("filterString");
$("input[class='personRecord']").each(function() {
dataList.push($(this).val());
});
var parameters = JSON.stringify({ "filterString": filter, "dataList":paymentList });
$.ajax({
url: "/Employee/FilterName",
data: parameters,
type: "POST",
contentType: "application/json; charset=utf-8",
success: function () {
alert("Success");
}
});
});
Controller:
[HttpPost]
public void SendAll(string filterString, List<string> dataList) {
...
}
However, the variable filter keeps returning "undefined". How do you pass custom data items, data-filterString in this case?

Answer 1

In your jQuery, you can only use lower case values for the data method, even if your attributes are upper/mixed case. So you should write:
var filter = $(this).data("filterstring");
If you do use mixed case in your key, jQuery converts that to a dashed variable, so when you search for filterString, your attribute should be called data-filter-string.
$(function() {
console.log($('#test').data('filterstring'));
console.log($('#test').data('filterString'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test" data-filterString="value1" data-filter-string="value2"></div>