如何在MVC3中从View中将Id-date组合传递给Controller

时间:2012-08-31 04:39:45

标签: asp.net-mvc-3 jquery

在我的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的组合发送给控制器?

请帮帮我。

1 个答案:

答案 0 :(得分: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}
}

然后为后期操作创建一个新的视图模型:

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
    }
}