目標：我正在嘗試制作一個頁面，讓用戶輸入一個地址，然后單擊一個按鈕，該按鈕將使用 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>
uj5u.com熱心網友回復：
我最好的猜測是jQuery代碼沒有填充被發送回controller. 如果是這種情況，您可以嘗試將包含更改div為 a 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');
})
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/315384.html
標籤：javascript C＃ 查询 asp.net-core-mvc