[Yii2笔记]023使用Ajax向模态框中加载模板 [ 技术分享 ]

说明

学习Yii Framework 2（易2框架）的过程是漫长的，也是充满乐趣的，以下是我学习Yii2框架时对官网英文资料(请参见原文网址)的翻译和代码实现，提供了较完整的代码，供你参考。不妥之处，请多多指正！

原文网址：

http://www.yiiframework.com/wiki/806/render-form-in-popup-via-ajax-create-and-update-with-ajax-validation-also-load-any-page-via-ajax-yii-2-0-2-3

本文主题：使用Ajax向模态框中加载模板，实现ajax模态框的重复利用

本实例实现了两个功能： 1、点击按钮，打开模态框，使用Ajax加载内容，内容由渲染路由文件（按钮的value值）获得。 2、点击按钮，使用Ajax加载内容，内容由渲染路由文件（按钮的value值）获得。

D:\phpwork\basic\views\articles\index.php

源代码：

    <p>
    <!--使用模态框的创建操作按钮：只能使用button创建模态框，不能使用href，要须使用button的value进行引用内容的地址传输，title必须有，可以为空字符串'',class中的showModalButton是必须有的  -->
    <?= Html::button('Create Article with Modal', ['value' => Url::to(['articles/create']), 'title' => 'Creating New Article', 'class' => 'showModalButton btn btn-success']); ?>
    <!--使用模态框的编辑操作按钮    -->
    <?= Html::button('Update Article', ['value' => Url::to(['articles/update', 'id'=>1]), 'title' => 'Updating Article', 'class' => 'showModalButton btn btn-success']); ?>
        <!--使用模态框的查看操作按钮        -->
        <?= Html::button('View Article', ['value' => Url::to(['articles/view', 'id'=>24]), 'title' => 'Viewing Article', 'class' => 'showModalButton btn btn-success']); ?>
        <!--  点击链接显示指定地址的内容      -->
        <?= Html::a('title', null, ['value' => Url::to(['articles/view-content','id'=>24]), 'class' => 'loadMainContent']); ?>
        <!--  第2个参数为null或false时生成的链接：没有转向-->
        <a class="loadMainContent" value="/articles/view-content?id=24">title</a>
        <!--  点击按钮显示指定地址的内容      -->
        <?= Html::button('View Content', ['value' => Url::to(['articles/view-content', 'id'=>24]), 'title' => 'View Content', 'class' => 'loadMainContent btn btn-success']); ?>
    </p>

　建立assets资源文件

D:\phpwork\basic\web\js\ajax-modal-popup.js

源代码：

$(function(){
    $(document).on('click', '.showModalButton', function(){
		//打开模态框，使用Ajax加载内容，内容由渲染路由文件（按钮的value值）获得。
        $('#modal').modal('show')
            .find('#modalContent')
            .load($(this).attr('value'));
        document.getElementById('modalHeader').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
    });
    $(document).on('click', '.loadMainContent', function(){
        $('#main-content').load($(this).attr('value'));
    });
});

将assets资源文件'js/ajax-modal-popup.js'加入到js列表中

D:\phpwork\basic\assets\AppAsset.php

源代码：

<?php
/**
 * @link http://www.yiiframework.com/
 * @copyright Copyright (c) 2008 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */
namespace app\assets;
use yii\web\AssetBundle;
/**
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
        'js/ajax-modal-popup.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

定义模态框和

D:\phpwork\basic\views\layouts\main.php

源代码：

//data-backdrop="static" data-keyboard="false"，只能使用模态框中的X进行关闭，点击外圈关闭和ESC键关闭全部失效。
<div id="modalWeb" class="fade modal" role="dialog" tabindex="-1" data-backdrop="static" data-keyboard="false" >
    <div class="modal-dialog modal-lg">
        <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>
				//定义模态框标题，可以由外部传入
                <h3 class="modal-title" id="modalWebHeader"></h3>
            </div>
            <div class="modal-body">
				//定义模态框主体内容，使用renderAjax渲染的内容进行替换
                <div id="modalContent"><div style="text-align:center"><img src="/img/loading.gif"></div></div>
            </div>
        </div>
    </div>
</div>
<div class="content" id="main-content">This is a test!</div>

D:\phpwork\basic\controllers\ArticlesController.php

源代码：

   public function actionView($id)
    {
        if (Yii::$app->request->isAjax){
			//Ajax请求时使用renderAjax()渲染模板
            return $this->renderAjax('view', [
                'model' => $this->findModel($id),
            ]);
        }else{
			//其他情况下使用render()渲染模板
            return $this->render('view', [
                'model' => $this->findModel($id),
            ]);
        }
    }

    public function actionViewContent($id) {
        if (Yii::$app->request->isAjax){
            return $this->renderAjax('viewContent', [
                'model' => $this->findModel($id),
            ]);
        }
    }

测试：

http://localhost:8081/articles/index

（全文完）