Question

我对asp.net mvc和jQuery非常新鲜。经过一天的尝试，我仍然不知道如何在用户点击链接时使用动作中的数据（返回JsonResult）弹出jQuery对话框。

任何建议或指南都表示赞赏。

谢谢！

Answer 1

Stuntz＆amp; amp; RhinoDevX64的回复，终于我解决了。

jQuery代码：

<script type="text/javascript">
    $(function() {
        $('.newsitem').click(function() {
            var $thisLink = $(this);

            $('#dialog').empty();

            $.getJSON($thisLink.attr("href"), function(data) {
                $('#dialog').html(data.content);

                $("#dialog").dialog({
                    autoOpen: false,
                    title: data.title,
                    bgiframe: true,
                    modal: true,
                    height: 450,
                    width: 540,
                    buttons: {
                        '关闭': function() {
                            $(this).dialog('close');
                        }
                    }
                });

                $('#dialog').dialog('open');
            });

            return false;
        });
    });

ActionLink的

<%= Html.ActionLink(item.Title, "GetByJs", "Article", new { id = item.ID }, new { @class = "newsitem" })%>

行动守则

public ActionResult GetByJs(Guid id)
    {
        var item = Article.SingleOrDefault(a => a.ID == id && a.AtFront == true);

        var jsonData = new { title = item.Title, content = item.BodyContent };

        return new JsonResult
        {
            Data = jsonData
        };
    }

Answer 2

var ph = $("#idOfPlaceHolderInPage");
ph.load(/Controller/SomeActionWhichReturnsPartialView, function() {
    // this callback will be called after your partial view loaded into placeholder
    ph.dialog({
        // pass options here to customize dialog
    });
});

Answer 3

第一次使用jQuery UI按照他们的文档包含css和js文件。

<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript" ></script>
<script src="../../Scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<link href="../../Content/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
   $(document).ready(function(){
     $("#idOfModalPlaceholder").dialog({autoOpen: false, title:"MODAL TITLE"});
   });

  function OpenModalGetContent(){
        $("#idOfModalPlaceHolder").load("/Controller/View");
             $("#idOfModalPlaceHolder").dialog('open');
        }
</script>
<a href="#" onclick="OpenModalGetContent()">CLICK HERE FOR MODAL</a>

第二，如果您只是抓取一些内容，那么您应该只使用常规的ActionResult和部分视图（* .ascx）; 如果你正在调用数据，我认为你可能会加载到一个与这种情况完全不同的自动完成。

ASP.NET MVC |使用jQuery对话框小部件显示模式对话框的问题

3 个答案: