I want to update the data in my container with ajax data from a partial view but the page just reloads without errors and doesn't update the data. Please help me with advice.
Its my controller code
public class HomeController : Controller
{
public ActionResult OnGetPartial()
{
return PartialView();
}
}
Its my PartialView code
<p>Hello from the Hello World partial at #DateTime.Now</p>
its my index and _layout code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - IntegTest</title>
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
#RenderBody()
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script src="~/lib/jquery-validation/dist/additional-methods.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
Index
Click Here!
<div id="panel">
</div>
<script>
completed = function (xhr) {
alert('hi ${xhr.responseText}!');
}
failed = function (xhr) {
alert('Status: { xhr.status }, Status Text: { xhr.statusText}');
}
</script>
You need to use jQuery Unobtrusive AJAX library , it can be find in Github :
https://github.com/aspnet/jquery-ajax-unobtrusive
You can download the file from above link(in src folder) or install it from Nuget in VS . Then you need to link the file in your _layout page :
<script src="~/lib/jquery-validation-unobtrusive/jquery.unobtrusive-ajax.js"></script>
After that your code should works well . In addition , you should ensure you have set correct partial view name . If you are using Razor pages , you can refer to this article for detail code sample .
Related
I created a ASP.NET core template and wrote a jquery script. When I look at the page I see that jquery is loaded into the page, but the script doesn’t run. I looked at the ASP.NET docs page and my layout.cshtml looks the same, so are there extra steps I must take to get jquery working?
Home page
#{
ViewData["Title"] = "Home Page";
}
<!-- Page Content-->
<div class="container">
<div class="row">
<form method="post" enctype="multipart/form-data">
<input type="file" id="files" name="files" multiple />
<input type="button" id="upload" value="Upload Selected Files" />
</form>
</div>
</div>
<script>
$(document).ready(function () {
alert("Test");
});
</script>
Solution
#section scripts
{
<script>
$(document).ready(function() {
alert("Test");
});
</script>
}
I suspect your jquery is loaded after the rest of the page content.
This means that you cannot reference jquery objects as the library has not been initialised yet.
Move the page script after jquery has loaded.
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
$(document).ready(function () {
alert("Test");
});
</script>
For efficiency I recommend you do this in one of two ways:
OPTION 1
Use a master script file that loads after jquery.
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/master.js"></script>
OPTION 2
Use a placeholder template that will always load after jquery but can be initialised on individual pages.
Master _Layout Page
<script src="~/lib/jquery/dist/jquery.js""></script>
#RenderSection("Scripts", required: false)
Content Page
#section Scripts {
<script>
$(function () {
alert("Test");
});
</script>
}
FOR CLARIFICATION
If you are referencing jQuery in your _Layout page.. double check to ensure that that reference is at the TOP of your _Layout page because if it is at the bottom, then every other page you have that use the _Layout and has jQuery, it will give you errors such as:
$ is undefined
because you are trying to use jQuery before it is ever defined!
Also, if your are referencing jQuery in your _Layout page then you do not need to reference it again in your pages that use your _Layout style
Make sure that you are loading the reference to jQuery before you start using <scripts>.
Your cshtml should work if you put the reference above your script as so:
<script src="~/Scripts/jquery-1.10.2.js"></script> // or whatever version you are using
// you do not need to use this reference if you are already referencing jQuery in your Layout page
<script>
$(document).ready(function () {
alert("Test");
});
</script>
If you create a new .Net Core 2.2 - Web Application with Razor Pages and try to add a jQuery script in index.cshtml you will get the error Uncaught ReferenceError: $ is not defined. As already mentioned this is because jQuery is loaded after the rest of the page content.
Fix this by navigating to Pages\Shared\_Layout.cshtml and add the scripts section to the html head tag instead. Then it will work:
Example:
Move from below </footer>:
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
</script>
</environment>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
Into <head>, should look like this:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - JiraApp.Clients.Web</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
</environment>
<link rel="stylesheet" href="~/css/site.css" />
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
</script>
</environment>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</head>
Thanks to everyone who contributed to these answers. I am new to JavaScript/jQuery and have been trying to get jQuery scripts to work for over two weeks now. I have gotten a few examples to work but, until now, I had no idea why something worked or did not work.
All of the examples I have looked at online show the references to .js files at the bottom of the page. None of the examples explain how the _Layout.cshtml file works in relation to the Razor views in an application. It is so confusing to add the links and script references to the _Layout.cshtml file only to have it not work as expected. Next, I moved the links and references to a header section on the razor page and it still did not work. Now that I have everything organized correctly, it is working and I understand why!!!
The key was putting the script inside the #section Scripts {} block. I had seen the call to RenderSectionAsync but did not realize what it was doing. This is how the bottom of my _Layout.cshtml file looks now:
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.inputmask.min.js"></script>
<script src="~/lib/jquery/dist/inputmask.binding.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
I hope many new developers see this post. When it comes to an ASP Net Core application with Razor views, the information provided in this thread is priceless! Again, many thanks to everyone who contributed to the answer.
must write below first line in while where you want to execute script.
if you write first line in other wile, it is not working.
below example to test JQUERY work or not.
<script>
$(document).ready(function () {
alert("Test");
});
</script>
This is similar to the fullcalendar question posed here on Stackoverflow. I shared the following solution on that question --
This is a good reference for what has been asked here. I downloaded jQuery directly and unarchived it into the wwwroot/lib folder/directory to get going with my project - however as I needed more JS libraries, it seemed that the Nuget option of installing JS libraries into my project really was an impossible path/option.
Consider;
not sure why you would use nuget packages for javascript libraries. your example has not been updated in the last four years, and probably doesn't support .net core projects (may not even work a current version of jQuery).
you should be using a javascript repository and package mangers like bower or npm, that manages the dependencies between libraries.
That is from the linked MS Forum. Anyhow, the question can be flagged as a duplicate of the other Fullcalendar question (which was posed two years prior to this one).
I am new in MVC5. I am adding HTML template in MVC project. I create a default project of mvc5 in visual studio 2015 and then i create Master Layout and controller plus view. When i execute my project it loads my whole template properly with its css and js files. But whenever i shuffle my view, my page navigate to its view with proper styling but i dont know why my js didn't load properly. I got no errors in console.
Here is my code:
RouteConfig.cs
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "AdminDashboard", action = "Index", id = UrlParameter.Optional }
);
AdminPanel.cshtml
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="#Url.Content("~/assets/")css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="#Url.Content("~/assets/")css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="#Url.Content("~/assets/")css/core.css" rel="stylesheet" type="text/css">
<link href="#Url.Content("~/assets/")css/components.css" rel="stylesheet" type="text/css">
<link href="#Url.Content("~/assets/")css/colors.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script type="text/javascript" src="#Url.Content("~/assets/")js/plugins/loaders/pace.min.js"></script>
<script type="text/javascript" src="#Url.Content("~/assets/")js/core/libraries/jquery.min.js"></script>
<script type="text/javascript" src="#Url.Content("~/assets/")js/core/libraries/bootstrap.min.js"></script>
<script type="text/javascript" src="#Url.Content("~/assets/")js/plugins/loaders/blockui.min.js"></script>
<!-- /core JS files -->
#*#Styles.Render("~/Assets/css")
#Scripts.Render("~/Assets/js")*#
</head>
Navigation Code in AdminPanel.cshtml
<div class="sidebar-category sidebar-category-visible">
<div class="category-content no-padding">
<ul class="navigation navigation-main navigation-accordion">
<!-- Main -->
<li class="navigation-header"><span>Main</span> <i class="icon-menu" title="Main pages"></i></li>
<li><i class="icon-home4"></i> <span>Dashboard</span></li>
<li><i class="icon-home4"></i> <span>abc</span></li>
<li>
<i class="icon-stack2"></i> <span>Page layouts</span>
<ul>
#* <li>EmptyPage</li>*#
<li>#Html.ActionLink("Department", "Department", "AdminDashboard")</li>
</ul>
</li>
</ul>
</div>
</div>
AdminDashboardController.cs:
public ActionResult Department()
{
return View();
}
ScreenShots:
enter image description here
enter image description here
I solved this issue by my self and I want to share my research, the error in this code was bad hierarchy.
Firstly i have to render my js files and the end of my _Layout and secondly I need to create #Section for my content scripts. This hierarchy resolve my problem.
_Layout.cs
at the end of my page:
#Scripts.Render("~/Assets/js")
<!-- /core JS files -->
#RenderSection("Script", required: false)
</body>
</html>
Dashboard.cs
Content View at the bottom of my dashboard.cs page:
#section Script{
<!-- Theme JS files -->
<script type="text/javascript" src="~/assets/js/plugins/visualization/d3/d3.min.js"></script>
<script type="text/javascript" src="~/assets/js/plugins/visualization/d3/d3_tooltip.js"></script>
<script type="text/javascript" src="~/assets/js/plugins/forms/styling/switchery.min.js"></script>
<script type="text/javascript" src="~/assets/js/plugins/forms/styling/uniform.min.js"></script>
<script type="text/javascript" src="~/assets/js/plugins/forms/selects/bootstrap_multiselect.js"></script>
<script type="text/javascript" src="~/assets/js/plugins/ui/moment/moment.min.js"></script>
<script type="text/javascript" src="~/assets/js/plugins/pickers/daterangepicker.js"></script>
<script type="text/javascript" src="~/assets/js/core/app.js"></script>
<script type="text/javascript" src="~/assets/js/pages/dashboard.js"></script>
<!-- /theme JS files -->
}
i'm trying to create date picker like this in asp.net, but its throwing me error. I'm using MVC architecture to create.
Here is the code i'm using. i'm getting error as:
Microsoft JScript runtime error: Object doesn't support this property
or method
I need date to be selected and sit in the edittext.
<tr>
<td style="width: 450px" class="" height="40px">
<%= Html.TextBox(ViewControlNames.DateTime, "", new { maxlength = "40", id = ViewControlNames.DateTime, Class = "LongInputField" })%>
</td>
</tr>
<script>
$(function () {
$("#CabDateTime").datepicker();
});
</script>
</asp:Content>
Probably you have not included the necessary jQuery UI library.
Add these script tags inside your page AFTER jQuery:
<link rel="stylesheet" href="css/themename/jquery-ui.custom.css" />
<script src="js/jquery-ui.custom.min.js"></script>
In this way you'll have the jQuery UI widgets bound to jQuery.
Ref: https://learn.jquery.com/jquery-ui/getting-started/
If you need a datetimepicker; you can use a widget plugin that extends datepicker functions by adding a time selection.
Project site: http://trentrichardson.com/examples/timepicker/
Demo code:
$(document).ready(function () {
$('#timePicker').datetimepicker({
controlType: 'select',
timeFormat: 'hh:mm ss'
});
});
Demo: http://jsfiddle.net/IrvinDominin/Ljt4T/1/
Have you added?
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
See from your comments you don't seems to be have added libraries and api at top of the page plese check it like i posted here
And for the further documentation please check here http://jqueryui.com/datepicker/
How do i include jquery ui to be used in my system? I've already put the code in my header:
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
And how can I include the date picker which I already downloaded from jqueryUI. Here is the code of the date picker :
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo"><p>Date: <input type="text" id="datepicker"></p></div>
I got confused how to export the downloaded file to asp. Thank you.
Did you also include the references to JQuery?
<link type="text/css" href="css/themename/jquery-ui-1.8.23.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
See: JQuery UI Documentation
here is my script
<script type="text/javascript">
$(document).ready(function () {
// alert("jquery working fine, still no display..");
$(".datepicker").datetimepicker({
showAnim: 'slideDown',
dateFormat: 'dd/mm/yyyy'
});
});
</script>
<input type="text" class="datepicker" />
The actual Datepicker works great, firebug shows this script, the jqueryUI, the timepicker-addon.js, slider.js, and datepicker.js, jquery is selecting the textboxes.
but alas, still no datetimepicker displaying
I've tried using id's/classes, rearranging the order the scripts are loaded. I would say that the addon is just bunk, but so many seem to have no troubles at all with it.
Does anyone know what I am missing?
The following code works perfectly fine for me:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="text" class="datepicker" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$('.datepicker').datetimepicker({
showAnim: 'slideDown',
dateFormat: 'dd/mm/yy'
});
</script>
</body>
</html>
Gives the following result as can be seen in this live demo:
So I guess there must be something wrong with your script inclusions and maybe their order. Unfortunately since you haven't shown your code it is difficult to be able to say more.