如何将 bootstrap-select 中的对象值传递给 JQuery on change 函数?

问题描述 投票:0回答:0

我正在使用带有 bootstrap 5 的 asp.net core MVC 和一个名为 bootstrap-select 的库。

在 HTML 中,我有一个“前景”模型,我对其进行迭代并动态填充选择选项。

我遇到的一个问题是当我设置

value="@prospect"
它自动选择所有选项时。

另一个问题是我的 on

Change
方法被击中,我通过了事件。 然后我创建一个变量并为其分配
Json.stringfy
值并在控制台记录它,它似乎只是将命名类型作为值。

这是 HTML:

@model BusinessPlan.Core.Entities.BusinessPlan.FilteredList
<select class="selectpicker" id="mySelect" asp-for="Prospects" 
            data-live-search="true" 
            multiple
            data-selected-text-format="count"
            title="Add Prospects">
    @foreach(var prospect in Model.Prospects)
    {
        <option value=@prospect>
            <div class="prospect-list-item" style="float:left">
                <div class="title">
                       <h3> @prospect.Name</h3>
                </div>
                <div class="address">
                    @prospect.Street1, @prospect.City, @prospect.StateProvince @prospect.PostalCode
                </div>
                <div class="activity">
                    Last Activity: @prospect.LastFeedbackDate
                </div>
            </div>
        </option>
    }
</select>

JavaScript:

$(function () {
    $('select').on('change', function (e) {
        var prospect = JSON.stringify(e.target.value);
        console.log(prospect);
        addProspectToRouteEvaluation(prospect);
    });
});

var addProspectToRouteEvaluation = function (prospect) {
    $.ajax({
        url: '/RouteEvaluation/AddProspect',
        contentType: 'application/html; charset=utf-8',
        type: 'Post',
        data: {
            ID: prospect.ID, Name: prospect.Name, District: prospect.District, MCO: prospect.MCO,
            Route: prospect.Route, City: prospect.City, StateProvince: prospect.StateProvince,
            Street1: prospect.Street1, PostalCode: prospect.PostalCode, Latitude: prospect.Latitude,
            Longitude: prospect.Longitude, EntityStatusID: prospect.EntityStatusID,
            LastFeedbackDate: prospect.LastFeedbackDate, EntityStatus: prospect.EntityStatus},
        dataType: 'json'
    });
}

Ajax调用命中的控制器方法:

[HttpPost("AddProspect")]
        [RequestFormLimits(ValueCountLimit = Int32.MaxValue, ValueLengthLimit = Int32.MaxValue,               MultipartBodyLengthLimit = Int32.MaxValue)]
        public async Task<IActionResult> AddProspect(int routeEvaluationId, int planId, string ID, string Name, string District,
            string MCO, string Route, string City, string StateProvince, string Street1, string PostalCode, string Latitude,
            string Longitude, string EntityStatusID, string LastFeedbackDate, string EntityStatus)
        {
            Prospect prospect = Prospect.From(ID, Name, District, MCO, Route, City, StateProvince,
                                              Street1, PostalCode, Latitude, Longitude, EntityStatusID,
                                              LastFeedbackDate, EntityStatus);

Image

我尝试了很多东西,但都没有用。

jquery asp.net bootstrap-select
© www.soinside.com 2019 - 2024. All rights reserved.