Question

我想用MVC中的动态数据填充Modal弹出窗口中的下拉列表。当我单击Open时，DisplayModal模式应在dropdowmlist中显示更新的数据。我的Jquery代码未在下拉列表中显示带有新数据的模态弹出窗口。

查看

     <table>
       <tr>
           <td>
              @Html.DisplayName("IT")
             </td>
             <td>
      <a class="LinkId" data-toggle="modal"  data-url="/Home/_ModalPopup?Page=1">Open</a>
        </td>
           </tr>
              <tr>
               <td>
                 @Html.DisplayName("Sales")
                   </td>
                    <td>
        <a class="LinkId" data-toggle="modal"  data-url="/Home/_ModalPopup?Page=2">Open</a>

                  </td>
                </tr>                            
        </table>
    @{Html.RenderAction("__MEmpModal"); }

部分模态

<div class="modal fade" id="DisplayModal" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    @Html.DropDownListFor(m => m.Category, Model.CategoriesList, new { @class = "form-control" })
                </div>               
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary pull-right">Save</button>
            </div>
        </div>
    </div>
</div>

脚本

 $(document).on("click", '.LinkId', function (e) {
        debugger;
        $.ajax({
            url: $(this).data("url"),
            type: "GET",
        }).done(function (partialViewResult) {
            $("#DisplayModal").html(partialViewResult);
            $('#DisplayModal').focus();
        });
    });

Answer 1

尝试一下。

链接

<a href="/Home/_ModalPopup?Page=1" class="modal-link"> Open</a>

脚本

$('body').on('click', '.modal-link', function (e) {
        $('#modal-container').removeData('bs.modal');
        e.preventDefault();
        $(this).attr('data-target', '#modal-container');
        $(this).attr('data-toggle', 'modal');
        var url = $(this).attr('href');
        $.get(url, function (data) {
            $('#modal-content').html(data);
            $('#modal-container').modal('show');
        });


    });

Answer 2

<div class="modal fade" id="DisplayModal" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    @Html.DropDownListFor(m => m.Category, Model.CategoriesList, ID="DPCategoriesList" new { @class = "form-control" })
                </div>               
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary pull-right">Save</button>
            </div>
        </div>
    </div>
</div>

$('#DPCategoriesList').on("change", function () {  
            var CategoriesList = $('#DPCategoriesList').val();  
            var obj = { CategoriesList: CategoriesList };  
            AjaxCall('url', JSON.stringify(obj),'POST').done(function (response) {  
                if (response) {  
                     $('#modal-content').html(response);
            $('#modal-container').modal('show');

                }  
            }).fail(function (error) {  
                alert(error.StatusText);  
            });  
        });

Answer 3

非常感谢@StephenMuecke的指导。他的指导帮助我解决了此下拉动态负载问题。这是一个简单的脚本，可在下拉菜单中附加数据。

$(document).on("click", '.LinkId', function () {
            var url = $(this).data("url");
            var Category = $("#Category");
            $.getJSON(url, { id: $(this).val() }, function (response) {
                Category.empty().append($('<option></option>').val('').text('Please select'));
                $.each(response, function (index, item) {
                    Category.append($('<option></option>').val(item.Value).text(item.Text));
                });
                $('#DisplayModal').modal('show');
            });
        })

如何使用MVC中的动态数据填充Modal弹出窗口中的dropdownlist？

3 个答案: