单击按钮时将部分视图加载为模态

时间:2019-12-01 14:14:31

标签: javascript jquery asp.net-mvc-partialview

因此,我尝试在单击按钮后从控制器加载包含引导程序模态的局部视图。

我不确定问题出在哪里,但是当我第一次单击按钮时,添加了DOM,但是没有显示模式。第二次单击时,模态显示为<1s,然后我只得到该灰色模态背景。

我的按钮

"<button class='btn btn-info edit-category' onclick='showModal()' data-category-id='" + full.id + "'>Edit</button>"

我的showModal功能:

function showModal(){
    $("#div1").load("/Category/EditCategory");
    $("#createCategory").modal();
}

我的部分查看操作:

public ActionResult EditCategory()
{
    return PartialView("Admin/_CategoryAdd", new CategoryDetailModel{Title = "Test"});
}

我的PartialView“ _CategoryAdd”的一部分:

@model CategoryDetailModel

<div class="modal" id="createCategory" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form asp-action="Create" asp-controller="Category"
                  data-ajax="true"
                  data-ajax-method="POST"
                  data-ajax-mode="replace"
                  data-ajax-failure="failed"
                  data-ajax-success="success">

有趣的是,当我不单击按钮并在浏览器控制台中输入两行时,它可以正常工作。 在控制台中执行该方法时,与单击按钮相同。

我还认为,也许这是个时间问题,所以我向setTimeout添加了5000ms,但是没有用。 有什么想法吗?

1 个答案:

答案 0 :(得分:0)

在@ freedomn-m的帮助下,我发现可以在完成加载后添加一个函数:

$("#div1").load("/Category/EditCategory", 
    function(){$("#createCategory").modal('toggle');});

现在可以使用