允许用户多次添加局部视图MVC 3

时间:2012-07-17 14:24:21

标签: asp.net-mvc asp.net-mvc-3

我的模型有几个字段并包含一个列表。我需要一个允许用户输入Parent字段然后输入mutlple子字段的视图。我遇到的问题是我不知道他们要添加多少个子对象。我需要视图允许他们根据需要添加任意数量的子对象。

我假设我需要子对象的局部视图,但是如何允许他们多次将局部视图添加到页面?

修改

这是我到目前为止的内容,但它只是将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中缺少一些结束字符

4 个答案:

答案 0 :(得分:2)

罗纳德,请看一下这篇博文......我用它并且它很完美。

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

答案 1 :(得分:2)

我让这个工作。我将部分视图包装在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());
    }

答案 2 :(得分:0)

我建议有一个图像/按钮指示字段添加,然后单击,您可以编写一个简单的处理程序以在表单中插入局部视图或任何其他表单字段。如果你保持插入字段的名称相同,那么它们将作为服务器中的数组提交,从那里你可以解析并找出它。

答案 3 :(得分:0)

您可以使用jQuery检索部分视图并将其插入主页面的DOM中。查看loadajax功能。您需要连接某种控件以触发异步加载。部分视图将从控制器操作返回(与完整视图不同,例如/ Controller / MyPageAction和/ Controll / MySubformAction,其中MyPageAction是完整结果,MySubformAction是部分视图)。

您可以依赖明确的用户操作(按钮点击),也可以在用户开始填写最后一组可用的子字段时自动提供一组新的子字段。