asp.net-core-mvc
How to solve Microsoft.AspNetCore.Mvc.Razor.RazorPage<TModel>.Model.get returned null
I have tried to use two select options state and localgovt select options which to select a state and populate local govt for that state in localgovt select option these types of codes working in my project using ASP.Net Core 3.1 but now migrated to .Net Core 7.0 and these types of codes did not work properly displaying error as shown below. Despite my sql tables did not contain a null column, am using json, Ajax for javascript and Installed Microsoft.AspNetCore.Mvc.NewtonsoftJson into the project.
System.NullReferenceException: 'Object reference not set to an instance of an object
Microsoft.AspNetCore.Mvc.Razor.RazorPage<TModel>.Model.get returned null.
Model Class
public class BiodataVM
{
public BiodataVM()
{
this.SteteCodes = new List<SelectListItem>();
this.LocalCodes = new List<SelectListItem>();
}
public List<SelectListItem> SteteCodes { get; set; }
public List<SelectListItem> LocalCodes { get; set; }
public int LId { get; set; }
public int SId { get; set; }
}
My View
<form asp-action="Create">
<select id="statecode" asp-for="SId" class="form-control">
<option value="">--Please select--</option>
@foreach (var item in ViewBag.Statelist)
{
<option value="@item.Value">@item.Text</option>
}
</select>
<select id="localcode" asp-for="LId" asp-items="Model.LocalCodes" class="form
control">
<option value="">--Please select--</option>
</select>
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("select").each(function () {
if ($(this).find("option").length <= 1) {
$(this).attr("disabled", "disabled");
}
});
$("select").change(function () {
var value = 0;
if ($(this).val() != "") {
value = $(this).val();
}
var id = $(this).attr("id");
$.ajax({
type: "POST",
url: "/Biodata/AjaxMethod",
data: { value: value, type: id },
success: function (response) {
switch (id) {
case "statecode":
DisableDropDown("#localcode");
PopulateDropDown("#localcode", response.LocalCodes);
break;
}
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
if ($("#statecode").val() != "" && $("#localcode").val() != "") {
var message = "StateCode: " + $("#statecode option:selected").text();
message += "\nLocalCode: " + $("#localcode option:selected").text();
alert(message);
}
});
function DisableDropDown(dropDownId) {
$(dropDownId).attr("disabled", "disabled");
$(dropDownId).empty().append('<option selected="selected" value="">--Please select--</option>');
}
function PopulateDropDown(dropDownId, list) {
if (list != null && list.length > 0) {
$(dropDownId).removeAttr("disabled");
$.each(list, function () {
$(dropDownId).append($("<option></option>").val(this['Value']).html(this['Text']));
});
}
}
</script>
ActionResult
BiodataVM model = new BiodataVM
{
SteteCodes = (from a in this._context.State
select new SelectListItem
{
Value = a.SId.ToString(),
Text = a.State
}).ToList(),
};
ViewBag.Statelist = model.SteteCodes;
JsonResult
public JsonResult AjaxMethod(string type, int value)
{
BiodataVM model = new BiodataVM();
switch (type)
{
case "statecode":
model.LocalCodes = (from z in this._context.LocalGovt
where z.SId == value
select new SelectListItem
{
Value = z.LId.ToString(),
Text = z.LocalGovt
}).ToList();
break;
}
return Json(model);
}
Solution
I create a demo to reproduce your code, Finally I modify it to make it become a work project, I will show it below, Hope it can help you solve this issue.
Firstly when I load this view, It shows:
System.NullReferenceException: 'Object reference not set to an instance of an object
Then I remove asp-items="Model.LocalCodes" from <select id="localcode" asp-for="LId" asp-items="Model.LocalCodes" class="form-control"> The view will not show this error but the second dropdown list can't show related options as the first dropdown changed, Here is the whole code.
Models
public class LocalGovt
{
public int Id { get; set; }
public string LocalGovtName { get; set; }
public int StateId { get; set; }
public State State { get; set; }
}
public class State
{
public int Id { get; set; }
public string StateName { get; set; }
}
Backend
[HttpGet]
public IActionResult Drop()
{
BiodataVM model = new BiodataVM
{
SteteCodes = (from a in this._dbcontext.state
select new SelectListItem
{
Value = a.Id.ToString(),
Text = a.StateName
}).ToList(),
};
ViewBag.Statelist = model.SteteCodes;
return View();
}
[HttpPost]
public JsonResult AjaxMethod(string type, int value)
{
BiodataVM model = new BiodataVM();
switch (type)
{
case "statecode":
model.LocalCodes = (from z in this._dbcontext.localgovt
where z.StateId == value
select new SelectListItem
{
Value = z.Id.ToString(),
Text = z.LocalGovtName
}).ToList();
break;
}
return Json(model);
}
Frontend
@model BiodataVM
<form asp-action="Create">
<select id="statecode" asp-for="SId" class="form-control">
<option value="">--Please select--</option>
@foreach (var item in ViewBag.Statelist)
{
<option value="@item.Value">@item.Text</option>
}
</select>
<select id="localcode" asp-for="LId" class="form-control">
<option value="">--Please select--</option>
</select>
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("select").each(function () {
if ($(this).find("option").length <= 1) {
$(this).attr("disabled", "disabled");
}
});
$("select").change(function () {
var value = 0;
if ($(this).val() != "") {
value = $(this).val();
}
var id = $(this).attr("id");
$.ajax({
type: "POST",
url: "/Home/AjaxMethod",
data: { value: value, type: id },
success: function (response) {
switch (id) {
case "statecode":
DisableDropDown("#localcode");
PopulateDropDown("#localcode", response.localCodes);
break;
}
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
if ($("#statecode").val() != "" && $("#localcode").val() != "") {
var message = "StateCode: " + $("#statecode option:selected").text();
message += "\nLocalCode: " + $("#localcode option:selected").text();
alert(message);
}
});
function DisableDropDown(dropDownId) {
$(dropDownId).attr("disabled", "disabled");
$(dropDownId).empty().append('<option selected="selected" value="">--Please select--</option>');
}
function PopulateDropDown(dropDownId, list) {
if (list != null && list.length > 0) {
$(dropDownId).removeAttr("disabled");
$.each(list, function () {
$(dropDownId).append($("<option></option>").val(this.value).html(this.text));
});
}
}
</script>
Gif Demo
