Я создал сайт, на котором пользователи могут изменять различные типы данных с помощью нескольких компонентов представления. Когда я вызываю эти компоненты представления при начальной загрузке страницы, все работает нормально. Однако, когда я пытаюсь обновить компонент представления с помощью вызова ajax, любые списки в этих компонентах представления повторяют один элемент несколько раз, и мои функции jquery перестают работать.
Вот мой основной взгляд:
@model ContractModel
@using Portal.ViewComponents
@{
ViewData["Title"] = "Contract View";
}
...
<div id="ResultModel_Scope_Facplan">
@await Component.InvokeAsync("ContractPart", new { contractPartName = "Model_Scope_Facplan", projectName = Model.ProjectName })
</div>
Мой аякс:
@section Scripts {
<script>
$.ajaxSetup({ cache: false });
$(".PartialButton").click(function (event) {
event.preventDefault();
var ElementID = event.target.id.split("-");
var contractPart = ElementID[0];
var contractAction = ElementID[1];
var actionValue = ElementID[2];
console.log($("#Form" + contractPart + actionValue).serialize() + "&ProjectName=@(Model.ProjectName)&contractAction=" + contractAction);
console.log(ElementID);
$.ajax({
url: "@(Url.Action(""))/" + contractPart,
type: "POST",
data: $("#Form" + contractPart + actionValue).serialize()+"&ProjectName=@(Model.ProjectName)&contractAction=" + contractAction,
success: function (data) {
//Fill div with results
alert(data);
//debugger;
$("#Result" + contractPart).html(data);
},
error: failedSearch(contractPart)
});
});
function failedSearch(ElementID) {
// alert(ElementID + " failed!");
// $("#Result"+ElementID).html = "There was a problem in the search. Please try again later.";
}
</script>
}
Мой фактический вызов компонента представления довольно прост (просто отправляет нужные данные в нужное представление).
public IViewComponentResult Invoke(string contractPartName, string projectName)
{
return View(contractPartName, FindContractPart(contractPartName, projectName));
}
И шаблон компонента представления:
@model IEnumerable<Model_Scope_Facplan>
@if (@Model != null)
{
<div class="row">
Care Provider Payer
</div>
@for (int i = 0; i < Model.Count(); i++)
{
<form id="FormModel_Scope_Facplan@(i)" action="">
<div class="form-horizontal">
<div class="col-md-3">
<input [email protected](i).CareProviderID class="form-control" />
</div>
<div class="col-md-3">
<input [email protected](i).PayerID class="form-control" />
</div>
<span class="glyphicon glyphicon-minus DeleteItem PartialButton" style="color:blue;" id="Model_Scope_Facplan-Delete-@(i)"></span>
</div>
</form>
<br/>
}
<form id="FormModel_Scope_Facplan@(Model.Count())" action="">
<div class="form-horizontal">
<div class="col-md-3">
<input name=CareProviderID class="form-control" />
</div>
<div class="col-md-3">
<input name=PayerID class="form-control" />
</div>
<span class="glyphicon glyphicon-plus AddItem PartialButton" style="color:blue;" id="Model_Scope_Facplan-Create-@(Model.Count())"></span>
</div>
</form>
}
Компонент представления возвращает правильный шаблон представления, и при отладке я вижу, что ViewComponentResult.ViewData.Model включает в себя соответствующие записи в списке. Однако страница, обновленная после вызова ajax, снова и снова включает только один элемент. Что я делаю неправильно?