来自 JQuery 和控制器的 ASPNET Core MVC 部分视图
Posted
技术标签:
【中文标题】来自 JQuery 和控制器的 ASPNET Core MVC 部分视图【英文标题】：ASPNET Core MVC Partial view from JQuery and controller 【发布时间】：2021-12-02 07:28:54 【问题描述】：目标：我正在尝试创建一个页面，让用户输入地址，然后单击一个按钮，该按钮将使用 FedEx API 进行验证。使用新的验证地址（现在使用 FedEx 的额外邮政编码），我想让用户使用模式弹出窗口验证新地址是否正确，而无需重新加载页面。
问题：我遇到了部分未显示的问题，我不确定自己做错了什么。
这是视图：
@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">×</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>
【问题讨论】：
您在浏览器控制台中看到任何错误吗？ ValidateAddress 是局部视图的名称吗？可能找不到。尝试添加 ~ 或扩展名 (cshtml/html)。 @viveknuna 我检查了控制台，它说找不到。所以我移动了它，现在它正在工作......谢谢！ @ScottUphus 很棒 【参考方案1】：我检查了控制台，发现它无法找到我的局部视图。快速文件移动，它现在可以工作了！感谢@viveknuna 帮助我注意到这一点！
【讨论】：
以上是关于来自 JQuery 和控制器的 ASPNET Core MVC 部分视图的主要内容，如果未能解决你的问题，请参考以下文章
MVC4 AspNet MVC下的Ajax / 使用JQuery做相关的Ajax请求
css 来自http://www.paulund.co.uk/how-to-create-an-animated-scroll-to-top-with-jquery