允許用戶多次添加部分視圖MVC 3

Question

我有一個模型有幾個字段幷包含一個列表。我需要一個允許用戶輸入父字段然後輸入多個子字段的視圖。我遇到的問題是我不知道他們要添加多少個子對象。我需要視圖允許他們添加儘可能多的子對象。

我假設我需要一個子對象的局部視圖，但我該如何讓他們多次添加局部視圖到頁面？

編輯

這裏是我迄今爲止，但它只是呈現在append方法爲屏幕上的文本代碼。

$(document).ready(function() { 
    $("#AddProgramTrainingButton").click(function (e) { 



     $("#ProgramTraining").append('@@{Html.RenderPartial("_ProgramTrainingDetailsCreate",new Online.Models.ProgramTrainingDetailsViewModel());}</br></br>'); 

     e.preventDefault(); 

    }); 
}); 

---------第二編輯

我已經使用jquery通過調用控制器中的局部視圖加載的局部視圖嘗試，但是這是不工作。

 $(document).ready(function() { 
     $("#AddProgramTrainingButton").click(function (e) { 

      alert("button clicked!"); 



      $('#ProgramTraining').load('@Url.Action("GetCreatePartialView","PGTController")'); 
      return false; 



     }); 
    }); 

// controller method 
     public ActionResult GetCreatePartialView() 
     { 
      return PartialView("_ProgramTrainingDetailsCreate.cshtml",new PGTProgramTrainingDetailsViewModel()); 
     } 

我需要刪除的文件擴展，並缺少一些結束字符jQuery的

Answer 1

我建議具有圖像/按鈕顯示域相加，然後的onclick，你可以寫一個簡單的處理程序在表單中插入部分視圖或任何其他表單域。如果您保留插入字段的名稱相同，那麼它們將作爲服務器中的數組提交，從那裏您可以解析並找出。

Answer 2

您可以使用jQuery檢索您的局部視圖並將其插入到主頁面的DOM中。查看load和ajax的功能。您需要連線某種控件來觸發異步加載。部分視圖將從控制器操作返回（與完整視圖不同，例如/ Controller/MyPageAction和/ Controll/MySubformAction，其中MyPageAction是完整結果並且MySubformAction是部分視圖）。

您可以依靠明確的用戶操作（按鈕單擊），或者在用戶開始填寫最後一組可用子字段時自動提供一組新的子字段。

Answer 3

羅納德，看看這個博客文章...我使用它，它是完美的。

http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

Answer 4

我得到了這個工作。我包裹在一個div的局部視圖

$(document).ready(function() { 

    // This section is to remove a Dynamically added Training section when a button is clicked 
    $("#RemoveTrainingButton").live('click', function (e) { 
     e.preventDefault(); 


     $(this).closest('div').remove(); 

    }); 



    // This section adds a Training section to the page when a button is clicked 
    $("#AddProgramTrainingButton").click(function (e) { 
     e.preventDefault(); 
     var url = '@Url.Content("~/PGT/GetCreatePartialView")'; 
     $.get(url, null, function (data) { 
      $('#ProgramTraining').append(data); 
     }, 'html').error(function (error) { 
      alert(error); 
     }); 








    }); 
}); 

[HttpGet] 
    public ActionResult GetCreatePartialView() 
    { 
     return PartialView("_ProgramTrainingDetailsCreate",new PGTProgramTrainingDetailsViewModel()); 
    }