bootstrap tagsinput not working in ie

Question

I have created an webapp in asp.net MVC, I integrated bootstrap 3 and Bootstrap-TagsInput for visual formating of my data. But tagsInput not working in IE. I tested the example page of tagsinput in ie and working very well. Below my code razor and the jquery implementation for adding data-role="tagsinput" attribute in my tag object

<div class="form-group">
    @Html.LabelFor(x => x.Tag)
    @Html.TextBoxFor(x => x.Tag, new { @class = "form-control" })
</div>

JS

$(Document).ready(function () {
    $("#Tag").attr('data-role', 'tagsinput');
});

Below the rendering code in IE:

<div class="form-group">
    <label for="Tag">Tag: </label>
    <input name="Tag" class="form-control" id="Tag" type="text" value="" data-role="tagsinput">
</div>

I have in the same project i have bootstrap-Tables can this be the problem?

Answer 1

I found solution. I have created a simple extension for TextBoxFor html helper:

    public static MvcHtmlString TextBoxTagFor<TModel, TProperty>(
         this HtmlHelper<TModel> helper,
         Expression<Func<TModel, TProperty>> expression)
    {
        return helper.TextBoxFor(expression, new { @class = "txt", data_role="tagsinput" });
    }

as you can see date-role becomes data_role in this way the razor editor accept data role attribute.