如何在引导模式c#中获取数据以输入值答案

【问题标题】：How to get the data to input value in bootstrap modal c#如何在引导模式c#中获取数据以输入值
【发布时间】：2019-02-08 13:15:15
【问题描述】：

嗨，我正在使用 jquery DataTables，我想编辑数据表中的记录所以这是我的数据表代码，我在其中获取员工的 ID

"columns": [
                { "data": "Department", "name": "Department", "autoWidth": true },
                { "data": "Name", "name": "Name", "autoWidth": true },
                { "data": "CardNumber", "name": "Card Number", "autoWidth": true },
                {
                    "data": "Id",
                    "render": function (data , type , full , meta)
                    {
                        return '<a href="#" onclick="EditEmployee(' + full.Id + ')"<i class="fa fa-edit fa-2x" ></i></a> &nbsp &nbsp &nbsp &nbsp <a href="#" onclick="DeleteEmployee(' + full.Id + ')"<i class="fa fa-trash fa-2x" style="color:red;"></i></a>'
                    }
                },

            ],

我通过full.id 获得 id 并将其传递给此函数

<script>

var EditEmployee = function (Id) {

    $("#myModal1").modal("show");

};

但我不知道如何将值传递给这个模态视图

@foreach (var item in Model.EmployeeCollection)
            {
            <div class="modal fade" id="myModal1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <a href="#" class="close" data-dismiss="">&times;</a>
                            <h3 class="modal-title">Edit Employee</h3>
                        </div>
                        <div class="modal-body" id="myModalBodyDiv1">
                            @while (item.Id == ?????)
                            {
                            <label>Employee Id</label>
                            <input id="txtId" type="text" class="form-control" value="@item.Id" disabled/>

                            <label>Name</label>
                            <input id="txtName" type="text" class="form-control" value="@item.Name" />

                            <label>Department</label>
                            <input id="txtDepartment" type="text" class="form-control" value="@item.Department" />

                            <label>Card Number</label>
                            <input id="txtCardNum" type="text" class="form-control" value="@item.CardNumber" />

                            <div class="modal-footer">
                                <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-white" onclick="saveUser();">Save</button>
                            </div>
                            }
                        </div>
                    </div>
                </div>
            </div>
            }

我试过了，但没用我不知道如何将 id 从 js 函数传递到视图。

【问题讨论】：

标签： c# datatables bootstrap-modal

【解决方案1】：

如果您可以先重用网格中的数据（示例）：

render: function (data, type, row) {<a data-info="' + row.IdUser + '" data-toggle="modal" data-target="#modalGridTable" ...

现在您可以使用 bootstrapjs 或局部视图打开模式：

引导（阅读文档）

在 row.IdUser 我有我的 id。现在当我点击 $('#modalGridTable').on('show.bs.modal', function (event)...

    var button = $(event.relatedTarget);
    var id = button.data('info');
    var data = Grid.ajax.json().data;
    function getDataJson(IdUsuario) {
        return data.filter(
            function (data) {
                return data.IdUser === IdUser;
            }
        );
    }

    var result = getDataJson(id);

所以你可以这样使用：

result[0].Phone

局部视图

像这样将 json 发送到控制器：

i.href ='@Url.Action("Edit")'; 
$('#modal > .modal-dialog > div').load(i.href, { data: jsondata }, function () {
                    $('#modal').modal({
                        backdrop: 'static',
                        keyboard: false
                    }, 'show');
                    bind(this);
                });
            function bind(dialog) {
                $('form', dialog).submit(function () {
                    if ($(this).valid()) {
                        $.ajax({
                            url: this.action,
                            type: this.method,
                            data: $(this).serialize(),
                            success: function (result) {

                            },
                            error: function () {

                            }
                        });
                    }
                    return false;
                });
            }

您可以使用模型调用。

【讨论】：