2009-05-31 39 views
11

我在MVC的部分觀點,即雲一樣的東西:自AJAX的更新在ASP.Net MVC局部視圖/控制器和複製的div

<div id="comments"> 
    ... 
</div> 

內該div有一個調用形式控制器使用AJAX並獲取相同的局部視圖。問題是,調用視圖的結果替換DIV,而不是整個div的內容,和我結束了:

<div id="comments"> 
    <div id="comments"> 
     ... 
    </div> 
</div> 

我能想到的與我的ASP經歷一週的唯一解決方案。淨MVC和AJAX是把DIV的局部視圖外,使局部視圖只包含內側部分,但隨後的形式是指一個ID在窗體位於打破了小封裝,我已經離開那裏的視野之外。有沒有更好的解決方案?

回答

3

您使用AjaxHelper.Form或jQuery的。如果您使用jQuery,您是否嘗試過使用replaceWith()?使用AjaxHelper你使用的是AjaxOptions { InsertionMode = InsertionMode.Replace }?我認爲使用你或者可以用局部視圖的結果替換整個DIV。

+0

我使用AjaxHelper.Form和InsertionMode.Replace是默認值。我還沒有嘗試過檢查它,因爲替代方案在之前和之後,這絕對不是我想要的。也許我應該嘗試使用jQuery,但我首先必須學習如何。 – Pablo 2009-05-31 01:35:47

1

你應該使用jQuery嘗試過(從我的答案上MS MVC form AJAXifying techniques):

<script type="text/javascript"> 
    $(document).ready(function() { 
     ajaxify($('div#comments')); 
    }); 

    function ajaxify(divWithForm) { 
     var form = $('form', divWithForm); 
     $(':submit', form).click(function (event) { 
      event.preventDefault(); 
      $.post(form.attr('action'), form.serialize(), 
       function(data, status) { 
        if(status == 'success') { 
         var newDivWithForm = $(data); 
         ajaxify(newDivWithForm); 
         divWithForm.after(newDivWithForm).remove(); 
        } 
       } 
      ); 
     }); 
    } 
</script> 
3

使用

AjaxOptions { UpdateTargetId = "myDiv", InsertionMode = InsertionMode.Replace } 

應該替換的 '#myDiv' 元素的全部內容,爲tvanfosson說。你的問題在於'#myDiv'的位置。下面是一個例子:

<div id="myDiv"> 
    <% Html.RenderPartial("MyPartialView"); %> 
</div> 

其中MyPartialView是:

<div id="comments"> 
    <% using (Ajax.BeginForm(new AjaxOptions() { UpdateTargetId = "myDiv", InsertionMode = InsertionMode.Replace })) {%>   
    ... 
    <input type="submit" value="Submit comment" /> 
    <% } %> 
</div> 

如果包括「#myDiv」的局部視圖內的div,它將右(連同其內容一起)接收到響應之後被呈現,然後它的內容將被替換爲相同的部分視圖(包括它自己的'#myDiv'div)的響應,這就是爲什麼你總是會得到2個嵌套的div。

你應該總是用一個容器,用於您的局部視圖,然後設置UpdateTargetId到容器的id。

編輯:我更新了代碼以表示您在問題中描述的確切情況。

附帶.NET MVC 3採用了基於從jQuery.ajax四個回調回調
+0

你能很好,並顯示一些控制器代碼? – Rookian 2010-07-01 10:26:06

+0

什麼時候局部視圖需要一些數據?我怎麼能把最新的數據發送到局部視圖? – Rookian 2010-07-01 10:34:25

6

不顯眼的Ajax庫。然而,從Ajax.BeginForm方法InsertionMode = InsertionMode.Replace不結果jQuery的replaceWith被調用。相反,html的(數據)被用來代替內容目標元件(而不是元件本身)的

我描述了一個解決這個問題在我的博客: http://buildingwebapps.blogspot.com/2011/11/jquerys-replacewith-and-using-it-to.html

+0

該解決方案完美運行。我必須承認,讓我感到困惑的是,我被綁定到不顯眼的Ajax庫的編輯版本。如果我將來允許nuget升級,那麼我的應用將會中斷。我希望Microsoft在未來添加此功能。這實際上是對訂單項進行內聯編輯的唯一解決方案。 – 2012-07-17 01:55:22

2

我Asp.Net MVC有同樣的問題5.

我不想PartialView有什麼div的它可能被包含在一定的瞭解,所以我沒有接受周圍的工作。

接着,我注意到其他的答案提到ReplaceWith,發現簡單的解決方案:

InsertionMode = InsertionMode.ReplaceWith 

現在,MVC局部視圖可以完全用AJAX助手代替自己,而無需外界本身名稱的依賴。

相關問題