0

ユーザーがWeb上の各グリッドにコメントを追加できるポップアップを追加したいと思います。このコメントをデータベースに追加し、メインページを更新せずにポップアップを閉じたいと思います。どうすればいいですか？これが私のコードです。

$('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);
    }
}

私はそれを間違っていることを知っています。コメントを保存してポップアップを閉じるにはどうすればよいですか？

編集私はこのようにそれにリンクを作っています：

<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>
}
4

2 に答える 2

2

まず、アクションメソッドを更新して、リダイレクトせず、単にステータスを返すようにします。

[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ヘルプを参照してください

まず、ダイアログが存在するようにページに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ドキュメントを読むことをお勧めします。

于 2012-12-13T13:45:49.097 に答える
0

'this.href'は$.get呼び出しの内部に何を解決しますか。そのURLをブラウザのアドレスバーに配置すると、ビューがレンダリングされますか？

[ビューをレンダリングする場合]支援するには、そのビューの内部に存在する、おそらくRazorコードを確認する必要があります。結局のところ、それは投稿を実行するコードです。

于 2012-12-13T12:55:11.627 に答える