在按鈕單擊頁面上顯示部分查看頁面內容

Question

這是我的索引查看頁面。

<div> 
Hello world 
</div> 
@section footerButton{ 
    <input type="button" id="button1" value="Button1"/> 
} 

這是我的佈局頁面。

<div id="divFooter"> 
    @RenderSection("footerButton", required:false) 
    </div> 

這是我的部分視圖頁面。

<h2>This is partial page</h2> 

我的要求是，在我點擊按鈕運行項目後，部分頁面內容會顯示出來。

Answer 1

選項1：包含在視圖中隱藏的元素的部分和手柄的按鈕.click()事件來顯示它

的Html

<div id="mypartial"> 
    @Html.Partial("_YourPartial") 
</div> 

腳本

$('#button1').click(function() { 
    $('#mypartial').show(); 
}); 

CSS

#mypartial { 
    display: none; 
} 

選項2：使用AJAX來調用返回的局部視圖的服務器的方法和更新DOM

的Html

<div id="mypartial"></div> 

腳本

var url = '@Url.Action("YourMethod")'; 
$('#button1').click(function() { 
    $('#mypartial').load(url); 
}); 

控制器

public ActionResult YourMethod() 
{ 
    return PartialView(); 
}