JQuery button click event doesn't respond as expected using asp.net mvc
Question
Please see my _Layout.cshtml code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
@Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/themes/base/css")
@RenderSection("scripts", required: false)
</body>
</html>
I check firebug net tab and saw all js file got downloaded at client pc but still jquery related no function is working.
This is first one which show alert just clicking on button which is not working
$(function () {
$("#submit1").click(function () {
alert("button");
});
$(".datePicker").datepicker({
showOn: "button",
buttonImage: "/images/calendar-icon.png",
buttonImageOnly: true,
buttonText: "Select date"
});
});
when clicking on button then alert is not showing.
date picker is not coming.
where i made the mistake. please help me to sort out. am i missing any file to include? thanks
EDIT
my view.cshtml code as follow
@model MvcApplication1.Controllers.Employee
<div class="editor-label">
@Html.LabelFor(model => model.Id)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Id)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Name)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Salary)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Salary)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.IsMale)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.IsMale)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.JoinDate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.JoinDate, new { @class = "datePicker" })
</div>
<script>
$(function () {
$(".datePicker").datepicker({
showOn: "button",
buttonImage: "/images/calendar-icon.png",
buttonImageOnly: true,
buttonText: "Select date"
});
});
</script>
2 answers
solution1
1 2015-08-25 19:20:36
Editor works with metadata, look at http://aspadvice.com/blogs/kiran/archive/2009/11/29/Adding-html-attributes-support-for-Templates- 2D00 -ASP.Net-MVC-2.0-Beta_2D00_1.aspx
or change @Html.EditorFor(model => model.JoinDate, new { @class = "datePicker" }) to @Html.TextBoxFor(model => model.JoinDate, new { @class = "datePicker" })
solution2
0 2015-08-25 18:29:35
Assuming that your View.cshtml is the page being rendered in @RenderBody, you need to reference your script in a section within your View.cshtml like this:
@section Scripts {
@Scripts.Render("~/Scripts/app/myscript.js")
}
Here's an example of the JS working (you have that correct): https://jsfiddle.net/emonrc9c/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.