带有javascript函数的ASP.NET MVC ActionLink

Question

我有一个包含操作链接的列表。所有链接都必须在模式弹出窗口中通过参数加载部分视图。

链接：

@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函数不起作用，部分视图只加载到新页面中。我试图在这个函数中设置断点，但断点不起作用，这意味着该函数没有通过单击事件调用。感谢您的建议

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);
}