<a href="@Url.Action("CoursesRegistration", "Home")" class="btn btn-large btn-success", onclick="$('#exampleModal').modal('show')">Create Courses</a>
Adding an "onclick" doesn't stop the link click action so your code is doing the modal('show') then immediately navigating to the href so going to your action. You need to stop the click happening so your modal is shown, do this by adding "return false"
<a href="@Url.Action("CoursesRegistration", "Home")" class="btn btn-large btn-success" onclick="$('#exampleModal').modal('show'); return false;">Create Courses</a>
You could also change the href to just
href="#"
as you don't want it to be a proper link, it is just there to fire your js to show the modal. Now change the action back to HttpPost
[HttpPost]
public ActionResult CoursesRegistration( eNtsaRegCourses model)
Updated
Here is a stripped down version of what you want to achieve
Modal
public class TestFormModel
{
public string FirstName { get; set; }
public string LastName { get; set; }
}
View (TestForm.cshtml)
@model Models.TestFormModel
@using (Html.BeginForm("TestForm", "Home", FormMethod.Post, new { id = "testForm", @class = "form-horizontal" }))
{
<p>
<a href="#" onclick="$('#formModal').modal('show'); return false;">Show Modal</a>
</p>
<div class="modal" id="formModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
@Html.LabelFor(m => m.FirstName)
@Html.TextBoxFor(m => m.FirstName, new { @class = "form-control" })
</div>
<div class="form-group">
@Html.LabelFor(m => m.LastName)
@Html.TextBoxFor(m => m.LastName, new { @class = "form-control" })
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
<script>
$("#formModal .btn-primary").click(function () {
saveForm();
});
function saveForm() {
$.ajax({
url: "/Home/TestForm",
data: $('#testForm').serialize(),
type: 'post',
success: function (data) {
if (data.Success) {
$("#formModal").modal('hide');
} else {
}
},
error: function (xhr, status) {
}
});
}
</script>
Controller
[HttpGet]
public ActionResult TestForm()
{
return View();
}
[HttpPost]
public ActionResult TestForm(TestFormModel model)
{
return Json(new { Success = true });
}