代码之家 › 专栏 › 技术社区 › Kevin Mee

单击一次按钮后,Ajax加载的部分视图中的模式不会显示

bootstrap-modal razor asp.net-mvc jquery c#

Kevin Mee · 技术社区 · 6 年前

我试图创建一个局部视图,当按下一个按钮时,它将以模态的形式出现。如果有另一种方法可以更好地实现这一点,我对此持开放态度——在添加 List 到主视图。如果有办法返回一个列表并形成一个单独的实体,它可能适用于我的场景。现在我的代码在某种程度上可以工作,但是你需要推动 Add Service 按钮两次,以便模态显示,当它做了唯一的方法摆脱它是提交,X在顶部以及关闭按钮都不工作。

主视图

@model List<ServicesPosting>

<div>
    <button id="addService" onclick="OpenModal()">Add Service</button>
</div>

<div id="AddServiceForm"></div>


<script type="text/javascript">
    function OpenModal() {
        var url = '@Url.Action("AddServiceModal", "Services")';
        $('#AddServiceForm').load(url);
        $('#serviceModal').modal();
    }
</script>

控制器

public class ServicesController : Controller
{
    // GET: Services
    public ActionResult Index()
    {
        List<ServicesPosting> postings = DataAccess.GetAllPostings();
        return View(postings);
    }

    [HttpGet]
    public ActionResult AddServiceModal()
    {
        return PartialView("~/Views/Services/AddNewService.cshtml");
    }
}

局部视图

@model ServicesPosting


<!-- Modal -->
<div class="modal fade" id="serviceModal" tabindex="-1" role="dialog" aria-labelledby="serviceModalLabel">
    <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>
                <h4 class="modal-title" id="serviceModalLabel">Add New Service</h4>
            </div>
            <div class="modal-body">
                @using (Html.BeginForm("Index", "Services"))
                {
                    // TODO: validate up front
                    <div class="row">
                        Service Title : @Html.TextBoxFor(x => x.ServiceTitle)
                    </div>
                    <div class="row">
                        ServiceDescription : @Html.TextAreaFor(x => x.ServiceDescription)
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                }
            </div>
        </div>
    </div>
</div>

1 回复 | 直到 6 年前

Muhammad Ashikuzzaman 6 年前

问题是当你第一次点击按钮时 $('#serviceModal').modal(); 函数在模式加载之前被调用。所以,你得把这个叫做 $('#serviceModal').modal(); 函数后 $('#AddServiceForm').load(url); 完成了。意味着加载AddNewService.cshtml完成后,您可以在DOM中找到所需的模式。更多信息请参见此处 http://api.jquery.com/load/

身体标记以查找任何子元素。我在下面放了个暗号。试试这个:

  $("#AddServiceForm").load(url, function(responseTxt, statusTxt, xhr) {
    // debugger;
     if (statusTxt == "success") 
        {   
          $('body #serviceModal').modal('show');      
        }
    if (statusTxt == "error") 
        {
         console.log("Error: " + xhr.status + ": " + xhr.statusText);
        }
   });