MVC Ajax with Ajax.ActionLink - asp.net-mvc

I'm trying to create simple Ajax call, but after clicking the link I get a blank page with "Test" string in top left corner:
In my Details view I have:
#Ajax.ActionLink("test", "AddPositive", new AjaxOptions() { UpdateTargetId = "countDiv" })
<div id="countDiv">
</div>
In controller:
public string AddPositive()
{
String test = "Test";
return (test);
}
Action does get called.
In _Layout.cshtml I imported.
<script src="#Url.Content("/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
It's probably something really simple, but still cannot figure it out after going trough a few beginners tutorials for Ajax. Appreciate any help, thanks!

<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
You are missing jquery and jquery.unobtrusive-ajax file.
Either there i bug in MicrosoftMvcAjax.js or M.S. has forgot to mention these files on their Tutorial. I hardly use this feature (#Ajax.ActionLink) so its tough for me figure out why it didnt worked without jQuery files.

You want to import two different .js files like so:
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
Also, I could be wrong, but doesn't your Action need to return an ActionResult?

Related

http://localhost:52951/app/app/app.module.js 404 (Not Found) scripts in layout not working

Im trying to add angular 5 to my mvc project for almost two days now and its not working. When I load the page I get these errors
my scripts view is an .ascx file and the scripts look like this
<!-- Polyfill(s) for older browsers -->
<base href="/">
<script src="<%: Url.ContentWithTimestamp("~/node_modules/core-js/client/shim.min.js") %>"></script>
<script src="<%: Url.ContentWithTimestamp("~/node_modules/zone.js/dist/zone.js") %>"></script>
<script src="<%: Url.ContentWithTimestamp("~/node_modules/systemjs/dist/system.src.js") %>"></script>
<script src="<%: Url.ContentWithTimestamp("~/systemjs.config.js") %>"></script>
<script>
SystemJS.import('<%: Url.ContentWithTimestamp("~/app/main.js") %>').catch(function(err){ console.error(err); });
</script>
Edit: This is the project I put angular in.
Here is one of the packages (dont want to upload img of everyone.They are there.)
The problem was in my main.js. This line:
var app_module_1 = require("./app/app.module");
should be like this:
var app_module_1 = require("./app.module");

jQuery UI error: TypeError: this._addClass is not a function [duplicate]

I am having an issue getting a dialog to work as basic functionality. Here is my jQuery source imports:
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>
Html:
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
<script type="text/javascript">
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
</script>
From the posts around seems like as a library import issue. I downloaded the JQuery UI Core, Widget, Mouse and Position dependencies.
Any Ideas?
Be sure to insert full version of jQuery UI. Also you should init the dialog first:
$(function () {
$( "#dialog1" ).dialog({
autoOpen: false
});
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
if some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.
Some times it could be issue with older version (or not stable version) of JQuery files
Solution use $.noConflict();
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
// Code that uses other library's $ can follow here.
</script>
If you comment out the following code from the _Layout.cshtml page, the modal popup will start working:
</footer>
#*#Scripts.Render("~/bundles/jquery")*#
#RenderSection("scripts", required: false)
</body>
</html>
Change jQueryUI to version 1.11.4 and make sure jQuery is not added twice.
I just experienced this with the line:
$('<div id="editor" />').dialogelfinder({
I got the error "dialogelfinder is not a function" because another component was inserting a call to load an older version of JQuery (1.7.2) after the newer version was loaded.
As soon as I commented out the second load, the error went away.
Here are the complete list of scripts required to get rid of this problem.
(Make sure the file exists at the given file path)
<script src="#Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
</script>
and also include the below css link in _Layout.cshtml for a stylish popup.
<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" />
I had a similar problem and in my case, the issue was different (I am using Django templates).
The order of JS was incorrect (I know that's the first thing you check but I was almost sure that that was not the case, but it was). The js calling the dialog was called before jqueryUI library was called.
I am using Django, so was inheriting a template and using {{super.block}} to inherit code from the block as well to the template. I had to move {{super.block}} at the end of the block which solved the issue. The js calling the dialog was declared in the Media class in Django's admin.py. I spent more than an hour to figure it out. Hope this helps someone.

Why is "Download CSV" repeated in my charts dropdown?

I can't figure out why Download CSV and Download XLS are repeated in my Highstock chart. Here are my links:
<script src="/Scripts/HighStock/highstock.js" type="text/javascript"></script>
<script src="/Scripts/HighStock/highcharts-more.js" type="text/javascript"></script>
<script src="/Scripts/HighStock/modules/no-data-to-display.js" type="text/javascript"></script>
<script src="/Scripts/HighStock/modules/boost.js" type="text/javascript"></script>
<script src="/Scripts/HighStock/modules/exporting.js" type="text/javascript"></script>
<script src="/Scripts/HighStock/modules/export-csv.js" type="text/javascript"></script>
Any help is appreciated.
I found my problem. I had a duplicate link to csport-csv.js in my html. It was hiding somewhere I didn't think to look. Once it was removed the chart displayed the expected choices.

ASP MVC error when accessing http://localhost:59730/Controller/Index

I am experiencing an odd occurrence.
If I navigate to:
http://localhost:59730/Controller
I get served the correct page and it is displays everything correctly.
But if I navigate to:
http://localhost:59730/Controller/Index It loads the page but it doesn't seem to load any css or scripts?
Why would this be? It is essentially navigating to the same page? It must have something to do with asp.net mvc routing I think??
I have just dumped my references in the main layout file: (my plan to go and organise them at a later stage)
<script type="text/javascript" src="Content/Template/js/plugins/jquery-1.7.min.js"></script>
<script type="text/javascript" src="Content/Template/js/plugins/jquery.flot.min.js"></script>
<script type="text/javascript" src="Content/Template/js/plugins/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="Content/Template/js/plugins/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="Content/Template/js/custom/general.js"></script>
<script type="text/javascript" src="Content/Template/js/custom/dashboard.js"></script>
<script type="text/javascript" src="Content/Template/js/custom/tables.js"></script>
<script type="text/javascript" src="Content/Template/js/plugins/jquery.dataTables.min.js"></script>
Reference your contents (like js, css, images...) with Url.Content like this:
<script type="text/javascript" src="#Url.Content("~/Content/Template/js/custom/general.js")"></script>;

Another! jqGrid question.. search not working

Same one as my previous question, but this time another problem - the search box doesnt appear when the search icon is clicked... it worked yesterday, but not any more!
http://sysport.co.uk/admin/grid/TEST.php
Should work the same as:
trirand.com/blog/jqgrid/jqgrid.html
Left hand side click new in 3.7 -> Multiple Search...
Really baffled me! It uses jquery-ui
It seems to me that you should change the list of the JavaScript files loaded from
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.8.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="src/grid.loader.js" type="text/javascript"></script>
to
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.8.custom.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
or
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.8.custom.min.js" type="text/javascript"></script>
<script src="src/grid.loader.js" type="text/javascript"></script>
The file i18n/grid.locale-en.js must be loaded before jquery.jqGrid.min.js. The file src/grid.loader.js on the other side contain the same files which are already included in the jquery.jqGrid.min.js plus i18n/grid.locale-en.js (see developer version of jqGrid). Including two versions of jqGrid can follow to unpredictable results.

Resources