允许用户多次添加部分视图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()); 
    }