2009-06-15 78 views
1

抱歉措辭不佳。在asp.net MVC中渲染部分視圖(模態窗口)

我一直希望得到每個人的想法,以最好的方式來處理這個問題。

我在鏈接到聯繫表單的母版頁上有一個鏈接。如果用戶啓用了JavaScript,我想用jQuery打開表單模式窗口。如果沒有,用戶將被引導至聯繫表單頁面。

問題是,當提供模式窗口時,我只想顯示聯繫表單 - 減去周圍的模板/主頁面。但是,在禁用JavaScript的情況下,聯繫表單頁面應與模板/主頁面一起顯示。

實現此目的的最佳方式是什麼?目前,我唯一的想法是使用javascript將值/ querystring附加到聯繫表單鏈接,指示啓用了javascript。例如,http://www.mysite.com/contact/jshttp://www.mysite.com/contact/?js=enabled。如果啓用javascript,我可以部分呈現聯繫人表單。

我歡迎所有想法和鏈接。

謝謝!

回答

3

你的確可以使用jQuery做這個很好!

假設您的聯繫方式頁面上的聯繫表格包含在id="myContactForm"的div中。您可以將選擇器(例如,'#myContactForm')與要加載內容的URL組合在一起。您可以通過多種不同的方式將表單(或任何其他內容)直接加載到當前頁面中。我個人更喜歡jqModal來滿足我的模式窗口需求,但如果您使用其他任何東西,您可以使用jQuery.load方法本身。

所以,如果你的第一頁被命名爲「master.html」和您的聯繫方式被命名爲「contact.html」,這裏就是你可以「master.html」裏面做什麼:

<div id="someDiv"> 
    Please <a id="contactLink" href="contact.html">contact us</a> with 
    any questions! 
</div> 
<div id="myModalPlaceholder"> 
    Modal content would go in here; this div is initially hidden. 
</div> 

這如果沒有javascript,當然會鏈接到聯繫表單。但是,您只想提取「contact.html」的一部分並將其顯示在您的母版頁上。這裏是你如何完成你的master.html頁面上你的目標的想法:

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#contactLink').click(function() { 
     $('#myModalPlaceholder').load('contact.html #myContactForm'); 
     return false; // cancel the native click event 
    }); 
}); 
</script> 

你注意到在「加載」方法從區域只想搶在目標頁面上分離的URL空間。你可以閱讀更多關於這個here。這將從contact.html頁抓取#myContactForm div,並將其插入您的母版頁#myModalPlaceHolder div。

祝你好運!
-Mike

+1

這正是我需要的,邁克! jQuery永遠不會讓我印象深刻 - 我不知道你可以在加載函數中使用類似jQuery的選擇器。謝謝你非常透徹的回答。 – adamisnt 2009-06-16 16:53:27

4

使用這個在你的控制器來代替:

if (Request.IsAjaxRequest()) 
{ 
    return PartialView("PartialViewWithYourForm"); 
} 

return View("FullView"); 

FullView.aspx

... 
<%= Html.RenderPartial("PartialViewWithYourForm") %> 
... 
+0

謝謝你的回覆,eu-ge-ne。 我曾想過這件事。不過,我相信jQuery Modal Window插件(fancybox)正在對聯繫人表單頁面進行常規(非Ajax)調用 - 因此Request.IsAjaxRequest將評估爲false。 注:我只是測試,以確保它確實評估爲false。是否有容易將請求變成ajax請求?還是有另一種方法來做到這一點? 謝謝你的幫助, 亞當 – adamisnt 2009-06-15 16:41:25