Question

我的ASP .NET MVC 4.6中有以下代码，它使用一个按钮将部分视图作为引导模式调用。

在我看来，我有：

<button type="button" class="btn btn-primary" id="btnAjouterComm" value="" onclick="AfficherModales_MenuAdmin(null, 'Communautes', 'Ajouter')">
    Ajouter une communauté
</button>

@Html.Partial("../Adimin_Modales/Communautes_MenuAdmin_ModalAjouter")

我用作引导模式的局部视图运行如下：

<div id="menuAdmin_ModalAjouter_Communaute" class="modal fade">
    <div class="modal-dialog" style="width:800px">
        <div class="modal-content" style="background-color: TEAL">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Modification d'une entreprise pour:</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" id="formEntreprise_AjouterModal">
                    <div class="form-group">
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="txtCode_Demandeur_ModalModifierEntreprise" placeholder="Code" disabled />
                        </div>
                        <label class="col-sm-1 control-label"> / </label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="txtNom_Demandeur_ModalModifierEntreprise" placeholder="Nom" disabled />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <input type="button" class="btn btn-default" data-dismiss="modal" value="Annuler" />
                <input type="button" class="btn btn-primary" id="btnSauvegarder_ModalModifier" value="Sauvegarder" onclick="ModificationEntreprise()" />
            </div>
        </div>
    </div>
</div>

然后是javascript部分：

if (action == "Ajouter") {
    switch (nomTableChoisie) {
        case "Communautes":
        //*** Affiche la fenêtre modale ***
            $("#menuAdmin_ModalAjouter_Communaute").modal({
                backdrop: 'static',
            });

最后我的控制器：

public ActionResult Communautes_MenuAdmin_ModalAjouter()
{
    return PartialView();
}

到目前为止，这项工作确实如此。我愿意的是，我想用相同的布局实现相同的结果，但是从JQGRID实例上的自定义按钮调用：

jQuery("#grilleJqGrid_Communaute")
    .navGrid('#pager_Communaute', { edit: false, add: false, del: false, search: false })
    .navButtonAdd('#pager_Communaute', {    //*** Bouton personnalisé Ajouter ***
         caption: "",
         id: "btnAjouter",
         buttonicon: "ui-icon-plus",
         onClickButton: function () {
            // My modal caller
        },
        position: "last"
    })

事实上，JQGrid附带的默认表单不适合我，我尝试过的插件也没有。有没有人有一个想法如何做到这一点？

Answer 1

显示自定义按钮的弹出窗口方法

    /// add second custom button
       $(grid_selector).navButtonAdd( pager_selector,
            {
                buttonicon: "ui-icon-pencil",
                title: "Edit",
                caption: "Edit",
                position: "last",
                onClickButton: customButtonClicked
            });

       function customButtonClicked() {

           alert("You have clicked a custom button.");

      // sending dafault value UserId =0
      ///ControllerName/PartialViewName
           $.get('/CompanyUserDesignation/_MyPartial', { UserId: 0 }, function (data) {

               // append data of partial view in modal popup
             //  $('#menuAdmin_ModalAjouter_Communaute .modal-body').html(data);
               $('#menuAdmin_ModalAjouter_Communaute').modal('show');
       });

}

部分视图

  public ActionResult _MyPartial(int UserId)
    {

            return PartialView();
    }

莫代尔

 <div id="menuAdmin_ModalAjouter_Communaute" class="modal fade">
<div class="modal-dialog" style="width:800px">
    <div class="modal-content" style="background-color: TEAL">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Modification d'une entreprise pour:</h4>
        </div>
        <div class="modal-body">
            <form class="form-horizontal" role="form" id="formEntreprise_AjouterModal">
                <div class="form-group">
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="txtCode_Demandeur_ModalModifierEntreprise" placeholder="Code" disabled />
                    </div>
                    <label class="col-sm-1 control-label"> / </label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="txtNom_Demandeur_ModalModifierEntreprise" placeholder="Nom" disabled />
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <input type="button" class="btn btn-default" data-dismiss="modal" value="Annuler" />
            <input type="button" class="btn btn-primary" id="btnSauvegarder_ModalModifier" value="Sauvegarder" onclick="ModificationEntreprise()" />
        </div>
    </div>
</div>

了解更多详情$.get

如何将以下代码呈现为javascript

1 个答案: