asp.net Core MVC来自JQuery和控制器的部分视图

Question

目标:我试图做一个页面，让用户输入一个地址，然后点击一个按钮，将与联邦快递API验证它。有了新的验证地址(现在有了联邦快递的额外邮政编码)，我想让用户使用模态弹出窗口验证新地址是否正确，而无需重新加载页面。

问题:我有一个问题，部分不显示，我不确定我做错了什么。

这是视图:

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

Answer 1

我检查了控制台，发现它无法找到我的部分视图。快速文件移动，它现在正在工作!感谢@viveknuna帮我注意到这一点!