模態內的Asp驗證

我正在為 CRUD 操作創建模態彈出視窗。我已經為創建和編輯創建了作業模式。我的問題是現在我無法使用我需要的服務器端驗證。當 Edit 未通過驗證測驗時，它理所當然地拒絕請求，但以非模態形式重定向回 Edit 視圖。請參閱下文。

模態：

無效輸入后：

我相信它會從 URL 進入控制器后期編輯和渲染。這很好，因為它可以正確驗證 pin 為空，但是這需要在 Modal Edit 1234 彈出視窗中呈現。將包括模型、控制器、索引視圖、編輯視圖和 js 以幫助解決問題。感謝您的幫助。

模型：

    public class Airmen
{

    [Key]
    [Required]
    public string MobileID { get; set; }
    [Required]
    public string Pin { get; set; }


}
public class SuperModel
{
    public Airmen airmen { get; set; }
    public IEnumerable<Airmen> airmens { get; set; }
}

控制器：

public async Task<IActionResult> Index(SuperModel arm)
{

    arm.airmens = await _context.Airmen.ToListAsync();
    return View(arm);
}
    [HttpGet]
    public async Task<IActionResult> Edit(string id)
    {
        SuperModel airmen = new SuperModel();
        airmen.airmen = await _context.Airmen.FindAsync(id);
        return PartialView(airmen);
    }


    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Edit(string id, [Bind("MobileID,Pin")] Airmen airmen)
    {
        SuperModel amn = new SuperModel();
        
        if (id != airmen.MobileID)
        {
            return NotFound();
        }

        if (ModelState.IsValid)
        {
            try
            {
                _context.Update(airmen);
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!AirmenExists(airmen.MobileID))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }
            return RedirectToAction(nameof(Index));
        }
        amn.airmen = airmen;
        return PartialView(amn);
    }

索引視圖：

    @model ALRSweb4.Models.SuperModel

@{ViewData["Title"] = "Index";}
<h1>Index</h1>
<table class="table">
    <thead>
        <tr>
            <th>
                Mobile ID
            </th>
            <th>
                Pin
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.airmens)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.MobileID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Pin)
                </td>

                <td>
                    <button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#Edit" data-url="@Url.Action(item.MobileID,"Airmen/Edit")">
                        Edit
                    </button>
                    <a asp-action="Details" asp-route-id="@item.MobileID">Details</a> |
                    <a asp-action="Delete" asp-route-id="@item.MobileID">Delete</a>
                </td>
            </tr>
        }

    </tbody>
</table>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#CreateModal">
    Create
</button>

<div class="modal fade" id="CreateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Create</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @Html.Partial("Create")
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>
<div id="EditPlaceHolder">
</div>

編輯視圖：

@model ALRSweb4.Models.SuperModel

@{
    ViewData["Title"] = "Edit";
}

<div class="modal fade" id="Edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit 12343</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-4">
                        <form asp-action="Edit">
                            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                            <input asp-for="airmen.MobileID" />
                            <div class="form-group">
                                <label asp-for="airmen.Pin" class="control-label"></label>
                                <input asp-for="airmen.Pin" class="form-control" />
                                <span asp-validation-for="airmen.Pin" class="text-danger"></span>
                            </div>
                            <div class="form-group">
                                <input type="submit" value="Save" class="btn btn-primary" />

                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>


@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

JS：

    // t2
$(function () {
    var CreatePlaceHolderElement = $('#EditPlaceHolder');
    $('button[data-toggle="ajax-modal"]').click(function (event) {
        var url = $(this).data('url');
        var decodedUrl = decodeURIComponent(url);
        $.get(decodedUrl).done(function (data) {
            CreatePlaceHolderElement.html(data);
            CreatePlaceHolderElement.find('.modal').modal('show');
        })
    })

    CreatePlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
        var form = $(this).parents('.modal').find('form');
        var actionUrl = form.attr('action');
        var sendData = form.serialize();
        $.post(actionUrl, sendData).done(function (data) {
            CreatePlaceHolderElement.find('.modal').modal('hide');
            location.reload(true);
        })
    })

})
// end of t2
// start of function for create modal
$(function () {
    var CreatePlaceHolderElement = $('#CreatePlaceHolder');
    $('button[data-toggle="ajax-modal"]').click(function(event){
        var url = $(this).data('url');
        $.get(url).done(function (data) {
            CreatePlaceHolderElement.html(data);
            CreatePlaceHolderElement.find('.modal').modal('show');
        })
    })

    CreatePlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
        var form = $(this).parents('.modal').find('form');
        var actionUrl = form.attr('action');
        var sendData = form.serialize();
        $.post(actionUrl, sendData).done(function (data) {
            CreatePlaceHolderElement.find('.modal').modal('hide');
            location.reload(true);
        })
    })

})
// end of function for create modal

uj5u.com熱心網友回復：

Html.RenderPartialAsync無法通過 ajax 回呼成功渲染 js。所以最快的方法是在編輯視圖中添加js，如下所示，它會阻止表單提交：

<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

下面的ajax函式沒用，去掉下面的代碼就可以使用默認表單提交了。洗掉它的原因首先是因為您的代碼沒有任何帶有data-save="modal". 然后您<input type="submit" />將默認提交表單資料而不使用ajax。

CreatePlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
    var form = $(this).parents('.modal').find('form');
    var actionUrl = form.attr('action');
    var sendData = form.serialize();
    $.post(actionUrl, sendData).done(function (data) {
        CreatePlaceHolderElement.find('.modal').modal('hide');
        location.reload(true);
    })
})

標籤：javascript 查询 asp.net-mvc asp.net核心

上一篇：在需要檔案物件的c#中呼叫RESTAPI

下一篇：ASP.NETJQuery，禁用表單提交上的按鈕不呼叫httpPost操作