@model Test_15.Models.EmployeeViewModel
@{
ViewBag.Title = "Modal";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<div class="container" style="width:40%;margin-top:2%">
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
<h3 class="modal-title">Technotips MVC</h3>
</div>
<div class="modal-body">
<form id="myForm">
@Html.DropDownListFor(model => model.DepartmentId, ViewBag.DepartmentList as SelectList, "--select--", new { @class = "form-control" })
@Html.TextBoxFor(model => model.Name, new { @class = "form-control", @placeholder = "Name" })
@Html.TextBoxFor(model => model.Address, new { @class = "form-control", @placeholder = "Address" })
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
<input type="reset" value="Submit" class="btn btn-success" id="btnSubmit" />
</div>
</div>
</div>
</div>
</div>
<script>
debugger;
$(document).ready(function(){
$("#btnSubmit").click(function () {
debugger;
alert("I want this to appear after the modal has opened!");
var myformdata = $("#myForm").serialize();
$.ajax({
type: "POST",
URL: "/Home/Index",
data: myformdata,
success: function () {
("#myModal").modal("hide");
}
})
})
})
</script>
Это мой индексный файл. В этом я называю модальный, а затем в модальном есть 2 кнопки, и на кнопку отправки он не вызывает сценарий. Применяя отладчик, он говорит Unhandled exception at line 21, column 1 in http://localhost:7454/Scripts/bootstrap.min.js 0x800a1391 - JavaScript runtime error: 'jQuery' is undefined
.
Пожалуйста, помогите.