jquery – 如何动态创建/删除元素并允许模型绑定启动？

我过去做过这个,我可能要再做一次,但在此之前,我想把它扔出去看人们如何处理它.

剃刀观点：

<ul>
   @Html.EditorFor(model => model.Questions)
</ul>

这可能会产生：

<ul>
   <li><input type="text" id="Questions_0__Title" name="Questions[0].Title" value="hi"/></li>
   <li><input type="text" id="Questions_1__Title" name="Questions[1].Title" value="hi2"/></li>
<ul>

很简单.

现在,我需要允许用户添加,编辑或删除任何这些“问题”.

对于编辑,这很简单 – 无需工作.但是对于添加/删除,如果我用jQuery做,我需要聪明一点我生成“id”和“name”属性的方式(例如,计算有多少,加1,等等),对于删除,我会“重新渲染”一些元素(例如,如果删除了一个元素,我需要将“id”和“name”属性更改为-1,以用于所有后续元素).

所有这一切都是因为它是一种形式,它需要模型约束.

这对我来说太毛茸茸了,所以在过去,我已经用表格上的任何内容对服务器进行了AJAX调用,然后在控制器中添加/删除元素,并渲染局部视图.这样,所有元素都“准备好模型绑定”.我仍然需要一点但jQuery,但远不及那么多.

有没有人找到更好的方法？

解决方法

我也必须处理完全相同的情况.我想出的最简单的解决方案是使用包装器模型,类似于：

public class QuestionListModel
{
    public IList<QuestionModel> Questions { get; set; }

    public IList<QuestionModel> Template
    {
        get
        {
            return new List<QuestionModel>
                       {
                           new QuestionModel {/* defaults for new question */}
                       };
        }
    }

    public QuestionListModel()
    {
        Questions = new List<QuestionModel>();
    }
}

重要的部分是具有Template属性,该属性也是IEnumerable< T>.与您想要的实际型号相同的类型.这样,MVC将为您完成自动编号.所以使用这个模型,你得到的是你的集合,带有“Questions_0__Title”编号,你还得到一个带有“Template_0__Title”命名的模板行.

我将模板行隐藏在UI中,并在添加新行时使用它.

在剃刀中,你绑定模板就像绑定一个常规问题一样,唯一的区别是它会隐藏在< div>中.您还需要将问题列表的计数绑定到隐藏字段.在我的情况下,我有一个问题的编辑器模板,它在< div>内部呈现它.使用特定的选择器,以便以后轻松访问.
所以你最终得到的东西类似于：

<div class="templateContainer">
  <div class="question">
    [Template]
  </div>
</div>
<div class="items">
  [for each of your items]
  <div class="question">
    [Question]
  </div>
</div>

添加行时,诀窍是,使用javascript：

>从隐藏字段中获取计数,递增它.

var counter = $("#QuestionsListCount");
    var count = parseInt(counter.val());
    count++;

>获取整个模板块,克隆它(例如使用jquery的.clone(true)),将其命名为唯一的(例如,使用步骤1中的计数器值),并将其附加到您的问题所在的部分.

var template = $("#templateContainer");
    var newItem = template.clone(true);
    var newId = "item_" + count;
    var newQuestion = newItem.children().first();
    newQuestion.attr("id",newId);
    newQuestion.appendTo('#items');

>对于每个项目,例如新附加块中的输入(您可以使用分配给它的新ID找到它),替换ids => “Template_0”带有“来自第2步的问题_count”,而名称=> “Template [0]”with“Questions [count from step 2]”.

$("#" + newId + " :input").each(function (index,input) {
        input.id = input.id.replace("Template_0","Questions_" + (count - 1));
        input.name = input.name.replace("Template[0]","Questions[" + (count - 1) + "]");
    });

>更新counter =>的隐藏字段counter.val(计数);
> ……
>利润！

现在,关于删除,我的方式是,我的ViewModel实际上有一个IsDeleted标志,我也绑定到问题编辑器模板中的隐藏字段.
这样,删除就像隐藏特定问题一样简单(问题选择器很方便),并将IsDeleted字段设置为true.
当您通过默认模型绑定器返回整个列表时,您需要丢弃所有已删除的模型(或发出实际删除,具体取决于您的后端数据模型).

这样我就可以避免处理识别已删除项目的各种方法,还可以重新编号UI中的所有项目.此外,您还可以获得服务器端代码确定删除时应该实际发生的事情(例如验证或撤消操作)的优势.

这是一个很长的帖子,但实现并不是那么困难(或很长),并且可以很容易地以通用的方式重用.

干杯!

jquery – 如何动态创建/删除元素并允许模型绑定启动？

解决方法

相关推荐