局部视图中的 jQuery .load（在模式弹出窗口中呈现）不起作用答案

【问题标题】：jQuery .load in a partial view (rendered inside a modal popup) doesn't work局部视图中的 jQuery .load（在模式弹出窗口中呈现）不起作用
【发布时间】：2015-03-29 03:25:35
【问题描述】：

我有一个主视图，其中有一个按钮“AddSkillBtn”，单击该按钮会显示一个模态弹出窗口，里面有一个局部视图。到目前为止工作正常。现在我需要在加载局部视图时进行一些 ajax 调用。但是我不能在局部视图中调用 .on 'load'。关于如何实现这一目标的任何想法？以下是我拥有的代码 - 提前致谢！

**jQuery:** 

$('#AddSkillBtn').click(function (e) {    
            $.ajax({
                url: '@Url.Action("MyAction", "MyController")',
                type: "POST"
                
                success: function (result) {
                    $("#AddContainer").html(result);

                    $('#AddModal').modal('show'); // this works properly
                }
            });
        });

//below jquery code is incorrect - but I need something to trigger the partial view on load event!!

        $(document).on('load?', "PartialView?", function() {
           
            $.ajax({
                //call another action here that needs to be shown on the partial view load 
            }).success(function (partialView) {

                $('#newSkills').append(partialView);

            });
        });

<p><a id="AddSkillBtn" href="javascript:void(0)" class="btn btn-rounded btn-primary">Add new Skill</a></p>


<div class="modal modal-wide fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="AddLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="AddLabel">Add New Skills</h4>
            </div>
            <div class="modal-body">
                <div id="AddContainer">
                </div>
            </div>
        </div>
    </div>
</div>

   
**Partial View rendered in the modal popup has**

<div id="newSkills"> // ajax call to render this, which should happen on load of this partial view
            @for (int i = 0; i < @Model.NewSkills.Count(); i++)
            {
                @Html.EditorFor(model => @Model.NewSkills[i])
            }
        </div>

【问题讨论】：

那么你到底想在加载时做什么？你能解释一下吗？
我想在模态弹出窗口中加载部分视图时动态创建一个 div - 有帮助吗？
好吧，我认为您在单击按钮时应该在模态中打开一个动作（如果您不知道该怎么做，我可以提供帮助），这个动作应该返回一个 View ，在这个视图中你可以渲染另一个你想要的动作，和你想要的部分，我认为如果你这样做应该没有任何问题，
我不知道如何在模态中打开一个动作。你能提供更多信息吗？
好的，我马上做

标签： jquery ajax modal-dialog asp.net-mvc-5 asp.net-mvc-partialview

【解决方案1】：

1.第一种方法

 public ActionResult MainMethod()
        {
            return View("MainMethod");
        }

2。第二次行动

public ActionResult Method2()
            {
                return View("Method2");
            }

3.第三种方法：

 public ActionResult Method3()
                {
                    return View("Method3");
                }

MainMethod 视图：

    @{
        Layout = null;
    }
    <div id="mainWrapper">
    @Html.Action("Method2","Yourcontroller")
    @Html.Action("Method2","Yourcontroller")
    </div>

现在在弹出窗口中没有打开 MainMethod 你应该这样做：

1.将此方法复制到您的布局中：

function openActionInPopUp(href) {

    jQuery('<div />', {
        class: 'dialog',
        id: 'popUpDialog'
    }).appendTo("body")
    .load(href, function () {
        // set up the dialog in the callback of the AJAX request...
        jQuery(this).dialog({
            title: jQuery(this).attr("data-dialog-title"),
            close: function () { jQuery(this).remove(); },
            modal: true,
            show: {
                effect: "fade",
                duration: 250
            },
            hide: {
                effect: "fade",
                duration: 250
            },
            width: 'auto',
            height: 'auto',
            position: { my: "center", at: "center", of: window },
        });
    });
    jQuery(".close").live("click", function (e) {
        e.preventDefault();
        jQuery(this).closest(".dialog").dialog("close");
    });
}

2.定义一个按钮，你想调用你的方法：

  <button onclick="openActionInPopUp('@Url.Action("MainMethod","YourController")')">
        Click me 
    </button>

现在你应该可以开始了！！！！

【讨论】：