简体   繁体   English

来自 JQuery 和控制器的 ASPNET Core MVC 部分视图

[英]ASPNET Core MVC Partial view from JQuery and controller

Goal: I'm trying to make a page that has the user enter in an address, then click a button that will verify it with a FedEx API.目标:我正在尝试制作一个页面,让用户输入一个地址,然后单击一个按钮,该按钮将使用 FedEx API 进行验证。 With the new verified address (now with the extra postal code from FedEx), I want to have the user verify that the new address is correct using a modal popup all without reloading the page.使用新的验证地址(现在使用 FedEx 的额外邮政编码),我想让用户使用模式弹出窗口验证新地址是否正确,而无需重新加载页面。

Issue: I'm having a problem where the partial isn't showing and I'm not sure what I'm doing wrong.问题:我遇到了部分未显示的问题,我不确定我做错了什么。

Here's the View:这是视图:

@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>

Here's the Controller:这是控制器:

[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);
        }

And lastly here's the Partial View:最后是部分视图:

@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>

I checked the console and found it was not able to find my partial view.我检查了控制台,发现它无法找到我的局部视图。 Quick file move and it's working now!快速移动文件,现在可以使用了! Thanks to @viveknuna for helping me notice this!感谢@viveknuna 帮助我注意到这一点!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM