英文:
Option value not getting passed (.NET + Ajax)
问题
你的代码部分看起来没问题，但错误信息 "Object reference not set to an instance of an object" 表示在提交表单时，可能出现了一个空引用异常。这通常是因为在控制器中的 FetchGemeenteObvPostcode 方法没有正确地设置模型数据，导致在 AdresWijzigen 方法中找不到预期的数据。
你可以确保以下事项：
-
确保
FetchGemeenteObvPostcode方法返回的 JSON 数据中包含了正确的数据，尤其是NieuwPlaatsNaam的值。 -
确保
AdresWijzigenViewModel模型中有一个名为NieuwPlaatsNaam的属性，且该属性有正确的设置方法，以便接收从前端传递的数据。 -
在提交表单后，在
AdresWijzigen方法中检查viewModel对象的属性是否都有正确的值。你可以使用调试器来跟踪数据流，查看哪个属性没有被正确设置。
如果你仍然遇到问题，可以提供更多关于 AdresWijzigenViewModel 和 FetchGemeenteObvPostcode 方法的代码，以便更具体地帮助你解决问题。
英文:
I have a dropdown where I use ajax to fetch the select options.
<form asp-action="AdresWijzigen">
<input asp-for="KlantId" hidden />
<input asp-for="AdresType" hidden />
<input asp-for="OudStraat" hidden />
<input asp-for="OudHuisNummer" hidden />
<input asp-for="OudBus" hidden />
<input asp-for="OudPlaatsId" hidden />
<input asp-for="OudPlaatsNaam" hidden />
<div>
<label asp-for="NieuwStraat"></label>
<span asp-validation-for="NieuwStraat" class="text-danger"></span>
<input asp-for="NieuwStraat" />
</div>
<div>
<label asp-for="NieuwHuisNummer"></label>
<span asp-validation-for="NieuwHuisNummer" class="text-danger"></span>
<input asp-for="NieuwHuisNummer" />
</div>
<div>
<label asp-for="NieuwBus"></label>
<input asp-for="NieuwBus" />
</div>
<div>
<label>Postcode</label>
<input type="text" id="postcodeInput" name="postcodeInput" placeholder="Geef een postcode in" />
<input type="button" id="zoekGemeente" name="zoekGemeente" value="🔍" />
<p id="errorPostcode" class="text-danger" style="display:none"></p>
<div id="gemeenteSelect"></div>
</div>
<div>
<input type="submit" value="Adres wijzigen" class="btn btn-primary" />
</div>
</form>
<script>
$("#zoekGemeente").click(function () {
var url = "@Url.Action("FetchGemeenteObvPostcode", "Klant")";
var data = $("#postcodeInput").val();
var $postcodeControl = /^\d{4}$/;
if (data.match($postcodeControl)) {
$("#errorPostcode").css('display', 'none');
$.ajax({
type: "POST",
url: url,
dataType: "JSON",
data: { postcode: $("#postcodeInput").val() },
success: function (data) {
if (data.length < 1) {
$("#errorPostcode").css('display', 'inline-block');
$("#errorPostcode").text("Geen gemeente gevonden voor postcode " + $("#postcodeInput").val());
$("#gemeenteSelect").empty();
} else {
var g = '<select asp-for="NieuwPlaatsId">';
for (var i = 0; i < data.length; i++) {
g += '<option value="' + data[i].plaatsId + '">' + data[i].plaatsNaam + '</option>';
}
g += '</select>';
$("#gemeenteSelect").html(g);
}
}
})
} else {
$("#errorPostcode").css('display', 'inline-block');
$("#errorPostcode").text("Geldige postcode moet uit 4 cijfers bestaan");
$("#gemeenteSelect").empty();
}
})
</script>
[HttpPost]
public JsonResult FetchGemeenteObvPostcode(string postcode)
{
var gemeentes = klantenRepository.GetPlaatsenByPostcodes(postcode);
return Json(gemeentes);
}
//Valideer viewModel, als valid redirect naar WijzigenAdresBevestigen()
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult AdresWijzigen(AdresWijzigenViewModel viewModel)
{
if (ModelState.IsValid)
{
return RedirectToAction(nameof(WijzigingAdresBevestigen),viewModel);
}
else
{
List<Plaats> plaatsen = new List<Plaats>();
plaatsen = _context.Plaatsen.ToList();
ViewData["NieuwAdres"] = plaatsen;
return View(viewModel);
}
}
// Redirect to page that requests confirmation
public async Task<IActionResult> WijzigingAdresBevestigen(AdresWijzigenViewModel viewModel)
{
var nieuwPlaats = await _context.Plaatsen.FindAsync(viewModel.NieuwPlaatsId);
Console.WriteLine(nieuwPlaats);
ViewData["NieuwPlaatsNaam"] = nieuwPlaats.PlaatsNaam;
return View(viewModel);
}
The fetch works fine, and the html select option value gets filled with the correct id's. However, when I submit the form, the option value that is filled in using ajax does not get filled into the model that is passed to the controller.
ViewData["NieuwPlaatsNaam"] = nieuwPlaats.PlaatsNaam;
^ this is the line that returns a "Object reference not set to an instance of an object" error on submit
Am I missing something?
答案1
得分: 2
解决方法是直接在HTML中添加<select asp-for=...>标记，因为似乎在使用JavaScript添加时asp-for无法正常工作（正如@PeterB在评论中指出的）。
<div>
<label>邮政编码</label>
<input type="text" id="postcodeInput" name="postcodeInput" placeholder="输入邮政编码" />
<input type="button" id="zoekGemeente" name="zoekGemeente" value="🔍" />
<p id="errorPostcode" class="text-danger" style="display:none"></p>
<select id="gemeenteSelect" asp-for="NieuwPlaatsId" style="display:none"></select>
</div>
....
if (data.length < 1) {
$("#errorPostcode").css('display', 'inline-block');
$("#errorPostcode").text("未找到与邮政编码 " + $("#postcodeInput").val() + " 相关的城市");
$("#gemeenteSelect").css('display', 'none');
} else {
var g = '';
for (var i = 0; i < data.length; i++) {
g += '<option value="' + data[i].plaatsId + '">' + data[i].plaatsNaam + '</option>';
}
$("#gemeenteSelect").css('display', 'inline-block');
$("#gemeenteSelect").append(g);
}
....
英文:
Solved by adding the <select asp-for=...> tag in the HTML directly, as it seems that the asp-for doesn't work when added using Javascript (as pointed out by @PeterB in the comments).
<div>
<label>Postcode</label>
<input type="text" id="postcodeInput" name="postcodeInput" placeholder="Geef een postcode in" />
<input type="button" id="zoekGemeente" name="zoekGemeente" value="🔍" />
<p id="errorPostcode" class="text-danger" style="display:none"></p>
**<select id="gemeenteSelect" asp-for="NieuwPlaatsId" style="display:none"></select>**
</div>
....
if (data.length < 1) {
$("#errorPostcode").css('display', 'inline-block');
$("#errorPostcode").text("Geen gemeente gevonden voor postcode " + $("#postcodeInput").val());
$("#gemeenteSelect").css('display', 'none');
} else {
var g = '';
for (var i = 0; i < data.length; i++) {
g += '<option value="' + data[i].plaatsId + '">' + data[i].plaatsNaam + '</option>';
}
$("#gemeenteSelect").css('display', 'inline-block');
$("#gemeenteSelect").append(g);
}
....
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论