Получение Bootstrap-Select для поиска с раскрывающимся списком для работы с шаблоном отображения / редактирования ASP.NET MVC - PullRequest
Новая
       12

Получение Bootstrap-Select для поиска с раскрывающимся списком для работы с шаблоном отображения / редактирования ASP.NET MVC

0 голосов
/ 29 ноября 2018

Я пытаюсь использовать функциональность поиска в реальном времени, предоставляемую плагином Bootstrap-Select, в приложении ASP.NET MVC.

Мне удалось заставить его работать, т. Е. Требуемые выпадающие спискис возможностью поиска, но единственная проблема в том, что я поместил код в тег скрипта.

Раскрывающиеся списки являются частью отображаемого шаблона, и если я использую теги скрипта, кажется, что остальные элементы вбритвенное представление не может получить доступ к функциям JavaScript, необходимым для загрузки правильных данных.

У меня вопрос в два раза.Во-первых, если я использую теги сценария в шаблоне частичного просмотра / редактора / отображения, отменяет ли он все остальные внешние файлы .js?

Во-вторых, как мне заставить функцию Bootstrap-Select live-search работать с внешнегоФайл .js в шаблоне частичного просмотра / редактора / отображения?

Ниже приведено то, что я использовал, чтобы сделать выпадающие списки доступными для поиска: 

@model EacWebApp.Models.ViewModels.Shared.NewPortfoliosViewModel
<script type="text/javascript" src="~/Scripts/bootstrap-select.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap-select.min.css" />
<script>
    $(function() {
        $('.selectpicker').selectpicker({
            livesearch: true
        })
    });
</script>
<div class="row form-allocation-table-header-row">
    <div class="col-sm-1 form-row-label text-center">
        DISC
    </div>
    <div class="col-sm-5 form-row-label text-center">
        PORTFOLIO
    </div>
    <div class="col-sm-3 form-row-label text-center">
        ALLOCATION
    </div>
    <div class="col-sm-1 form-row-label text-center" style="padding: 0 5px;">
        TIC
    </div>
    <div class="col-sm-1 form-row-label text-center"></div>
</div>

@for (int i = 0; i < Model.MaxNumberOfAvailablePortfolios; i++)
{
    <div class="row portfolio-allocation-dropdown">
        <div class="selected-portfolio-data">
            <input type="hidden" data-property-source="data-portfolio-name" name="Portfolios[@i].Name" />
            <input type="hidden" data-property-source="value" name="Portfolios[@i].FundId" />
            <input type="hidden" data-property-source="data-portfolio-id" name="Portfolios[@i].Id" />
            <input type="hidden" data-property-source="data-portfolio-udw-id" name="Portfolios[@i].FundUdwId" />
            <input type="hidden" data-property-source="data-portfolio-class" name="Portfolios[@i].Class" />
            <input type="hidden" data-property-source="data-portfolio-discount" name="Portfolios[@i].IsDiscountable" />
            <input type="hidden" data-property-source="data-is-phase-in-allowed" name="Portfolios[@i].IsPhaseInAllowed" />
            <input type="hidden" data-property-source="data-is-phase-out-allowed" name="Portfolios[@i].IsPhaseOutAllowed" />
            <input type="hidden" data-property-source="data-tic-real-value" name="Portfolios[@i].TIC" value="tic" />
            <input type="hidden" data-property-source="portfolio-allocation" name="Portfolios[@i].AllocationPercent" />
        </div>
        <div class="col-sm-1">
            <input type="checkbox" onclick="return false;" class="is-discounted" />
        </div>
        <div class="col-sm-5">
            <select class="form-row-dropdown portfolioList selectpicker" id="portfolioDropDown" data-live-search="true" onchange="fillSelectedPortfolioData(this)">
                <option value="empty">Empty Slot</option>
                @{
                    foreach (var portfolio in Model.AvailablePortfolios)
                    {
                        <option value="@portfolio.FundId" data-is-phase-in-allowed="@portfolio.IsPhaseInAllowed" data-is-phase-out-allowed="@portfolio.IsPhaseOutAllowed"
                                data-portfolio-discount="@portfolio.IsDiscountable" data-portfolio-udw-id="@portfolio.FundUdwId" data-portfolio-id="@portfolio.Id"
                                data-portfolio-class="@portfolio.Class" data-portfolio-name="@portfolio.Name">
                            @portfolio.Name
                        </option>
                    }
                }
            </select>
        </div>
        <div class="col-sm-3 allocation-inputs collapsed">
            <button class="minus-button-holder">
                <span class="glyphicon glyphicon-minus"></span>
            </button>
            <input class="text-center portfolio-allocation-percentage-input pseudo-verticaly-centered" value="0" oninput="validateNumberInput(event, this)" onfocus="removeZeroFromInput(this)" onblur="addZeroToInput(this)" /><span class="percentage-sign pseudo-verticaly-centered">%</span>
            <button class="plus-button-holder">
                <span class="glyphicon glyphicon-plus"></span>
            </button>
        </div>
        <div class="col-sm-3 no-portfolio-selected" style="text-align:center">-</div>
        <div class="col-sm-1 no-portfolio-selected" style="text-align:center">-</div>
        <div class="col-sm-1 portfolio-tic-container collapsed" style="padding: 0">
            <input type="text" class="portfolio-tic pseudo-verticaly-centered" data-tic-real-value="0" readonly="readonly" oninput="changeTicValue(event, this)" onfocus="removeZeroFromInput(this)" onblur="addZeroToInput(this)" /><span style="display: inline-block;" class="pseudo-verticaly-centered">%</span>
        </div>
        <div class="col-sm-1 text-center">
            <button class="portfolio-allocation-remove-allocation-percentage">
                <span class="glyphicon glyphicon-remove"></span>
            </button>
        </div>
    </div>
}

Раскрывающиеся списки работают нормально,но другая функциональность .js, похоже, отрицается.

...