Question

我有一个MVC 5 c＃项目使用Bootstrap bootstrap-transition.js v2.3.1，bootstrap-modal.js v2.2.0，jQuery jQuery JavaScript Library v2.1.3，最后选择2 Version: 3.5.2。

在这个项目中，我有一个模态，其中包含以下信息：

<div class="modal fade" id="@Model.modalId" tabindex="-1" role="dialog" aria-labelledby="@Model.modalId" aria-hidden="true">
    <div class="modal-dialog" style="overflow-y: auto; max-height: 80vh;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">@Model.modalTitle</h4>
            </div>
            <div class="modal-body" data-val="@Model.packageId">
                <form class="form-horizontal">
                    <div class="control-group">
                        <label class="control-label">Package Name: </label>
                        <div class="controls">
                            <input type="text" class="form-control" id="package-name" placeholder="@Model.pkgNamePlaceHolder" value="@Model.pkgNameValue">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">Select the materials:</label>
                        <div class="controls">
                            <input class="select2s" data-edit-values="@Model.materialsString" data-o2f-placeholder="Select Materials..." data-o2f-url="@Url.Action("MaterialsMultiple", "Home")" data-val="false" id="MaterialId" name="MaterialId" multiple="multiple" type="text" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="@Model.saveButtonId" data-url="@Model.saveButtonUrl">@Model.saveButtonText</button>
            </div>
        </div>
    </div>
</div>

在cshtml中，我使用以下两行来渲染模型：

 ModalPackageInfo createModal = new ModalPackageInfo("createPkgModal", Url.Action("CreatePackage", "Package"), true);
    Html.RenderPartial("_ModalPackagePopup", createModal);

当我第一次打开模态时，它是空的，这很好。但是，如果我更改其中一个字段，关闭它并再次重新打开它，旧信息仍然存在。我想避免这种行为，我想在关闭时重置模态的信息。

为实现这一点，我尝试了此讨论中的每个解决方案，但没有成功：

how to destroy bootstrap modal window completely?

将包名称字段更改为空是很容易的，我只做$(#createPkgModal input#package-name).val('')并且它可以正常工作，但是使用select2的其他字段不受此更改的影响。

如何解决此问题并在每次关闭模式时重置模态数据？

Answer 1

可能有很多方法可以重置模态数据，但是，我使用的onse是使用jQuery并使用$(#fieldId).val('');手动重置每个字段。

对于select2，我必须使用selecte的变体：$('#fieldId').select2('data', null);

使用bootstrap + jQuery重置模态数据

1 个答案: