Displaying the appropriate fields for the selected unit in the data record form in ASP.NET Core MVC application - asp.net-core-mvc

Question

Scenario: there are units to request a job, and the fields to be filled in the job request registration form differ according to these units. What method should be followed to realize this scenario?
I only have one registration form. Fields in the registration form
Unit to be requested,....etc Among the units to be requested by the user, for example Technical Services, Biomedical... etc. units can be selected.If the user chooses technical service in the registration form, they should see different fields to fill in. If he chooses biomedical, they should see different fields.
registration form design,
registration form cshtml
Correction in the Question
We have an application where employees in an enterprise can report problems such as electrical failure, wall painting, computer hardware failure to the technical units and these problems can be monitored by the technical units. The fields to be filled while forwarding the question to the relevant department differ according to the department to which the question will be forwarded.
For example: When a problem is reported to the computer technical service, the requested information is different.
If a problem is to be reported to the biomedical unit, different information must be entered.
For this reason, different forms were asked to be designed and the user was asked to fill in the relevant information from these forms after choosing the support unit regarding the problem to be reported.
I may have explained it wrong to Rena while explaining my question. But as a result, rena actually posted some code so I can call other views from a single view. I'm trying to implement what Rena did.

Answer 1

Here is a simple demo:
Model:
public class job
{
public int Id { get; set; }
public string JobName { get; set; }
}
public class RegisterForm
{
public string JobName { get; set; }
public int Age { get; set; }
public string Name { get; set; }
}
View:
Index.cshtml(located in /Views/Home/Index.cshtml):
model RegisterForm
<form>
<div class="form-group">
<label asp-for="JobName" class="control-label"></label>
<select asp-for="JobName" asp-items="ViewBag.Jobs" class="form-control">
<option>Choose A Job</option>
</select>
<span asp-validation-for="JobName" class="text-danger"></span>
</div>
<div id="result"></div>
</form>
#section Scripts
{
<script>
$('#JobName').on('change', function () {
$.ajax({
url: '#Url.Action("ReturnPartial", "Home")',
type: 'GET',
data: { JobName: $("#JobName").val() },
success: function (res) {
$("#result").html(res); //add this...
},
error: function () {
}
});
});
</script>
}
PartialView:
Biomedical.cshtml(located in /Views/Home/Biomedical.cshtml):
#model RegisterForm
<h1>Biomedical RegisterForm</h1>
<div class="form-group">
<label asp-for="Age" class="control-label"></label>
<input asp-for="Age" class="form-control" />
<span asp-validation-for="Age" class="text-danger"></span>
</div>
Technical.cshtml(located in /Views/Home/Technical.cshtml):
#model RegisterForm
<h1>Technical RegisterForm</h1>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
Controller:
public class HomeController : Controller
{
public IActionResult Index()
{
var jobs = new List<job>()
{
new job(){Id=1,JobName="Technical"},
new job(){Id=2,JobName="Biomedical"}
};
ViewBag.Jobs = new SelectList(jobs, "JobName", "JobName");
return View();
}
public IActionResult ReturnPartial(string JobName)
{
return PartialView(JobName);
}
}
Result: