Question

我想添加弹出窗口，用户可以在网络上为每个网格添加评论。我想将此注释添加到数据库并关闭弹出窗口而不刷新主页。我该怎么做？这是我的代码。

$('a.dialog').click(function () {
    var x = jQuery(this).position().left + jQuery(this).outerWidth();
    var y = jQuery(this).position().top - jQuery(document).scrollTop();

    $.get(
        this.href, 
        function (result) {
            $(result).dialog({
                modal: true,
                width: 500,
                position: [x, y]
            });
        }
    );
    return false;
});

这是来自控制器的帖子：

[HttpPost]
public ActionResult Comment(CommentsModel model)
{
    try
    {
        model.UserId = Storage.UserGetActive().Id;
        Storage.CommentInsert(model);
        return RedirectToAction("Index");
    }
    catch (Exception e)
    {
        return RedirectToAction("Error", e);
    }
}

我知道我做错了。我怎样才能保存评论并关闭弹出窗口？

EDIT 我只是链接到它，就像这样：

<a class="dialog" href="/Dashboard/Comment/'+clips[i-1]+'">Comment</a>

这就是我的看法：

@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
    <fieldset>
        <legend>Add new comment</legend>
        @Html.HiddenFor(m => m.MetriceId)
        <div>
            @Html.LabelFor(m => m.Comment)
        </div>
        <div >
            @Html.EditorFor(m => m.Comment, new { style = "width:450px; height:70px" })
            @Html.ValidationMessageFor(m => m.Comment)
        </div>
        <p>
            <input type="submit" value="Save Comment" />
        </p>
    </fieldset>
}

Answer 1

首先更新您的操作方法，使其不重定向，只返回状态：

[HttpPost]
public ContentResult Comment(CommentsModel model)
{
    try
    {
        model.UserId = Storage.UserGetActive().Id;
        Storage.CommentInsert(model);
        return Content("success"); 
    }
    catch (Exception e)
    {
        return Content("error");
    }
}

您需要设置对话框以发布到您的操作。见JQuery help

首先将html添加到您的页面以使对话存在

<div id="dialog-confirm" title="Comment on item">
    <!-- Put whatever markup you require in here -->
    <!-- You will need a placeholder for the id of the item you are commenting on  -->
</div>

其次初始化对话框：

$(function() {
    $( "#dialog-confirm" ).dialog({
        autoOpen: false, //Dialog is initialised closed
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            "Save Comment": function() {
                // NOTE: We are making a jQuery post action
                $.post(<url>, // Replace url
                        // Build your data model eg: 
                        // { UserId: <userId>, Comment: <comment> ...}
                        <data>, 
                        // This is what is actioned after the post 
                        // returns from the server
                        function(result) 
                        {
                            // Check if successful
                            if(result == 'success') {
                                //Simply the dialog
                                $( this ).dialog( "close" );
                            }
                            else {  //an error occured
                                //Update dialog html to show error
                            }
                        }                                            
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
});

最后，您需要设置链接以打开对话框：

$('a.dialog').on('click', function(e){
    // Update the dialog to contain data of the item you are 
    // commenting on so you can grab it and post to the server 
    $( "#dialog-form" ).dialog( "open" );
}

以上应该足以让你弹出一个。请注意，这不是您的完整解决方案

我建议阅读有关模态和帖子的jQuery文档：

Answer 2

'this.href'在$ .get调用中解析了什么。如果您将该URL放在浏览器的地址栏中，它是否会呈现视图？

[如果它呈现视图] 为了提供帮助，我们需要查看该视图中存在的Razor代码。毕竟，这是执行帖子的代码。

Razor的弹出窗口

2 个答案: