使用javascript在ASP.NET MVC中加載部分視圖

我有大約15個部分視圖需要根據用戶的菜單選項卡進行顯示。基本上我有這15個菜單選項卡在側面，並基於用戶點擊這些選項卡，我將顯示該頁面上該選項卡的內容。使用javascript在ASP.NET MVC中加載部分視圖

另外我在這裏使用Knockout。

所以我有這15個淘汰賽observables（self.tab_A(), self.tab_B(), ...self.tab_N()）頁面第一次加載時填充。

我有的代碼是這樣的。這是視圖。

<ul id="tabs"> 
    <li> 
     <a data-bind="click: function(){ $root.ShowHideDiv(tab_A.id); }" style="cursor: pointer;"> 
      Tab A 
     </a> 
    </li> 

    <li> 
     <a data-bind="click: function(){ $root.ShowHideDiv(tab_B.id); }" style="cursor: pointer;"> 
     Tab B 
     </a> 
    </li> 
    ... 
    ... 
</ul>

部分視圖是預先加載的，但從用戶的視圖中隱藏。

<ul> 
    <li id="tab_A" style="display: none" class="hiddenDivs"> 
     @{Html.RenderPartial("~/Views/Claims/FroiReport/_Insurer.cshtml");} 
    </li> 

    <li id="tab_B" style="display: none" class="hiddenDivs"> 
     @{Html.RenderPartial("~/Views/Claims/FroiReport/_Insurer.cshtml");} 
    </li> 
</ul>

在點擊事件中使用腳本顯示div。

self.ShowHideDiv = function (tabToShow) { 
     console.log(tabToShow); 
     $('.hiddenDivs').html(''); 
     $('#' + tabToShow).show(); 
    };

現在的問題是，使用此代碼的UI工作正常3-4的意見，但設計是因爲有這些被隱藏了太多的div（我不可能打破了剩下的意見肯定在這裏）。

因此，我正在研究其他選項，我只會在運行時加載特定的視圖。當用戶點擊選項卡時，獲取局部視圖並加載它。

因此，我想是這樣的：

self.ShowHideDiv = function (tabToShow) { 
    $('.hiddenDivs').html(''); 
    var view = getValueFromDict(dict, tabToShow); //gets the needed view from a dictionary in "~/Views/Products/CoolProducts/_ItemOne.cshtml" format 
    $('.hiddenDivs').load('/Claims/ReturnPartialView/?partialViewName=' + view); 
};

但是，這並不工作，因爲我沒有與這些意見相關的任何動作/控制器，我無法直接加載使用javascript的視圖/ jQuery的。

我試過的另一個選擇是創建一個返回部分視圖的控制器。

public ActionResult ReturnPartialView(string partialViewName) 
     { 
      return PartialView(partialViewName); 
     }

並調用它像這樣：

self.ShowHideDiv = function (tabToShow) { 
    $('.hiddenDivs').html(''); 
    var view = getValueFromDict(dict, tabToShow); 
    $('.hiddenDivs').load('/MyController/ReturnPartialView/?partialViewName=' + view); 
}

現在這個加載與視圖相關聯，我需要的觀點，但淘汰賽觀察到即將爲空做這個。

我聽說KO模板可以用於我的場景，但還沒有嘗試過KO模板來解決這個問題（接下來我將介紹它）。我想看看是否有人在不使用KO模板的情況下解決了我的問題。

非常感謝您耐心的努力去理解這一點。

來源

2015-12-30 pso

你必須通過ajax get/post方法命中控制器，然後返回一個局部視圖。 –

因此，如果沒有調用此視圖的操作，那麼我無法使用javascript/ajax加載它？ – pso

您必須點擊控制器的操作.. –

同樣被這裏解釋..

https://cmatskas.com/update-an-mvc-partial-view-with-ajax/

來源

2015-12-30 11:53:49

相反，您可以放置一個更好的代碼。 –

@Arasu，我看了你提供的鏈接，但它不是相同的情況。這個鏈接顯示了一個視圖的例子，這個視圖通過控制器的Action來調用，這與我的情況不同。 – pso

@ pso好的。就像穆罕默德在評論中提到的那樣，你必須從jquery/ajax中選擇控制器動作。 –

你應該有它返回的局部視圖控制器動作。

public ActionResult MyPartialView() 
    { 
     return PartialView("_MyPartialView", new MyPartialViewModel()); 
    }

您可以從javascript調用此控制器方法。確保部分視圖存在於與您的控制器名稱匹配的文件夾下的Views文件夾中。

希望它有幫助！

來源

2015-12-30 12:17:15

謝謝@Amanvir，但我正在尋找一種方法來加載它沒有擊中控制器/動作。 – pso

你可以用jQuery在兩個步驟中做到這一點。首先從你的視圖在dom準備好或事件發生後點擊所需的控制器動作。 dom準備好後，我在這裏打電話給控制器。您可以按照自己的意願點擊動作獲取或發佈方法。
在$ .ajax中，我已經使用了（async：false），這樣我現在調用的語句必須在函數中的下一個語句可以執行之前完成。

<script> 
    $(document).ready(function() { 
     $.ajax({ 
      url: '/Controller/ActionNAme', 
      type: 'POST', 
      async: false, 
      data: { ModelField: value}, 
      success: function (result) { 
       $("#your_desired_div_id").html(result); 
      } 
     }); 
    }); 
</script>

這是行動。該操作將視圖模型作爲結果返回給ajax.post函數，並在ajax post函數中將your_desired_div_id內容與部分視圖的內容一起更改。

[HttpPost] 
     public ActionResult ActionNAme (ModelName ModelField) 
     { 
      var dBList= (from myTable in db.tableModel where myTable .column == ModelField.column select myTable).ToList(); 
       return PartialView("_PartialView", dBList) 

     }

來源

2015-12-30 12:48:23

使用javascript在ASP.NET MVC中加載部分視圖

回答

相關問題