Question

我正在尝试从创建的表中获取报告。事情是我现在有3个不同的按钮来触发3个不同的模式。这种方法有效，但我认为没有必要单独创建它们。我只希望将一种模态与自动路由到相关的“动作”。我认为它将通过jquery解决，但我似乎无法理解。

触发模态的按钮在下面。

 <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a data-toggle="modal" data-target="#GeneralModal" class="dropdown-item" href="#">General Report </a>             
                        <a data-toggle="modal" data-target="#VehicleModal" class="dropdown-item" href="#">Vehicle Report</a>
                        <a data-toggle="modal" data-target="#WarrantylModal" class="dropdown-item" href="#">Warranty Report</a>
                    </div>

我的模态在下面。

<div class="modal fade" id="GeneralModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportGeneral" role="form" method="post">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Excel Report</h5>
                <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 m-form__group row m--margin-top-20">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Start Date
                    </label>
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
                    </div>
                    <label class="col-form-label col-lg-3 col-sm-12">
                        End Date
                    </label>
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
                <button type="submit" class="btn btn-primary">Get Report </button>
            </div>
        </div>
    </div>
</form>

<div class="modal fade" id="WarrantyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportWarranty" role="form" method="post">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Excel Report</h5>
                <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 m-form__group row m--margin-top-20">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Start Date
                    </label>
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
                    </div>
                    <label class="col-form-label col-lg-3 col-sm-12">
                        End Date
                    </label>
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
                <button type="submit" class="btn btn-primary">Get Report </button>
            </div>
        </div>
    </div>
</form>

<div class="modal fade" id="VehicleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportVehicle" role="form" method="post">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Excel Report</h5>
                <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 m-form__group row m--margin-top-20">
                    <label class="col-form-label col-lg-3 col-sm-12">
                        Start Date
                    </label>
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
                    </div>
                    <label class="col-form-label col-lg-3 col-sm-12">
                        End Date
                    </label>
                    <div class="col-lg-9 col-md-9 col-sm-12">
                        <input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
                <button type="submit" class="btn btn-primary">Get Report </button>
            </div>
        </div>
    </div>
</form>

唯一变化的部分是模态，

<form action="/Export/ExportGeneral" role="form" method="post">

根据触发的模式，它会路由到另一个操作，例如，

一般出口保修 ExportVehicle

我要问的是，是否有什么东西可以帮助我单击不同的按钮，但只能以一种模式打开它们

<form action="/Export/ExportGeneral" role="form" method="post">

根据单击的按钮自动进行更改。（也许是按钮的ID？）

谢谢您的时间！

Answer 1

将您的html更改为

<div class="dropdown-menu" aria-labelledby="navbarDropdown">
       <a onclick="openModal('GeneralModal')" class="dropdown-item" href="#">General Report </a>             
       <a onclick="openModal('VehicleModal')" class="dropdown-item" href="#">Vehicle Report</a>
       <a onclick="openModal('WarrantylModal')" class="dropdown-item" href="#">Warranty Report</a>
</div>

并提供您的表单ID，以便我们可以使用

之类的javascript来更改其属性

<form action="" id="modalForm" role="form" method="post">

然后在脚本中

function openModal(modalName){
    if(modalName == 'GeneralModal'){
        $("#modalForm").attr("action",'/Export/ExportGeneral');
        $("#modalId").modal('show');
    }
    else if(modalName == 'VehicleModal'){
        $("#modalForm").attr("action",'/Export/ExportVehicle');
        $("#modalId").modal('show');
    }
    else if(modalName == 'WarrantylModal'){
        $("#modalForm").attr("action",'/Export/ExportWarranty');
        $("#modalId").modal('show');
    }
}

我认为它可以解决您的问题并优化您的代码。：）

Answer 2

在锚标记中，您只需将代码替换为我的代码：

<a data-toggle="modal" data-target="#GeneralModal" id="general-export-button" data-url="/Export/ExportGeneral" class="dropdown-item" href="#">General Report </a>
<a data-toggle="modal" data-target="#GeneralModal" id="warranty-export-button" data-url="/Export/ExportWarranty" class="dropdown-item" href="#">Vehicle Report</a>
<a data-toggle="modal" data-target="#GeneralModal" id="vehicle-export-button" data-url="/Export/ExportVehicle" class="dropdown-item" href="#">Warranty Report</a>

现在，在页面底部，添加此jQuery代码，一切正常。

<script>
$("#general-export-button, #warranty-export-button, #vehicle-export-button").click(function (e) {
    e.preventDefault();
    var form = $("#multpurpose-form");
    form.prop("action", $(this).data("url"));
});

现在，我将解释代码中发生的事情。所有锚标签都链接到一个模态。链接模式中表单的操作方法通过jQuery代码针对“锚标签数据URL”进行了更改。

从不同按钮仅打开一个模态

2 个答案: