html ASP Net Core MVC刷新局部视图，通过Jquery弹出模式进行添加/编辑

过去几天我一直在努力解决这个问题，我想知道是否有人能让我越过这条线。
我遇到的问题是，我想向数据库添加一个新值，然后更新局部视图，而不更新主视图，主视图只是一个下拉列表和按钮。
我所拥有的代码目前将创建新条目，但随后它将Index/List显示为自己的视图，而不仅仅是更新的局部视图。
下面是一个主视图，单击按钮后将根据下拉值呈现部分视图，然后将部分视图呈现到该主视图

@{
    ViewData["Title"] = "Manage DropDown Lists";
    //Layout = "~/Views/Shared/_Layout.cshtml";
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<h1>Manage Lists</h1>

<p>
    Select List:
    @Html.DropDownList("ddl", ViewData["selected"] as List<SelectListItem>)
    <button id="btn-ddl" data-url='@Url.Action("Index", "param")' class="js-load-partial; btn btn-primary btn-sm">Get List</button>
</p>
<hr />
<br />

<div id="detailsDiv">

</div>

@section Scripts {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="~/js/site.js"></script>
}

这是按钮单击的Jquery（btn-ddl）

//Render PartialView from Button click - input Id from DropDownList - Manage Lists
$(document).ready(function () {
    $("body").on("click", '#btn-ddl', function (evt) {
        var $detailDiv = $('#detailsDiv'),
            url = $(this).data('url');

        url = url.replace("param", $("#ddl").val());

        $.get(url, function (data) {
            $detailDiv.html(data);
        });
    });
});

这是呈现的部分视图之一。此部分视图是所选模型的索引。它还包含用于向列表添加新项的按钮，以及用于编辑列表中的项的编辑按钮。

@model IEnumerable<PoCStaffDatabase.Models.AccessLevel>

<div>
    <h1>Access Levels</h1>
    <br />
    <hr />
</div>

<div id="PlaceHolderHere">
    <!-- Modal Popup Placeholder -->
</div>

<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#addAccessLevel" data-url="@Url.Action("Create")" id="showModalPopup">
    Create
</button>

<br /><br />

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.AccessLevelName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Live)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.AccessLevelName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Live)
                </td>
                <td>
                    <a asp-action="Edit" asp-route-id="@item.AccessLevelId">Edit</a> 
                </td>
            </tr>
        }
    </tbody>
</table>

单击"创建"按钮（id ="showModalPopup"）可创建新项目，这是通过显示为模式弹出窗口的部分视图（如下所示）完成的。

@model PoCStaffDatabase.Models.AccessLevel

<div class="modal fade" id="addAccessLevel" tabindex="-1" role="dialog" aria-labelledby="addAccessLevelLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addAccessLevelLabel">Add Access Level</h5>
                <button type="button" class="close" data-dismiss="modal" id="btnClose" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <form asp-action="Create">
                    <div class="form-group">
                        <label asp-for="AccessLevelName" class="control-label"></label>
                        <input asp-for="AccessLevelName" class="form-control" />
                        <span asp-validation-for="AccessLevelName" class="text-danger"></span>
                    </div>
                    <div class="form-group form-check">
                        <label class="form-check-label">
                            <input class="form-check-input" asp-for="Live" /> @Html.DisplayNameFor(model => model.Live)
                        </label>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal" id="btnClose" >Cancel</button>
                        
                        <button type="submit" class="btn btn-primary" data-save="modal" data-url='@Url.Action("Index", "AccessLevels")'id="btnSave">Create New</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

这是从'Create New'按钮（id ="btnSave"）运行的Jquery代码。我在最后一次尝试更新局部视图时留下了它，但它被注解掉了。
同样，即使代码中有该部分，局部视图也会呈现为完整视图（没有格式设置，因为_Layout视图也没有显示）。

$(document).ready(function () {
    $('body').on("click", '#showModalPopup', function (event) {

        var PlaceHolderElement = $('#PlaceHolderHere'),
            url = $(this).data('url');

        PlaceHolderElement.empty();

        $.get(url, function (data) {
            PlaceHolderElement.html(data);
            PlaceHolderElement.find('.modal').modal('show');
        });
    });

    PlaceHolderElement.on("click", '#btnSave', function (event) {
        form = $(this).parents('.modal').find('form'),
            actionUrl = form.attr('action'),
            sendData = form.serialize();

        $.post(actionUrl, sendData).done(function (data) {
            PlaceHolderElement.find('.modal').modal('hide');
        });

       // var $detailDiv = ('#detailsDiv'),
       //         url = $(this).data('url');
       //
       //     $.get(url, function (data) {
       //         $detailDiv.html(data);
       //     });

    });
});

最后，这是"创建"和"索引"操作的控制器。

namespace PoCStaffDatabase.Controllers
{
    public class AccessLevelsController : Controller
    {
        private readonly AppDbContext _context;

        public AccessLevelsController(AppDbContext context)
        {
            _context = context;
        }

        // GET: AccessLevels
        public async Task<IActionResult> Index()
        {
            var accesslevel = await _context.AccessLevel.ToListAsync();

            return PartialView("_partialIndex", accesslevel);
            //return View(await _context.AccessLevel.ToListAsync());
        }

        // GET: AccessLevels/Details/5
        public async Task<IActionResult> Details(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var accessLevel = await _context.AccessLevel
                .FirstOrDefaultAsync(m => m.AccessLevelId == id);
            if (accessLevel == null)
            {
                return NotFound();
            }

            return View(accessLevel);
        }

        // GET: AccessLevels/Create
        public IActionResult Create()
        {
            AccessLevel accesslevel = new AccessLevel();

            return PartialView("_partialCreate", accesslevel);
        }

        // POST: AccessLevels/Create
        // To protect from overposting attacks, enable the specific properties you want to bind to, for 
        // more details, see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create([Bind("AccessLevelId,AccessLevelName,Live")] AccessLevel accessLevel)
        {
            if (ModelState.IsValid)
            {
                _context.Add(accessLevel);
                await _context.SaveChangesAsync();
                //return NoContent();
                return RedirectToAction("Index");

                //return PartialView("_partialIndex", await _context.AccessLevel.ToListAsync() );
            }
            return View(accessLevel);
        }

任何人能给予的任何帮助都将不胜感激。

谢谢-谢谢

您需要更改js如下：

$(document).ready(function () {
    $('body').on("click", '#showModalPopup', function (event) {
        var PlaceHolderElement = $('#PlaceHolderHere'),
            url = $(this).data('url');

        PlaceHolderElement.empty();

        $.get(url, function (data) {
            PlaceHolderElement.html(data);
            var data = PlaceHolderElement.find('.modal');
            //modify here......
            $(PlaceHolderElement.find('.modal')).modal('show')
        });
        //});     remove here

        PlaceHolderElement.on("click", '#btnSave', function (event) {
            form = $(this).parents('.modal').find('form'),
                actionUrl = form.attr('action'),
                sendData = form.serialize();

            $.post(actionUrl, sendData).done(function (data) {
                //modify here......
                $(PlaceHolderElement.find('.modal')).modal('hide');
                $('#detailsDiv').html(data);  //add this...
            });
        });
    });
}) //add this...

在此处修改您的_partialCreate：

@model AccessLevel
       @*remove fade*@
<div class="modal" id="addAccessLevel" tabindex="-1" role="dialog" aria-labelledby="addAccessLevelLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addAccessLevelLabel">Add Access Level</h5>
                <button type="button" class="close" data-dismiss="modal" id="btnClose" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <form asp-action="Create">
                    <div class="form-group">
                        <label asp-for="AccessLevelName" class="control-label"></label>
                        <input asp-for="AccessLevelName" class="form-control" />
                        <span asp-validation-for="AccessLevelName" class="text-danger"></span>
                    </div>
                    <div class="form-group form-check">
                        <label class="form-check-label">
                            <input class="form-check-input" asp-for="Live" /> @Html.DisplayNameFor(model => model.Live)
                        </label>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal" id="btnClose">Cancel</button>
                          @*change here.........*@
                        <button type="button" class="btn btn-primary" data-save="modal" data-url='@Url.Action("Index", "AccessLevels")' id="btnSave">Create New</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

后端程式码：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("AccessLevelId,AccessLevelName,Live")] AccessLevel accessLevel)
{   
    if (ModelState.IsValid)
    {
        _context.Add(accessLevel);
        await _context.SaveChangesAsync();
        return PartialView("_partialIndex", await _context.AccessLevel.ToListAsync() ); 
    } 
    throw new Exception("xxxxx");  //ajax cannot judge the modelstate error
}

html ASP Net Core MVC刷新局部视图，通过Jquery弹出模式进行添加/编辑

1条答案

相关问题

热门标签

最新问答