如何在用戶單擊後呈現局部視圖（使用剃鬚刀）？

我一直在尋找解決方案，但我嘗試過的每件事都沒有幫助，雖然看起來很簡單。我相信你們中的一些人會知道我該怎麼做。如何在用戶單擊後呈現局部視圖（使用剃鬚刀）？

我正在使用ASP.NET MVC4（剃鬚刀）。我有一個側面菜單，我想要的是另一個局部視圖將呈現（取決於菜單項被點擊）。我在我的頁面上應該包含這個局部視圖的div。命令：

@Html.Partial("_TitleDescription")

工作得很好，但它是靜態渲染局部視圖（編譯時間）。我希望它能夠在用戶點擊菜單中的每個按鈕時動態呈現它。

我想：

@Ajax.ActionLink("Location", "Location", "Product", new { id = @Model.ID }, new AjaxOptions() { UpdateTargetId = "result", InsertionMode = InsertionMode.Replace, HttpMethod = "GET"})

我想：

<script type="text/javascript"> 
     function getView() { 
      $('#detailsDiv').load("@Url.Action("Location" , "Product")"); 
     } 
</script> 
<a href='javascript:getView();'>Get Partial View</a> 
<div id="detailsDiv"></div>

而且這樣的：

<div id="detailsDiv"> 
    @{ Html.RenderPartial("_TitleDescription", null); } 
</div>

但沒有爲我工作。

編輯：

我嘗試了兩個答案，但他們的作品不...所以這裏是我的控制器：

public ActionResult Location(int id = 0) 
    { 

     Product product = unitOfWork.ProductRepository.GetById(id); 

     return PartialView("Location.cshtml", product); 
    }

我把一個斷點，我打它的每時間，但仍沒有發生變化的觀點... :(

這就是我再次嘗試：

<div id="detailsDiv"></div> 
<a href="#" onclick="loadLocation()">Location</a> 

<script type="text/javascript"> 
     function loadLocation() { 
      $.get('@Url.Action("Location","Product", new { id = 15 })', 
       function (data) { 
        $('#detailsDiv').load(data); 
       }); 
     } 
</script>

，我也試過這樣：

<div id="detailsDiv"></div> 
@Html.ActionLink("Pages","Location","Product",new {id = 15},new {@class="menu"}) 

<script type="text/javascript"> 
     $(function() { 

      $(".menu").click(function (e) { 

       e.preventDefault(); 
       $("#detailsDiv").load($(this).attr("href")) 
      }); 


     }); 
    </script>

來源

2014-01-14 Omri

添加你的控制器代碼 –

看到我的答案在這裏http://stackoverflow.com/questions/19897157/create-a-popup-that-renders-a-partial-view/19909810#19909810 –

你可以檢查jQuery請求在瀏覽器的JavaScript控制檯中？ – Marthijn

試試這個

@Html.ActionLink("Pages","Pages","Home",new {@is=Model.ID},new {@class="menu"}) 
@Html.ActionLink("Posts","Posts","Home",new {@is=Model.ID},new {@class="menu"}) 
<div id="detailView"></div>

，並有一些JavaScript來聽這些鏈接的點擊事件，並使用jQuery load方法從動作加載結果方法。

<script type="text/javascript"> 
    $(function(){ 

    $("a.menu").click(function(e){ 

     e.preventDefault(); 
     $("#detailView").load($(this).attr("href")) 

    }); 

    }); 
</script>

假設你已經在你的HomeController操作方法返回相關視圖/局部視圖。

來源

2014-01-14 16:24:01 Shyju

試試這個

$.get('@Url.Action("Location","Location", new { id = Model.ID })', 
function(data) { 
     $('#detailsDiv').html(data); 
    });

來源

2014-01-14 16:27:58

如果你想有不同的側面菜單功能，用於不同的（部分）的看法，你認爲主要佈局使用的部分？這是排序這類問題的方法之一。

例如主要的_Layout.cshtml（例如，共享文件夾將如下在如下：

@{ 
    string result = null; 
    if (IsSectionDefined("Navigation")) 
    { 
     result = RenderSection("Navigation", false).ToHtmlString(); 
    } 
} 

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <link href="~/Content/StyleSheet.css" rel="stylesheet" type="text/css" /> 
    <title>@ViewBag.Title</title> 
</head> 
<body> 
    @if (IsSectionDefined("Title")) 
    { 
     <header id="top"> 
      <h1>@RenderSection("Title")</h1> 
     </header> 
    } 
    @if (IsSectionDefined("Navigation")) 
    { 
     <nav> 
      @Html.Raw(result) 
     </nav> 
    } 
    <section> 
     <table> 
      <tr> 
       @if (IsSectionDefined("SideMenu")) 
       { 
        <td> 
         <aside> 
          @RenderSection("SideMenu") 
         </aside> 
        </td> 
       } 
       <td> 
        <section> 
         @RenderBody() 
        </section> 
       </td> 
       @if (IsSectionDefined("SideMenu2")) 
       { 
        <td> 
         <aside> 
          @RenderSection("SideMenu2") 
         </aside> 
        </td> 
       } 
      </tr> 
     </table> 
    </section> 
    @if (IsSectionDefined("Navigation")) 
    { 
     <nav> 
      @Html.Raw(result) 
     </nav> 
    } 
    <footer> 
     <h4>The footer of the main Layout</h4> 
    </footer> 
</body> 
</html>

然後三種不同的視圖可以定義部分：

@{ 
    ViewBag.Title = "Cieties"; 
} 

@section Title 
{ 
    Main cities around the World 
} 

@section Navigation 
{ 
    Home | City 1 | City 2 | City 3 
} 

@section SideMenu 
{ 
    <ul> 
     <li>Population</li> 
     <li>Area</li> 
     <li>History</li> 
     <li>For turists</li> 
    </ul> 
} 

@section SideMenu2 
{ 
    <ul> 
     <li>Additional link 1</li> 
     <li>Additional link 2</li> 
     <li>Additional link 3</li> 
    </ul> 
} 

<div> 
    Here goes everything about particular city 
</div>

視圖2的實施例：：

@{ 
    ViewBag.Title = "Cars"; 
} 

@section Title 
{ 
    All about good cars 
} 

@section Navigation 
{ 
    Home | BMW | VW | Nissan 
} 

@section SideMenu 
{ 
    <ul> 
     <li>Fuel consumption</li> 
     <li>Comfort</li> 
     <li>Technical details</li> 
     <li>Engine</li> 
    </ul> 
} 

<div> 
    Here goes everything about particular Cars 
</div>

視圖1的實施例

View3的示例：

@{ 
    ViewBag.Title = "Food"; 
} 

@section Title 
{ 
    Tasty food for all occasions 
} 

@section navigation 
{ 
    Home | Non-vegetarians | Vegetarians | In 30 mins | Spanish Tapas 
} 

@section SideMenu2 
{ 
    <ul> 
     <li>Spanish cusine</li> 
     <li>Italian cusine</li> 
     <li>American fast food</li> 
    </ul> 
} 

<div> 
    Here goes everything about particular food 
</div>

有幾個部分是可選的，這就是爲什麼我把false作爲@RenderSection()的第二個參數。你需要爲此做出CSS，也許<nav>,<section>,<aside>作爲HTML5的一部分將需要更改爲<div>標記，但這是一個小的變化。請注意：您需要撥打@Layout = ~/Shared/_Layout.cshtml以使MVC 4爲所有視圖調用此佈局。

來源

2014-11-19 08:58:29 Celdor

如何在用戶單擊後呈現局部視圖（使用剃鬚刀）？

回答

相關問題