I have a Index.cshtml and I call a PartialView. I also use angularJS. My question is about...
My Index.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div ng-app="testApp">
<div ng-controller="testCtrl">
<input type="text" ng-model="input"/>
<p>{{input}}</p>
<button type="button" onclick="callPv()">call partial</button>
</div>
<div id="divPv">
</div>
</div>
<script src="~/Scripts/angular.js"></script>
<script>
var callPv = function() {
$("#divPv").load("Home/TestPV");
}
</script>
</body>
</html>
My PartialView
<div>
<input type="text" ng-model="pv"/>
<p>{{pv}}</p>
</div>
My angular.js
var app = angular.module("testApp", []);
app.controller("testCtrl", function($scope) {
});
If I call partial view by using #Html.Partial("TestPV"), angular is working in partial view but if I call partial by ajax, angular is not working in partial and seeing {{pv}}. I face this problem often. I'm new to angular. I appreciate your assistance. Thank you so much for your answers!
If you want to call an angular function on click then use onclick
angular.element.scope.apply();
This will initiate ur scope function manually
angular.element('[ng-controller=testctrl]').scope().apply
Related
I've been trying to get a Javascript function to fire when my page's AJAX processing is triggered without success. Most of my time has been spent trying to get the OnBegin AjaxOption value working, but I have spent time with the global JQuery .ajaxSend handler as well (which I believe might not be compatible with ASP.NET MVC), both without success.
I've reduced my page to something pretty simple. My Index.cshtml for the project is:
#using SalePointWebItemInquiry.Controllers
#using System.Web.Mvc.Ajax
#{
ViewBag.Title = "Home Page";
}
#Scripts.Render("~/bundles/jquery", "~/bundles/jqueryval")
<script type="text/javascript">
function TestFunction() {
alert("Calling testfunction.");
}
</script>
#using (Ajax.BeginForm("PressButton",
"Home",
new AjaxOptions
{
OnBegin = "TestFunction"
}))
{
<div>
<input class="btn btn-default" type="submit" id="1" name="buttonType" value="Enter" />
</div>
}
The page that this renders is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Content/site.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="container body-content bordered">
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript">
function TestFunction() {
alert("Calling testfunction.");
}
</script>
<form action="/Home/PressButton" data-ajax="true" data-ajax-begin="TestFunction" id="form0" method="post">
<div>
<input class="btn btn-default" type="submit" id="1" name="buttonType" value="Enter" />
</div>
</form>
<footer>
<div class="row">
<div class="col-md-5">
<p>© 2015 - Application</p>
</div>
<div class="col-md-7 text-right">
Version: Put version here
</div>
</div>
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Internet Explorer","requestId":"d2eef5342ac64f3db1545856102f4a6f"}
</script>
<script type="text/javascript" src="http://localhost:53954/45ae7332668647b5a3795d87cd6ba1a9/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Does anyone have any thoughts on why the TestFunction() Javascript function isn't firing when I click the ENTER button?
Solution:
Thanks for the help :). I wasn't properly referencing jquery.unobtrusive-ajax.js. The direct solution to my problem was to use Nuget to retrieve a Javascript package that wasn't local using this command at Nuget console:
Install-Package Microsoft.jQuery.Unobtrusive.Ajax
Since I didn't have jquery.unobtrusive-ajax.js locally, all of my attempts to reference it locally failed. I may have tried a CDN reference once or twice, but that never worked out and I had a lot of theories as to the cause of the problem at the time.
I didn't even have to change the code. This code in BundleConfig.cs automatically included the file once I had retrieved it:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
You have duplicated
<script src="/Scripts/jquery-1.10.2.js"></script>
Remove the second one and then you also need to add jquery.unobtrusive-ajax.js in order for Ajax.BeginForm() to work (other wise you just making a normal submit - and therefore TestFunction() will never be called)
Looks like you are loading your script before JQuery can load. Scripts need to load at the bottom of the page just before the body tag and after JQuery loads.
Please try
#section Scripts
{
<script type="text/javascript">
function TestFunction() {
alert("Calling testfunction.");
}
</script>
}
This will place the script after JQuery loads.
I'm developing an ASP.NET MVC4 web application. I want to create views that is spesific for mobile browsers. I have followed this tutorial http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features. I have installed the package jQuery.Mobile.MVC and added the requested line to the Global.asax file. The installation have created a file called _Layout.Mobile.cshtml, and this file looks like this:
_Layout.Mobile.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
<script>
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
</head>
<body>
<div data-role="page" data-theme="a">
#Html.Partial("_ViewSwitcher")
<div data-role="header">
<h1>#ViewBag.Title</h1>
</div>
<div data-role="content">
#RenderSection("featured", false)
#RenderBody()
</div>
</div>
</body>
</html>
I also added a mobile view for the index view.
Index.Mobile.cshtml
#{
ViewBag.Title = "Home";
}
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Navigation</li>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
But when I open the webpage in an iPhone simulator, the page looks nothing like the one in the tutorial. It is blank with plain text. I have viewed the page source and can see that only the site.Mobile.css file is loaded.
<head>
<meta charset="utf-8" />
<title>Home</title>
<meta name="viewport" content="width=device-width" />
<link href="/Content/Site.Mobile.css" rel="stylesheet"/>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery.mobile-1.3.1.js"></script>
<script>
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
</head>
I created a new web application project through VS2012, but this time I chose the Mobile Application template. When I run this project and view the page source, a lot more css-files is displaying.
<head>
<meta charset="utf-8" />
<title>Log in</title>
<meta name="viewport" content="width=device-width" />
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/Content/jquery.mobile-1.2.0.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.structure-1.2.0.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.theme-1.2.0.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
I have checked that all of these files exists in my webApp project, but for some reason they are not loading. What am I doing wrong?
I have managed to figure this out, but the solution was a tricky one so I'm answering my own question in case others experience the same problem.
I changed the App_Start/BundleMobileConfig.cs from:
bundles.Add(new StyleBundle("~/Content/jquerymobile/css").Include(
"~/Content/jquery.mobile-{version}.css"
));
to
bundles.Add(new StyleBundle("~/Content/jquerymobile/css").Include(
"~/Content/jquery.mobile-1.3.1.min.css",
"~/Content/jquery.mobile.structure-1.3.1.min.css",
"~/Content/jquery.mobile.theme-1.3.1.min.css"
));
It looks like I only got the minified version of the jquery mobile css, while the stylebundle was looking for the original version. I think this is a bug when installing the jquery.mobile.MVC package.
Is there a pattern or anything I can do to load remote asp.net views properly? I have my index page that basically looks like this:
Index page works fine using new kendo.mobile.Application(document.forms[0]):
<form runat="server">
<div data-role="view" id="indexPageInitialView"> ... </div>
<div data-role="view" id="indexPageOtherView"> ... </div>
</form>
Remote view page issue:
<form runat="server">
<div data-role="view" id="remoteView1"> ... </div>
<div data-role="view" id="remoteView2"> ... </div>
</form>
I know Kendo loads remote views that can be [at most] descendants within the body tag, so I am thinking I'm backed into a corner here.
Update
When I attempt to simply load the remote view that is surrounded with the form tag, I get this error:
Uncaught TypeError: Cannot call method 'getAttribute' of undefined kendo.all.min.js:9
kendo.initWidget kendo.all.min.js:9
w.extend._createView kendo.all.min.js:31
w.extend._createRemoteView kendo.all.min.js:31
(anonymous function) kendo.all.min.js:31
l jquery.min.js:2
c.fireWith jquery.min.js:2
T jquery.min.js:2
r
If I nest the form tag within the remote view, it works, however, that is not a viable solution.
Update 2
Here is a more complete example of my situation.
index.aspx:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index</title>
</head>
<body>
<form runat="server">
<div id="indexPageInitialView" data-role="view">
<div data-role="content">
Load remote view
</div>
</div>
</form>
<script src="jquery.min.js"></script>
<script src="kendo.all.min.js"></script>
<script>
var app = new kendo.mobile.Application(document.forms[0]);
</script>
</body>
</html>
remote.aspx:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Remote</title>
</head>
<body>
<form runat="server">
<div id="remoteView1" data-role="view">
<div data-role="content">
<h1>Hi I am a remote view</h1>
</div>
</div>
</form>
</body>
</html>
Kendo will load only the first view found in the remote view. So if you make the call to remote view correctly, remoteView1 should load. If this is not the answer you are looking for, please post the full code in JSFiddle with more description.
Suppose I have following html page.
<html>
<head>
<link type="text/css" rel="Stylesheet" href="css/some.css" />
</head>
<body>
<input type="button" value="test" id="btnTest" name="btnTest"/>
<!--Script Section start-->
<script type="text/javascript" src="js/jquery/jquery-1.4.1.js"></script>
<script type="text/javascript">
function someFunction()
{
alert("hi");
}
</script>
<!--Script Section end-->
</body>
</html>
and I want above whole page to get loaded in another page without the help of iframe when I click on top menu of that page.
this is possible when both pages are on the same server. You should take a look at jQuery's .load() function: http://api.jquery.com/load/
You can also include only some part of the page by using selectors inside load statement, like so
$('#result').load('ajax/test.html div:first');
I have this asp.net code in my page :
<div id="prx">ABC</div>
And I want to change the value "ABC" to something when for example the user type a value in TextBox.
How can I do that using Ajax ?
Thanks
You don't need AJAX to do this. You can simply use Javascript to update the content of the DIV tag with the contents of the INPUT widget. See How to set the value of a form element using Javascript.
Now if you'd like to update the TextBox with something from the server without reloading the page, then that's AJAX. I'd use jQuery.ajax() function over UpdatePanels though. Here's a jQuery AJAX Tutorial.
May be using javascript?)
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication11.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
function setDivContent() {
var textInput = document.getElementById('text1');
var divPrx = document.getElementById('prx');
divPrx.innerHTML = textInput.value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="prx">ABC</div>
<br />
<input type="text" id="text1" />
<button onclick="javascript:setDivContent(); return false;">Set</button>
</div>
</form>
</body>
</html>
Check out the ASP.NET AJAX UpdatePanel control. It lets you change text on a page and "AJAX-ifies" anything inside it, instead of doing a full postback. Here is a good tutorial on it.
I know this is old question.. but it might help someone
JQUERY for this would be :
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(e){
e.preventDefault();
$("#prx").text($("#text1").val());
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="prx">ABC</div>
<br />
<input type="text" id="text1" />
<button type="button" id="btn1">Set</button>
</div>
</form>
</body>
</html>