Question

我有一个主视图，其中有一个按钮“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>

Answer 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>

现在你应该好好去!!!!

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

1 个答案: