ASP.NET 核心 MVC 弹出模式，数据来自视图中的模型

Question

目标：我正在尝试制作一个让用户输入地址的页面，然后单击一个按钮，该按钮将通过 FedEx API 对其进行验证。使用新的验证地址（现在使用 FedEx 的额外邮政编码），我想让用户使用模式弹出窗口验证新地址是否正确，而无需重新加载页面。

问题：我已经完成了大部分工作，但在将数据从视图获取到控制器时遇到了困难。它传递一个空模型而不是用户在字段中输入的内容。

这是用户要填写的表格：

这是控制器：

视图如下：

@model AirmotionEcommerceWebsite.Models.Home.DeliveryAddressModel

@{
    ViewBag.Title = "Shipping Address";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<br />
<div class="container">
    @Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Shipping Address</h4>
    <hr />

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    <div id="PlaceHolderHere"></div>

    <div class="form-group">
        <h5>Name</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.strName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <h5>Attention To</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strAttnTo, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.strAttnTo, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <h5>Street</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strStreet1, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.strStreet1, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <h5>Street 2</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strStreet2, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.strStreet2, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <h5>City</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strCity, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.strCity, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @{
            IEnumerable<SelectListItem> dataItems = ViewBag.states;
        }
        <div class="form-group">
            <h5>State</h5>
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.State.IntStateId, dataItems, "-- Select --", new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.State.IntStateId, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="form-group">
        <h5>Zip</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strZip, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.strZip, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button type="button" class="btn btn-primary" data-ajax-method="get" data-toggle="ajax-modal" data-target="#ValidateAddress" 
                    data-url="@Url.Action("GetValidationOnAddress", new { model = Model })">Verify Address</button>
        </div>
    </div>

</div>
</div>

<script>



    $(function () {
        var PlaceHolderElement = $('#PlaceHolderHere');
        $('button[data-toggle="ajax-modal"]').click(function (event) {
            var url = $(this).data('url');
            var $j = jQuery.noConflict();
            $j.get(url).done(function (data) {
                PlaceHolderElement.html(data);
                PlaceHolderElement.find('.modal').modal('show');
            })
        })

        //PlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
        //  var form = $(this).parents('.modal').find('form');
        //  var actionUrl = form.attr('action');
        //  var sendData = form.serialize();
        //})
    })

</script>

Answer 1

我最好的猜测是 jQuery 代码没有填充发送回 controller 的模型。如果是这种情况，您可以尝试将包含的 div 更改为 form:

<form class="form-horizontal">
    <h4>Shipping Address</h4>
    <hr />

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    <div id="PlaceHolderHere"></div>

    <div class="form-group">
        <h5>Name</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.strName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <h5>Attention To</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strAttnTo, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.strAttnTo, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <h5>Street</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strStreet1, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.strStreet1, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <h5>Street 2</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strStreet2, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.strStreet2, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <h5>City</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strCity, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.strCity, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @{
            IEnumerable<SelectListItem> dataItems = ViewBag.states;
        }
        <div class="form-group">
            <h5>State</h5>
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.State.IntStateId, dataItems, "-- Select --", new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.State.IntStateId, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="form-group">
        <h5>Zip</h5>
        <div class="col-md-10">
            @Html.EditorFor(model => model.strZip, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.strZip, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button type="button" class="btn btn-primary" data-ajax-method="get" data-toggle="ajax-modal" data-target="#ValidateAddress" 
                    data-url="@Url.Action("GetValidationOnAddress", new { model = Model })">Verify Address</button>
        </div>
    </div>

</form>

然后修改您的 jQuery 代码以序列化表单中的所有字段：

    $('button[data-toggle="ajax-modal"]').click(function (event) {
        event.preventDefault();
        var url = $(this).data('url');
        // get the form containing the submit button
        var form = $(this).closest('form')
        var $j = jQuery.noConflict();
        // serialize all the fields in the form
        var model = form.serialize();
        // the the request to the url along with the form (model) data
        $j.get(url, model).done(function (data) {
            PlaceHolderElement.html(data);
            PlaceHolderElement.find('.modal').modal('show');
        })
    })

ASP.NET 核心 MVC 弹出模式，数据来自视图中的模型

ASP.NET core MVC Popup Modal with data from model from view

javascript

c#

jquery

asp.net-core-mvc