问来自JQuery和控制器的ASP.NET Core MVC局部视图

EN

@model AirmotionEcommerceWebsite.Models.Home.DeliveryAddressModel

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

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

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

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

        <partial id="ValidateAddress"></partial>

        <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>
</div>


<script>


    $(function () {
        var PlaceHolderElement = $('#ValidateAddress');
        $('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')
            // serialize all the fields in the form
            var model = form.serialize();
            // the the request to the url along with the form (model) data
            $.get(url, model).done(function (data) {
                PlaceHolderElement.html(data);
                PlaceHolderElement.find('.modal').modal('show');
                $('#ValidateAddress').modal('show');
            })
        })
    })

</script>

[HttpGet]
        public IActionResult GetValidationOnAddress(DeliveryAddressModel model)
        {
            FedexAPI fedexAPI = new FedexAPI();
            List<string> listOfStreets = new List<string>();
            listOfStreets.Add(model.strStreet1);
            listOfStreets.Add(model.strStreet2);
            var newAddress = fedexAPI.ValidateAddress(listOfStreets, model.strCity, model.State.StrStateCode, model.strZip, "US");

            if (newAddress.customerMessages.Contains("INTERPOLATED.STREET.ADDRESS"))
            {
                // Address is not valid
                model.ErrorMessage = "The address entered could not be found. Please double check your address. If issues perssist, please contact our office _________";
            }
            else
            {
                model.strStreet1 = newAddress.streetLinesToken[0];
                if (newAddress.streetLinesToken.Count > 1)
                    model.strStreet2 = newAddress.streetLinesToken[1];
                model.strCity = newAddress.city;
                model.strZip = newAddress.postalCode;
            }

            return PartialView("_AddressValidationPartial", model);
        }

@model AirmotionEcommerceWebsite.Models.Home.DeliveryAddressModel


<div class="modal fade" id="ValidateAddress">
    <div class="modal-dialog">
        <div class="modal-content">
            
            <div class="modal-header">
                <h4 class="modal-title" id="ValidateAddressLabel">Validate Address</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <form action="Create">
                    <div class="form-group">
                        @if (Model.ErrorMessage == null)
                        {
                            <h5>@Model.strName</h5>
                            @if (Model.strAttnTo != null)
                            {<h5>@Model.strAttnTo</h5>}
                            <h5>@Model.strStreet1</h5>
                            @if (Model.strStreet2 != null)
                            {<h5>@Model.strStreet2</h5>}
                            <h5>@Model.strCity</h5>
                            <h5>@Model.State.StrStateCode</h5>
                            <h5>@Model.strZip</h5>

                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary">Accept Changes</button>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Edit</button>
                            </div>
                        }
                        else
                        {
                            <h4>@Model.ErrorMessage</h4>
                        }
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-save="modal">Save Changes</button>
            </div>

        </div>
    </div>
</div>