Question

我有一个使用JSON对象显示的表，如下所示 -

有一个更新按钮，应该更新（on onclick）＆＃39; Phone2＆＃39;根据文本框中的用户编辑对象的值，并以表格下方的标签形式显示更新的对象。用于表的代码如下 -

HTML -

<table id="personDataTable">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Phone1</th>
        <th>Phone2</th>
    </tr>

</table>

<input type="button" value="Update"/>

Javascript -

$.ajax({
    url: ' ',
    type: "post",
    dataType: "json",
    data: {
        json: JSON.stringify([
            {
            id: 1,
            Name: "Peter",
            Phone1: "9878987",
            Phone2:"21"},
        {
            id: 2,
            Name: "David",
            Phone1: "9092345",
            Phone2:"23"},
        {
            id: 3,
            Name: "Rahul",
            Phone1: "9092345",
            Phone2:"90"}    
        ]),
        delay: 3
    },
    success: function(data, textStatus, jqXHR) {
        drawTable(data);
    }
});

function drawTable(data) {
    for (var i = 0; i < data.length; i++) {
        drawRow(data[i]);
    }
}

function drawRow(rowData) {
    var row = $("<tr />")
    $("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
    row.append($("<td>" + rowData.id + "</td>"));
    row.append($("<td>" + rowData.Name + "</td>"));
    row.append($("<td>" + rowData.Phone1 + "</td>"));
    row.append($("<td><input id="+rowData.id+" type=text value=" + rowData.Phone2 + "></td>"));
}

除了提到的那些之外，没有其他按钮/事件。这怎么办？

Answer 1

以下是您的观点：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index5</title>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var gridData;

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

                var text = '[' +
                    '{ "id":1, "Name":"Peter" , "Phone1":"9878987", "Phone2":"21" },' +
                    '{ "id":2, "Name":"David" , "Phone1":"9092345", "Phone2":"23" },' +
                    '{ "id":3, "Name":"Rahul" , "Phone1":"9092345", "Phone2":"90" } ]';

                gridData = JSON.parse(text);

                drawTable(gridData)
            });

            $("#PostToServer").click(function () {
                //THIS WILl need to come from user
                gridData[0].Phone2 = $("td #1").val();
                gridData[1].Phone2 = $("td #2").val();
                gridData[2].Phone2 = $("td #3").val();

                $.ajax({
                    url: '/Home/GetPhone2',
                    type: 'POST',
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(gridData),
                    dataType: 'json',
                    success: function (data, textStatus, jqXHR) {
                        $("#personDataTable").empty();
                        drawTable(data);
                    },
                    error: function (data, status, error) {
                        alert("error");
                    }
                });
            });

            function drawTable(data) {
                for (var i = 0; i < data.length; i++) {
                    drawRow(data[i]);
                }
            }

            function drawRow(rowData) {
                var row = $("<tr />")
                $("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
                row.append($("<td>" + rowData.id + "</td>"));
                row.append($("<td>" + rowData.Name + "</td>"));
                row.append($("<td>" + rowData.Phone1 + "</td>"));
                row.append($("<td><input id=" + rowData.id + " type=text value=" + rowData.Phone2 + "></td>"));
            }
        })
    </script>

</head>
<body>
    <table id="personDataTable">
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Phone1</th>
            <th>Phone2</th>
        </tr>

    </table>

    <input type="button" value="InitializeGrid" id="InitGrid" />
    <input type="button" value="PostToServer" id="PostToServer" />
</body>
</html>

这是你的控制器：

public class Phone2DTO
{
    public int id { get; set; }
    public string Name { get; set; }
    public string Phone1 { get; set; }
    public string Phone2 { get; set; }
}

public class HomeController : Controller
{
    [HttpPost]
    public JsonResult GetPhone2(IList<Phone2DTO> dto)
    {
        foreach (Phone2DTO p in dto)
        {
            if (p.id == 1)
            {
                p.Phone2 = "222222";
            }
            if (p.id == 2)
            {
                p.Phone2 = "333333";
            }
            if (p.id == 3)
            {
                p.Phone2 = "444444";
            }
        }
        return Json(dto);
    }

    public ActionResult Index5()
    {
        return View();
    }

使用显示的表中的值更新JSON对象

1 个答案: