簡體   English   中英

部分視圖中的ASP MVC引導程序模式

[英]ASP MVC Bootstrap Modal in Partial View

作為共享布局的一部分,我希望在單擊按鈕時出現一個模式對話框。

這是我的模態對話框的局部視圖:

<ul class="nav navbar-nav navbar-right">
    <li>
        <button type="button" class="open-dialog btn" data-toggle="modal" data-target="#SettingsModal">Settings</button>
    </li>
</ul>

<!-- Modal -->
<div class="modal fade" id="SettingsModal" tabindex="-1" role="dialog" aria-labelledby="SettingsModalLabel">
<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">
            <p>Some text</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <a id="settings" class="btn btn-primary btn-sm" href="#">Save changes</a>
        </div>
    </div>
</div>
</div>

腳本

<script type="text/javascript">
    $(document).on("click", ".open-dialog", function() {
        $('#settings').attr('href', $(this).data('url')); // update the link's url
    });
</script>

和局部視圖的控制器:

public class SettingsController : Controller
{
    public ActionResult _Settings()
    {
        return PartialView("_Settings");
    }
}

我要做的是在頁面頂部有一個按鈕,作為共享_Layout的一部分。 與此類似:

在此處輸入圖片說明

當我單擊“設置”按鈕時,應該會出現一個模式對話框,但是當我現在單擊它時,屏幕只是變黑了,我可以在后台提示模式對話框。 我不確定模態中我在哪里做錯了什么。 任何提示表示贊賞!

嘗試這個:

$('#settings').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        url = button.data('url');
        $.post(url, function (data) {
            $('.model-body').html(data);
        });
});

動作方式:

public PartialViewResult Settings()
{
            if (Request.IsAjaxRequest())
            {
                // retrive your model
                return PartialView("_Settings");
            }
            return null;
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM