剃刀中的彈出框

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

我知道我做錯了。我怎樣才能保存評論和關閉彈出？

編輯 我只是做鏈接，就像這樣：

<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

什麼是 'this.href' 解析$ .get調用內部。如果您將該URL放入瀏覽器的地址欄中，它是否會呈現視圖？

[如果呈現視圖] 爲了提供幫助，我們需要查看可能存在於該視圖內部的Razor代碼。畢竟，這是執行該帖子的代碼。

Answer 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 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的文檔閱讀：

• jQueryUI modal
• jQuery post