면도기 팝업

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

내가 잘못하고있어 알고있다. 어떻게하면 주석과 팝업을 저장할 수 있습니까?

편집 난 그냥 이런 식으로, 여기에 링크를 만들고있어 :

@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'무엇을 해결 않습니다

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

이것은 내가보기에 무엇을 가지고 $ .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"); 
    } 
} 

.

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

이 마지막으로 당신이 대화 상자를 열려면 링크를 설정해야합니다 : JQuery help

첫째 둘째 대화를 초기화

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

존재하기 위해 대화에 대한 귀하의 페이지에 HTML을 추가 참조

을

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

위의 내용은 팝업으로 충분합니다. 난 그냥 그것을 편집 한

• jQueryUI modal
• jQuery post