通过传递ID以jQuery模式加载数据

Question

我正在使用这个jquery模态库https://github.com/kylefox/jquery-modal，并希望将其与我的数据表配对。

我想单击数据表中的链接，并将该ID传递给jquery模态，然后该jquery模态将根据ID从服务器加载数据，然后打开以显示它。

到目前为止，这就是我所拥有的。

查看：

@model Data.ViewModels.ApplicationRolesDetailsViewModel
@Html.Partial("Modal/RoleDetails",Model)
<div class="col-sm-12">
    <h2>@Model.ApplicationDetails.Name</h2>
    <hr />
</div>
@using (Html.BeginForm("Update", @ViewContext.RouteData.Values["controller"].ToString()))
{
    @Html.AntiForgeryToken()
    <div class="col-sm-12">
        <div class="form-group">
            @Html.HiddenFor(m => m.ApplicationDetails.Id)
            @Html.LabelFor(m => m.ApplicationDetails.Name)
            @Html.TextBoxFor(m => m.ApplicationDetails.Name, new { @class = "form-control col-sm-12", @readonly = "true" })
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.ApplicationDetails.Description)
            @Html.TextAreaFor(m => m.ApplicationDetails.Description, new { @class = "form-control col-sm-12" })
            @Html.ValidationMessageFor(m => m.ApplicationDetails.Description)
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.ApplicationDetails.Id)
            @Html.TextBoxFor(m => m.ApplicationDetails.Id, new { disabled = "disabled", @class = "form-control col-sm-12" })
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.ApplicationDetails.SecretKey)
            @Html.TextAreaFor(m => m.ApplicationDetails.SecretKey, new { @class = "form-control col-sm-12", @readonly = "true" })
            @Html.ValidationMessageFor(m => m.ApplicationDetails.SecretKey)
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.ApplicationDetails.CreatedOn)
            @Html.TextBoxFor(m => m.ApplicationDetails.CreatedOn, new { @class = "form-control col-sm-12", @readonly = "true" })
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.ApplicationDetails.UpdatedOn)
            @Html.TextBoxFor(m => m.ApplicationDetails.UpdatedOn, new { @class = "form-control col-sm-12", @readonly = "true" })
        </div>
        <div class="form-group">
            <a href="#roleDetails" class="btn btn-default pull-right" rel="modal:open" id="add">Add</a>
            <table id="table">
                <thead>
                    <tr>
                        <th>Roles</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="form-group">
            <div class="clearfix">
                <input type="submit" value="Save" class="btn btn-primary pull-right" />
                @Html.ActionLink("Back", "Index", @ViewContext.RouteData.Values["controller"].ToString(),new { }, new { @class = "btn btn-default pull-right" })
            </div>
        </div>
    </div>

数据表脚本：

$(document).ready(function () {
        var table = $("#table").DataTable({
            "ajax": {
                "url": "@Url.Action("GetApplicationRoles", @ViewContext.RouteData.Values["controller"].ToString())",
                "type": "POST",
                "data": form_data,
                "datatype": "json"
            },
            "filter":false,
            "language": {
                "search": "",
                "searchPlaceholder": " Search"
            },
            "ordering": true,
            "lengthChange": false,
            "columns": [
                {
                    "data": function (data, type, row, meta) {
                        var url = "#roleDetails";
                        return "<a href='" + url + "'>" + data.RoleId+ "</i></a>"
                    }, "name": "RoleId"
                }
            ],
            "responsive": true,
            "processing":true,
            "serverSide": true,
        }).columns.adjust()
        .responsive.recalc();
        new $.fn.dataTable.FixedHeader(table);
    });

这将生成一个如下表：

我可以知道如何编辑数据表中的url变量以将ID传递给模式吗？另外，如何在模态中使用该ID并加载适当的变量？

这是模态局部视图的代码

@model Data.ViewModels.ApplicationRolesDetailsViewModel
<div id="roleDetails" class="modal"><div class="col-sm-12">
    @if (Model.Roles.Id == null)
    {
        <h2>Add Role</h2>
    }
    else
    {
        <h2>Edit Role</h2>
    }
    <hr />
</div>
    @using (Html.BeginForm("SaveRole", @ViewContext.RouteData.Values["controller"].ToString()))
    {
         @Html.AntiForgeryToken()
    <div class="col-sm-12">
        <div class="form-group">
            @Html.HiddenFor(m => m.Roles.ApplicationId)
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.Roles.Name)
            @Html.TextBoxFor(m => m.Roles.Name, new { @class = "form-control col-sm-12" })
        </div>
        <div class="form-group">
            <div class="clearfix">
                <input type="submit" value="Add" class="btn btn-primary pull-right" />
            </div>
        </div>
    </div>
    }
</div>