My Web Forms legacy project had a feature where a panel would be displayed when the user clicked on a button. Now, I am working on rebuilding this functionality in C# MVC.
The new view will utilize Javascript and AJAX to display a partial view as needed. While the code runs smoothly in the debugger, it does not call the partial view as expected.
I have referred to Stack Overflow posts to ensure that the JavaScript is correctly set up for displaying the div containing the partial view. However, I seem to be missing something in the AJAX or another aspect of the code. (Could it be related to decorating the target action? Or perhaps there's something that needs to be done in the partial view itself?)
The relevant part of the view:
<script type="text/javascript">
//Show the Add Project section.
function NewProject() {
//1. Reset the Add Project partial view.
//2. Show the Add Project partial view.
//3. Put focus into the project title field.
//4. Hide the button.
$("#divNewProject").show();
$.ajax({
url: "/Organization/AddProject/"
}).done(function () {
$("#divNewProject").html(data);
$("#ProjectTitle").focus();
$("#ProjectTitle").scrollIntoView();
});
$("#divAddProject").hide();
}
</script>
...
<div id="divAddProject">
@* Button to add a project, showing/hiding a partial view *@
<button type="button" name="btnAddProject" id="btnAddProject" value="Add" onclick="NewProject()" class="btn">
<span class="wizard-step-text">Add New Project</span>
</button>
</div>
<div id="divNewProject" hidden="hidden">
This is a test. It should start out hidden and later be shown.
</div>