如何打开模态窗口并将模型传递给j​​s

Question

我学习模态，但遇到问题。现在 Modal 打开但是有样式显示：无，它不想关闭窗口而且我不知道如何传递给 ajax 我的模型我有一个控制器，该控制器具有 1 种应该更新或添加记录的方法。但是我不知道如何在js上做。这是我的主页    <!-- Modal placeholder --><div id="modal-placeholder"></div><!-- Button trigger modal --><button type="button" class="btn btn-primary" data-toggle="ajax-modal" id="modalButton">    Add new pupil</button><h1>Index</h1><div id="Results"></div><table class="table">    <thead>        <tr>            <th>                @Html.DisplayNameFor(model => model.Name)            </th>            <th>                @Html.DisplayNameFor(model => model.Email)            </th>            <th></th>        </tr>    </thead>    <tbody>        @foreach (var item in Model)        {            <tr>                <td>                    @Html.DisplayFor(modelItem => item.Name)                </td>                <td>                    @Html.DisplayFor(modelItem => item.Email)                </td>                <td>                    <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |                    <a asp-action="Details" asp-route-id="@item.Id">Details</a> |                    <form asp-action="Delete" asp-route-id="@item.Id" onsubmit="return jQueryAjaxDelete(this)" class="d-inline">                        <input type="submit" value="Delete" class="btn btn-danger" />                    </form>                </td>            </tr>        }    </tbody></table>然后我点击按钮，我想在模式窗口中打开 partialView。我的模型很简单public class Pupils{[Key]public int Id { get; set; }public string Name { get; set; }public string Email { get; set; }}

Answer 1

这是一个完整的工作演示，如下所示：

索引.cshtml：

@model IEnumerable<Pupils>

<div id="modal-placeholder"></div>

<!-- Button trigger modal -->

<button type="button" class="btn btn-primary" data-toggle="ajax-modal" id="modalButton">

    Add new pupil

</button>

<h1>Index</h1>

<div id="Results"></div>

<table class="table">

    <thead>

        <tr>

            <th>

                @Html.DisplayNameFor(model => model.Name)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Email)

            </th>

            <th></th>

        </tr>

    </thead>

    <tbody>

        @foreach (var item in Model)

        {

            <tr>

                <td>

                    @Html.DisplayFor(modelItem => item.Name)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Email)

                </td>

                <td>

                    <a onclick="Edit(@item.Id)" style="color: #007bff">Edit</a> |

                    <a asp-action="Details" asp-route-id="@item.Id">Details</a> |

                    <form asp-action="Delete" asp-route-id="@item.Id" onsubmit="return jQueryAjaxDelete(this)" class="d-inline">

                        <input type="submit" value="Delete" class="btn btn-danger" />

                    </form>

                </td>

            </tr>

        }

    </tbody>

</table>

Index.cshtml中的js：

@section Scripts{

<script>  

    const patentBox = $('#Results');

    const modalButton = $('#modalButton');

    modalButton.on('click', function () {

        debugger;

        $.ajax({

            url: '/Home/Add',

            type: "GET",

            success: function (content) {

                patentBox.html(content);

                $('#form-modal').modal('show');

            },

            error: function (data) {

                console.error(data.responseText);

                toastr.error('Error', '!!!');

            }

        });

    });

    function Edit(id) {

        $.ajax({

            url: '/Home/Edit?id='+id,

            type: "GET",

            success: function (content) {

                patentBox.html(content);

                $('#form-modal').modal('show');

            },

            error: function (data) {

                console.error(data.responseText);

                toastr.error('Error', '!!!');

            }

        });

    };

    addPupil = form => {

        try {

            $.ajax({

                type: 'POST',

                url: form.action,

                data: new FormData(form),

                contentType: false,

                processData: false,

                success: function (res) {

                    console.log(res.isValid);

                    if (res.isValid) {

                        window.location.href = res.url;

                        $('#form-modal').modal('hide');

                    }

                    else

                        $('#form-modal .modal-body').html(res.html);

                },

                error: function (err) {

                    console.log(err);

                }

            });

        } catch (ex) {

            console.log(ex);

        }

        return false;

    };

    editPupil = form => {

        try {

            $.ajax({

                type: 'POST',

                url: form.action,

                data: new FormData(form),

                contentType: false,

                processData: false,

                success: function (res) {

                    if (res.isValid) {

                        window.location.href = res.url;

                        $('#form-modal').modal('hide');

                    }

                    else

                        $('#form-modal .modal-body').html(res.html);

                },

                error: function (err) {

                    console.log(err);

                }

            });

        } catch (ex) {

            console.log(ex);

        }

        return false;

    };

</script>

}

_PartialAdd.cshtml：

@model Pupils

<div class="modal bd-example-modal-lg" tabindex="-1" role="dialog" id="form-modal">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title"></h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                    <span aria-hidden="true">&times;</span>

                </button>

            </div>

            <div class="modal-body">

                <div class="row">

                    <div class="col-md-12">

                        <form asp-action="Add" onsubmit="return addPupil(this);" autocomplete="off">

                            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

                            <input type="hidden" asp-for="Id" />

                            <div class="row">

                                <div class="col-md-8 order-md-1">

                                    <div class="form-group">

                                        <label for="address">Pupil name</label>

                                        <label asp-for="Name" class="control-label"></label>

                                        <input type="text" asp-for="Name" class="form-control" id="Name" placeholder="">

                                        <span asp-validation-for="Name" class="text-danger"></span>

                                        <div class="invalid-feedback">

                                            Please enter valid name.

                                        </div>

                                    </div>

                                    <div class="form-group">

                                        <label asp-for="Email" class="control-label"></label>

                                        <input asp-for="Email" class="form-control" />

                                        <span asp-validation-for="Email" class="text-danger"></span>

                                    </div>

                                    <div class="form-group">

                                        <input type="submit" value="Submit" class="btn btn-primary btn-block" />

                                    </div>

                                </div>

                            </div>

                        </form>

                    </div>

                </div>      

            </div>

        </div>

    </div>

</div>

_PartialEdit.cshtml：

@model Pupils

<div class="modal bd-example-modal-lg" tabindex="-1" role="dialog" id="form-modal">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title"></h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                    <span aria-hidden="true">&times;</span>

                </button>

            </div>

            <div class="modal-body">

                <div class="row">

                    <div class="col-md-12">

                        <form asp-action="Edit" asp-route-id="@Model.Id" onsubmit="return editPupil(this);" autocomplete="off">

                            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

                            <input type="hidden" asp-for="Id" />

                            <div class="row">

                                <div class="col-md-8 order-md-1">

                                    <div class="form-group">

                                        <label for="address">Pupil name</label>

                                        <label asp-for="Name" class="control-label"></label>

                                        <input type="text" asp-for="Name" class="form-control" id="Name" placeholder="">

                                        <span asp-validation-for="Name" class="text-danger"></span>

                                        <div class="invalid-feedback">

                                            Please enter valid name.

                                        </div>

                                    </div>

                                    <div class="form-group">

                                        <label asp-for="Email" class="control-label"></label>

                                        <input asp-for="Email" class="form-control" />

                                        <span asp-validation-for="Email" class="text-danger"></span>

                                    </div>

                                    <div class="form-group">

                                        <input type="submit" value="Submit" class="btn btn-primary btn-block" />

                                    </div>

                                </div>

                            </div>

                        </form>

                    </div>

                </div>      

            </div>

        </div>

    </div>

</div>

控制器：

public class HomeController : Controller

{

    private readonly Mvc3_1Context _context;

    public HomeController(Mvc3_1Context context)

    {

        _context = context;

    }

    public IActionResult Index()

    {

        var model = _context.Pupils.ToList();

        return View(model);

    }

    public IActionResult Add()

    {

        return PartialView("_PartialAdd");

    }

    [HttpPost]

    public async Task<IActionResult> Add([Bind("Name,Email")] Pupils pupils)

    {

        if (!ModelState.IsValid)

        {

            return Json(new { isValid = false });

        }

        _context.Add(pupils);

        await _context.SaveChangesAsync();

        return Json(new { isValid = true, url = "/Home/Index" });

    }

    public IActionResult Edit(int id)

    {

        var pupil = _context.Pupils.Find(id);

        return PartialView("_PartialEdit", pupil);

    }

    [HttpPost]

    public async Task<IActionResult> Edit(int id, Pupils pupils)

    {

        if (id != pupils.Id)

        {

            return NotFound();

        }

        if (!ModelState.IsValid)

        {

            return Json(new { isValid = false });

        }

        _context.Update(pupils);

        await _context.SaveChangesAsync();

        return Json(new { isValid = true, url = "/Home/Index" });

    }

}

结果：

https://i.stack.imgur.com/wAGqL.gif