我有我想要一些Ajax添加到酷睿2 MVC的Web应用程序。
我有它加载一个标准的Web形式的创建视图。是什么使这一点什么，我已经学会了不同的/迄今所做的是，我想一些半动态内容添加到页面。
这个页面的视图模型是一串简单的特性，但它的一部分也是一个嵌套的集合。
我想通过一个模式动态地添加值到嵌套的集合，然后重新加载局部视图，以反映什么我都不会导致一次页面重载说 - 我只是想重新加载局部视图，并关闭模态。
我可以看到JS被actioning请求并烧制该呼叫到控制器并得到一个200响应但并不关闭所述模态或重装用来自模态数据的局部视图。
也有一些是我绝对不能及彼。任何人都可以提出建议？
视图模型
public class RaceViewModel
{
public Race RaceData { get; set; }
public ObservableCollection<CurrencyDetails> Currencies { get; set; }
public CurrencyDetails BaseCurrency { get; set; }
public CurrencyDetails RaceCurrency { get; set; }
public ObservableCollection<RaceOptions> RaceOptionData { get; set; }
[DisplayFormat(DataFormatString = "{0:0.00")]
public decimal BaseFee { get; set; }
}
主视图（不相关的部分省略）
@using TechsportiseOnline.Helpers
@model TechsportiseOnline.ViewModels.RaceViewModel
@{
ViewData["Title"] = "Create";
}
<h2>Create a new race</h2>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="optionsmodal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h2 class="modal-title">New Race Option</h2>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label value="Name" class="control-label">Option Name</label>
<br /><small class="text-muted">The name of this Race Option</small>
<input name="Name" placeholder="Your 10k" type="text" class="form-control" aria-label="Name">
@*<span asp-validation-for="RaceData.Name" class="text-danger"></span>*@
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label name="RaceDistance" value="Race Distance" class="control-label">Distance</label>
<br /><small class="text-muted">Choose a race distance, used for Age Grading </small>
<select name="RaceDistance" class="form-control">
<option value="" selected>--select--</option>
<option value="M1">1 mile</option>
<option value="KM5">5 km</option>
<option value="KM6">6 km</option>
<option value="M4">4 miles</option>
<option value="KM8">8 km</option>
<option value="M5">5 miles</option>
<option value="KM10">10 km</option>
<option value="KM12">12 km</option>
<option value="KM15">15 km</option>
<option value="M10">10 miles</option>
<option value="KM20">20 km</option>
<option value="Half">Half Marathon</option>
<option value="KM25">25 km</option>
<option value="KM30">30 km</option>
<option value="Marathon">Marathon</option>
<option value="KM50">50 km</option>
<option value="M50">50 miles</option>
<option value="KM100">100 km</option>
<option value="KM150">150 km</option>
<option value="M100">100 miles</option>
<option value="KM200">200 km</option>
<option value="Other">Other</option>
</select><br />
@*<span asp-validation-for="RaceData.RaceDistance" class="text-danger"></span>*@
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label name="MaxEntries" value="Maximum Entries" class="control-label">Maximum Entries</label>
<br /><small class="text-muted">The maximum capacity of the race</small>
<input name="MaxEntries" class="form-control" />
@*<span asp-validation-for="RaceData.MaxEntries" class="text-danger"></span>*@
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label name="Start Time" value="Start Time" class="control-label">Race Start Time</label>
<br /><small class="text-muted">Start time in HH:MM</small>
<input name="Start Time" value="19:00" asp-format="{0:hh:mm}" class="form-control" type="time" />
@*<span asp-validation-for="RaceData.RaceStartTime" class="text-danger"></span>*@
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label value="Entry Price" class="control-label">Entry Price</label>
<br /><small class="text-muted">The price of the normal race entry</small>
<input name="Entry Price" type="text" class="form-control" aria-label="Amount" placeholder="10.00" asp-format="{0:0.00}">
@*<span asp-validation-for="RaceData.EntryPrice" class="text-danger"></span>*@
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Affiliation Discount</label>
<br /><small class="text-muted">Value of discount for being an affiliated runner</small>
<input name="AffiliatedDiscountValue" type="text" class="form-control" aria-label="Amount" value="2.00" asp-format="{0:0.00}">
@*<span asp-validation-for="AffiliatedDiscountValue" class="text-danger"></span>*@
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="addoption" >Add</button>
</div>
</div>
</div>
</div>
<form asp-action="Create" enctype="multipart/form-data">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="panel panel-default">
<div class="panel-heading">Race Options</div>
<div class="panel-body">
<div id="container">
Create your different Race Options here, if you want to have more than one distance/race in the same event. You must have at least 1 Race Option.
<div id="dvRaceOptionsResults">
@{Html.RenderPartial("RaceOptions", Model);}
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Add Race Option</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</form>
<div>
<a asp-action="Index">Back to List</a>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">
$("#addoption").click(function(){
$.ajax({
url: '@Url.Action("GetRaceOptions", "Races")',
type: 'POST',
success: function(data) {
if (data) { // check if data is defined
$("#dvRaceOptionsResults").html(data);
}
}
});
});
</script>
}
部分景观
@model TechsportiseOnline.ViewModels.RaceViewModel
<table>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
@if (Model.RaceOptionData != null)
{
foreach (var option in Model.RaceOptionData)
{
<tr>
<td>@option.Name</td>
</tr>
}
}
</tbody>
</table>
控制器方法
[HttpPost]
public async Task<IActionResult> GetRaceOptions(RaceViewModel race)
{
var viewModel = race;
return PartialView("RaceOptions", viewModel);
}
您不data:参数调用AJAX。所以，你不发布数据到控制器。比控制器试图返回空视图模型的局部视图。如果您想保存新添加的选项，你需要做这样的事情。
[HttpPost]
public async Task<IActionResult> GetRaceOptions(RaceViewModel race)
{
//save options from RaceViewModel
//get old options + newly added options
var viewModel = old + newly added data
return PartialView("RaceOptions", viewModel);
}
你需要在阿贾克斯的成功部分关闭模式
success: function(data) {
if (data) { // check if data is defined
$("#dvRaceOptionsResults").html(data);
$('#modalId').modal('hide');
}
这是你的VideModel吧？
public class RaceViewModel
{
...
}
据我了解，你的AJAX请求得到路由到接收GetRaceOptions参数法RaceViewModel。不幸的是，你的AJAX POST请求不发送所需RaceViewModel对象。你必须将它传递的data body。
确保您的JS data object具有相同的属性名作为ViewModel所以模型绑定将正常工作。
例：
data: {BaseFee: 842350, property2: 'abc'}; //and so on
$.ajax({
url: '@Url.Action("GetRaceOptions", "Races")',
type: 'POST',
data: data,
dataType : 'html', //expect html back
success: function(data) {
if (data) { // check if data is defined
$("#dvRaceOptionsResults").html(data);
}
}