Question

我正在使用MVC 3 + Razor。我有一个名为Details的MVC视图。我从SQL服务器数据库表中检索并显示了详细信息数据。我有一个Clickable <a/>列“Type”。单击Type Anchor链接显示Jquery Popup。

| type      |   date   | completed |  
|________________________________ _|  
|           |          |           |  
| sample    | 1/1/2012 |           |  
|(Clickable)|

如何检索与Clicked元素相关的整个行数据从SQL Server中的表和显示Jquery Dialog.Every Type字段上的数据具有与之关联的ID。
我在Jquery Dailog上有一个复选框。如果已选中，则“视图中的已完成”列必须具有“当前日期”并且必须“更新数据库”表（其中包含“日期字段”）。

寻找代码示例或链接或教程 - 未能通过编辑和添加功能找到任何内容。

Answer 1

我不熟悉asp.net或razor，但我知道使用jQuery你首先会向服务器发出一个ajax请求，其中脚本会加载sql数据，将其转换为JSON字符串，然后发送它回到jQuery。然后jQuery可以解析JSON并填充字段。

处理jQuery中的日期（通常是javascript）可能很棘手，因为它基于客户端的计算机而不是服务器的计算机。我建议再次运行ajax，让服务器检查当前日期并处理数据库更新。

Answer 2

使用局部视图进行弹出，根据您的要求制作用户界面，并将行详细信息作为模型传递给此局部视图。

你的表格html看起来像，

<tr id="@model.rowid">
        <td>
            sample
           (<a onclick="RowDetails(@model.rowid)">Clickable</a>)
        </td>
        <td>
            1/1/2012
        </td>
        <td>
        </td>
    </tr>

点击Clicktable，调用javascript函数，

function RowDetails(RowId) {
        $("#divDetails").load('/yourController/rowdetail', { id: RowId }).dialog({
            modal: true,
            title: "Row Detail",
            height: 400,
            width: 600,
            buttons: {
                "Ok": function () {
                    var isComplete = 0;
                    if ($("#rowComplete").is(":checked")) { isComplete = 1; }
                    $.get("/yourController/RowComplete", { id: RowId, isChk: isComplete }, function (d) {
                        $("#" + RowId).before(d).remove();
                        $("#" + RowId).hide().fadeIn('slow');
                    });
                    $(this).dialog('close');
                }
            }
        });
    }

和控制器一样，

public ActionResult rowdetail(int id)
{
// code to get row from databse
// return this row as object to partial view
return("partial view for row details", Object);
}

public ActionResult RowComplete(int id, int chk)
{
// code to update row from databse
// return this row as object 
return("pass updated row", Object);
}

使用jquery对话框在mvc视图中编辑表

2 个答案: