2012-06-22 2 views
1

팝업에 대한 세부 정보를 표시해야합니다. 나는 이것을 어떻게하는지 전혀 모른다. MVC3 면도기 뷰에서이 작업을 수행해야합니다.mvc3에서 모달 팝업을 표시하는 방법?

내 컨트롤러 -

public ViewResult ViewDetail(Int32 id) 
{ 
    var q = from p in db.accs 
      where p.id == id 
      select p; 
    return View(q.FirstOrDefault()); 
} 

내보기 -

<td>@ Html.ActionLink("View Detail", "ViewDetail", new { id=item.id }) </td> 
+1

당신이 내가 jQuery를 사용하려고하지만 여전히 보이지 않는 팝업 JQuery와 – freebird

+0

를 사용할 수 있습니다. – ghihi

+0

팝업을 위해 window.open을 사용할 수 있습니다. 링크를 참조하십시오 http://stackoverflow.com/questions/6911134/mvc-3-razor-popup-window – iMBMT

답변

1

사용 JQuery와 UI ModalForm은 당신의 데이터를 표시합니다.

jquery의 모달 팝업에서 다음을 표시한다고 가정 해 보겠습니다.

<div id="displayinmodal"> 
<input type="file" id="file" name="file" /> 
<input type="submit" id="submitdata" value="Upload" /> 
</div> 

이제 jquery를 다음과 같이 작성하십시오.

<script> 
$(document).ready(function(){ 
    $("#displayinmodal").dialog({ //displayinmodal is the id of the div you want to display in modal popup 
     autoOpen: true 
    }); 
}); 
</script> 

그게 전부입니다. 당신은 당신의 브라우저에서 모달 팝업을 얻어야한다.

희망이

1

작업의이 종류는 정말 ASP.NET MVC/면도기가하는 일이 아니다. JQuery UI Dialog과 같은 자바 스크립트 라이브러리를 사용해보세요. 페이지에 여러 JQuery UI 스크립트를 추가해야하지만 그 결과는 매우 간단한 API입니다. 당신이 어떤 HTML 요소에서 기본 대화 상자를 만들 수 있습니다 코드의 한 라인 (ID mydiv 말할) :

$("#mydiv").dialog(); 

그리고 당신이 적용 할 수있는 사용자 정의 및 테마가 물론

.

alert("my details here"); 

기본적인 모달 팝업을 얻을 수 있지만, 그게 당신이 원하는 게 아니에요 같은데요 : 물론

, 당신은 단순히 자바 스크립트를 사용할 수 있습니다. 당신이 (별로 컨텐츠) 간단한 하지요 모달을 원하는 경우에

0

당신과 같이 자바 스크립트 경고를 사용할 수 있습니다

alert('Hello from a modal popup'); 

을 당신이 일반적인 솔루션은 jQuery를 UI의 대화 상자를 사용하는 것입니다 귀엽 옵션을하려는 경우 모달 옵션을 허용합니다. 이 옵션을 사용하여 무엇을 얻을의 데모 여기를보세요 :

http://jqueryui.com/demos/dialog/#modal

코드는 매우 간단하다; 스크립트 및 주식의 jQuery UI의 CSS의 소스로 구글의 CDN을 사용하여 당신을 위해 아래에해야 할 모든 :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js" type="text/javascript"></script> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript"> 
    $(function() { 
     $("#details").dialog({ 
      modal: true 
     }); 
    }); 
</script> 

<div id="details"> 
    Hello from a modal popup 
</div> 
관련 문제