MVC在導航欄上顯示部分視圖，請單擊

Question

當我單擊導航欄時，我想顯示局部視圖。 我有一個包含左側菜單的視圖。 當用戶單擊導航欄項目時，應顯示適當的視圖。

我不知道如何實現這種觀點？

Manage.cshtml

        <div class="row">
            <div class="col-xs-12">
                <div class="page-header">
                    <h1>My Account</h1>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-3">
                <ul class="nav nav-pills nav-stacked nav-stacked-extended">
                    <li class="active">
                        <a id="A3" target="_self" runat="server" href="@Url.Action("Contactinfo", "Account")">Contact Info</a>
                    </li>
                    <li class="">
                        <a id="A4" target="_self" runat="server" href="@Url.Action("changePassword", "Account")">Password</a>
                    </li>
                </ul>
            </div>
            <div class="col-xs-9 ng-scope" data-ng-view="">
                <div class="row row-gap-medium ng-scope">
                    @Html.Partial("Contactinfo")
                </div>
            </div>
        </div>

在上面的代碼中，當我第一Manage.cshtml顯示Contactinfo視圖時，在Manage.cshtml加載時，我創建了左側菜單，即contactinfo，changepassword等。 當用戶單擊密碼菜單時， contactinfo的內容將通過更改的changedpassword頁面進行更改。 請檢查以下屏幕截圖。

在上圖的此處，您可以看到左側菜單和相應的頁面。 用戶單擊密碼后，我想要什么，查看已更改為password page 。 當前它顯示聯系信息頁面。 我怎樣才能做到這一點？

Answer 1

根據您的需求，只需對左側欄中存在的鏈接進行局部查看，當用戶單擊左側欄中的特定選項時，只需使用jquery從ajax調用中加載適當的局部視圖，然后將右側欄中的html替換為來自ajax調用的html。

給您的左側菜單唯一的ID，然后：

演示：

 $(document).ready(function(){
   $("#menu1").click(function(e){
      e.preventDefault();
      $.ajax({
                url: "/MyController/getdata",
                type: 'GET',
                datatype: 'html',
                data: {  },
                success: function (data) {
                   $("#div1").html('');
                   $("#div1").html(data);

            });
    });
});

控制器（MyController）：

[HttpGet]
Public ActionResult getdata(string dropval)
{
//bind model here
return PartialView("mypartialview",model)
}

Answer 2

我認為您應該通過JavaScript進行部分渲染。

假設您有<div id="partialView"></div>

然后，當用戶單擊鏈接時，應該運行Ajax查詢。

就像是：

$.ajax({
            url: $(this).data('yourUrl'),
            type: 'GET',
            cache: false,
            success: function(result) {
                $('#partialView').html(result);
            }
        });

Answer 3

花了我一點時間來解決這個問題。

本質上，您希望Controller動作返回部分視圖，然后使用Ajax加載返回的部分視圖。

JavaScript / Ajax

$.ajax({
            url: '@Url.Action("Action", "Controller")',
            type: 'POST',
            data: { 'viewName': 'password' },
            success: function (data) {
                $('#partial-container').html(data);
            }
        });

控制器返回類型

Public ActionResult GetView(string viewName)
{
    return PartialView(viewName, model);
}

理想情況下，更改HTML，以便更輕松地引用要在其中加載部分代碼的div容器

<div class="col-xs-9 ng-scope" data-ng-view="">
                <div class="row row-gap-medium ng-scope">
                    <div id="partial-container">@Html.Partial("Contactinfo")</div>
                </div>
            </div>

Answer 4

嘗試This JS for Clickevent

$(document).on('click', '#anCalcBtn', function () {
$('#anCalcDetail').load('/Home/Contactinfo/');
});

如果我沒有看錯你正在嘗試做的像這