ASP.NET MVC ActionLink和javascript函数

Question

我有一个包含动作链接的列表。 所有链接都必须通过模态弹出窗口中的param加载局部视图。

链接：

@model IEnumerable<string>

<ul>
    @foreach (var item in Model)
    {
        <li>
            @Html.ActionLink(item, "MyAction", null, new {code = item}, new {@class = "myclass" })
        </li>
    }
</ul>

MyAction：

public ActionResult MyAction(string code)
{
    // logic
    var model = ...

    return PartialView("_MyPartialView", model);
}

我的模态弹出和javascript函数的视图：

<script type="text/javascript">     
$(function() {
    $(function() {
        $('#my-dialog').dialog({
            autoOpen: false,
            width: 400,
            modal: true
        });

        $('.myclass').click(function (e) {
            e.preventDefault();
            $('#my-dialog').load(this.href, function () {
                $(this).dialog('open');
            });
            return false;
        });
    });
</script>    
<div id="my-dialog"></div>

但是单击actionlink上的js函数不起作用，而部分视图只是在新页面中加载。 我尝试在这个函数中设置断点，但是断点不起作用，这意味着该函数没有通过click事件调用。 谢谢你的建议

Answer 1

尝试这个.......

<script type="text/javascript">     
$(function() {
    $(function() {
        $('#my-dialog').dialog({
            autoOpen: false,
            width: 400,
            modal: true
        });

          $(body).on('click','.myclass',function(e){       
            e.preventDefault();
            $('#my-dialog').load(this.href, function () {
                $(this).dialog('open');
            });
            return false;
        });
    });
</script>    
<div id="my-dialog"></div>

Answer 2

渲染视图后，加载局部视图的唯一方法是通过Ajax调用将部分视图返回到弹出窗口

HTML

@model IEnumerable<string>

<ul>
@foreach (var item in Model)
{
    <li>
       <a onclick="showModal('@item')" class="myclass">item</a>
    </li>
}

<div id="my-dialog"></div>

jQuery的

<script type="text/javascript">     
$(function() {
    $('#my-dialog').dialog({
        autoOpen: false,
        width: 400,
        modal: true
    });

 function showModal(code) {
        $.ajax({
            url: "myController/MyAction?code="+code,
            type: 'get',
            success: function (result) {
                $('#my-dialog').html(result);
                $('#my-dialog').dialog('open')
            },
            }
        });
    }
</script>  

行动：

public ActionResult MyAction(string code)
{
// logic
var model = ...

return PartialView("_MyPartialView", model);
}