0

在我的 HTML 表格中，我有一个复选框、开始日期和结束日期

我已将复选框的 ID 设置为该记录/行的主键

单击复选框时，相应记录的结束日期文本框将绑定到日期选择器，通过该选择器可以更改日期

我可以在最后对我的表中的多条记录执行此操作我有一个按钮，单击它我想将此选定的行 ID 及其编辑的结束日期值发送到控制器

通过我的代码，我能够做到这一点，但问题是只有最后更新的值被发送到控制器，而不是所有的值

这是我的代码：

 <div class="cell" style="width:auto;"> 
  <input type="checkbox" name="chkbox" class="a"   value="" data-id="@item.ID" onclick="checkbox1(@item.ID)"/> 
 </div> 
 <div class="cell" style="width:auto;">
  @Html.DisplayFor(modelItem => item.StartDate,  new { id = "strtDate" })
 </div>               
 <div class="cell" id="edit2-@item.ID" style="width:auto;">
  @Html.DisplayFor(modelItem => item.EndDate, new { id = "endDate" })
 </div>
 <div class="cell" id="edit1-@item.ID" style="width:auto; display:none;">
  @Html.TextBox("Enddate", item.EndDate, new { @class = "date", id = "date-" + @item.ID })
</div>

我隐藏 div edit2-@itemID 并在单击复选框时显示 edit1-@itemID 并将 datepicker 绑定到它

    function checkbox1(index) {
    var divname =index;
    $("#edit1-" + divname).toggle();
    $("#edit2-" + divname).toggle();
    $("#date-" + divname).datepicker({ yearRange: "-0:+13",
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd-mm-yy',
        onSelect: function (dateText, inst) {
            var test = dateText + "," + divname;
            alert(test);
            $(".a:checked").attr('data-id', test);
        }
    });
}

我试图将复选框的 id 设置为“id-newenddate”的组合，但它将最近日期分配给所有选定的复选框。

以下是点击了 wen 按钮的代码

$("#button1").click(function () {

    var selected = $(".a:checked").map(function () {
        return $(this).data('id');
    }).get();
    var urlDistricts = '@Url.Action("EditExhi")';
    $.ajax({
        type: "POST",
        datatype: 'integer',
        url: urlDistricts,
        traditional: true,
        data: { listofid: selected},
        success: function (result) {

        }
    });

在控制器中：

     [HttpPost]
    public ActionResult EditExhi(List<int> listofid)
    {

    }

如何解决此问题并将 id-date 组合发送到控制器？

请帮我。

4

1 回答 1

0

您需要能够将复选框与项目匹配：

向视图模型添加索引：

public class YourViewModel
{
    public int Index {get;set;}
    public IEnumerable<YourItemType> Items {get; set; }

    // other fields
}

并在视图中使用它：

 @foreach(var item in Model.Items)
 {
    <div class="cell" style="width:auto;"> 
        <input type="checkbox" name="chkbox[@Model.Index]" class="a" value="true" data-id="@item.ID" onclick="checkbox1(@item.ID)"/> 
    </div> 
    <div class="cell" style="width:auto;">
        @Html.DisplayFor(modelItem => item.StartDate,  new { id = "strtDate" })
    </div>               
    <div class="cell" id="edit2-@item.ID" style="width:auto;">
        @Html.DisplayFor(modelItem => item.EndDate, new { id = "endDate" })
    </div>
    <div class="cell" id="edit1-@item.ID" style="width:auto; display:none;">
        @Html.TextBox("Enddate[" + Model.Index + "]", item.EndDate, new { @class = "date", id = "date-" + @item.ID })
    </div>
    <input type="hidden" name="Id[@Model.Index]" value="@item.ID" /> 
    @{Model.Index = @Model.Index + 1}
}

然后为 post 操作创建一个新的视图模型：

public class PostModel
{
    bool chkbox { get; set; }
    string EndDate {get;set; }
    string Id { get; set; }
}

然后在操作中执行此操作：

[HttpPost]
public ActionResult EditExhi(PostModel[] items)
{
    foreach (var item in items)
    {
        if (item.chkbox)
            //update db here with item.EndDate & item.Id
    }
}
于 2012-08-31T07:23:07.277 回答