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>
Arman Hamid Mosalla
3,3653 gold badges32 silver badges55 bronze badges
asked Aug 25, 2015 at 15:08
-
Is that #submit1 button in the _LoginPartial page? I don't see it on your _Layout (same for .datePicker). If it is, then the JavaScript will run before your partial is loaded resulting in no actions triggering. You either need to bubble the event up to something that will be loaded, or wait until the Partial has loaded.JasCav– JasCav2015年08月25日 15:17:22 +00:00Commented Aug 25, 2015 at 15:17
-
_LoginPartial page is in my view.cshtmlMou– Mou2015年08月25日 18:03:33 +00:00Commented Aug 25, 2015 at 18:03
-
Right, but is that where your submit and datePicker "stuff" is that you're referencing? I don't see the DOM elements in the code you provided at all.JasCav– JasCav2015年08月25日 18:06:46 +00:00Commented Aug 25, 2015 at 18:06
-
i add my view code. just see my editMou– Mou2015年08月25日 18:09:39 +00:00Commented Aug 25, 2015 at 18:09
-
But where is the submit button and datepicker elements at? I don't see them anywhere. JavaScript won't work if there are no elements for it to select (and jQuery will not give any errors - it just won't select anything from the DOM). You need to add those items so it all wires up properly.JasCav– JasCav2015年08月25日 18:11:37 +00:00Commented Aug 25, 2015 at 18:11
2 Answers 2
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" })
answered Aug 25, 2015 at 19:20
Sign up to request clarification or add additional context in comments.
2 Comments
Mou
if i change EditorFor to TextBoxFor then it will work......why? what is wrong with EditorFor() ?
Daniel Gpe Reyes
because second parameter , new { @class = "datePicker" } on the EditorFor is not for html attributes,
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/
answered Aug 25, 2015 at 18:29
3 Comments
Mou
which script i need to write in myscript.js file? i wrote my click and date picker related script in view's html file. i guess that should work.
Mou
i am new in mvc. so tell me what this
@section Scripts does ? if possible give me article link which teach me about the usage of @section ScriptsJasCav
@Mou No, that won't necessarily work. If you're new to MVC, I would recommend heading over to asp.net/get-started and go through some of the tutorials there as your question is now expanding in scope.
default