I am working just one week with ASP.NET MVC 3. This might be a very basic question or someone might have asked similar question before. I am seeking help to show me right path/method to accomplish the problem I am facing getting the partial view designed.
I have created a partial view login (in side bar) as below. What I would like to achieve here is, when I hit the "login" button, I must be a able update the partial view with information such as
**Welcome [UserName]
Last SuccessFul Login : [DateTime]
Member Since : [Date]**
I am not sure if I need to create another partial view to display this information Or the login partial view can be updated on the fly based on the action.
Login Partial View
#model AlanBeezLab.Models.LoginModel
#using (Ajax.BeginForm("Login","UserLogin", new AjaxOptions { UpdateTargetId =Model.UserName }))
{
<div >User Name
#Html.TextBox(" ")
</div>
<div>Password
#Html.Password(" ")
</div>
<p><input type="submit" value="Let me in!" /></p>
}
Below is the _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<!--link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />-->
<link href="#Url.Content("~/Content/SiteStyle.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div id="Header" style="background-image: url('/Content/Images/Banner_Final3.png'); background-repeat:no-repeat; width :1500px; height : 150px;" >
</div>
<div id="SideBar">
#Html.Partial("UserControls/UserLogin", new AlanBeezLab.Models.LoginModel())
</div>
<div id="Content">
#RenderBody()
</div>
<div id="Footer">
<p>Copyright © XXXXX</p>
</div>
</body>
</html>
Below is the Login Controller
public class UserLoginController : Controller
{
//
// GET: /UserLogin/
public ActionResult Index()
{
return View();
}
public ActionResult LogIn()
{
return [Not Sure];
}
I am not sure if this is best/right approach to accomplish this. I would appreciate if I am directed to the right path/approach.
Thanks
I've had this discussion with my peers before.
IMO login/logout should not be done via AJAX, it should be a regular HTTP POST.
Why? Well what if your on a page that requires Administrator access, then you logout via AJAX? Your still on the page - when you shouldn't be authorized to do so (unless of course you update the main portion of the page as well, which is kind of silly)
So my advice - make the login button do a regular POST to an action method, then use the PRG pattern to redirect back to the original page.
Of course, if you don't have the concept of administrators/permissions/roles then an AJAX login/logout will be fine.
Regardless, you've done the right thing with the partial view.
Your partial view should figure out if the user is authenticated, then render an appropriate editor/display template based on that.
E.g: _Login.cshtml:
#if(Request.IsAuthenticated) {
#Html.DisplayFor(Context.User.Identity)
} else {
#* editor fields *#
}
Related
I have a maybe-noob question for those who know how works jQuery mobile in its core :)
I see on some websites an ajax-like navigation, but with an URL completely changed after load (I mean, no hash at the end).
For example : http://m.wengo.fr/accueil
=> click on any link, you'll see a loader, and after a little animation the new page is loaded ; but the URL has no hash, it's a real new URL.
Is the page really fully reloaded after a first ajax-load behind ?
I don't see how this magic is did on their framework...
Thanks ;)
--
Damien
This is a rather easy implementation.
Page changes should be handled programatically with changePage function (jQuery Mobile 1.4 and below) or pageContainer change (jQuery Mobile 1.4 and above).
Solution:
$.mobile.changePage("second.html", { transition: "slideup", changeHash: false });
What you need is changeHash set to false.
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#open-page', function(){
alert('sdfsd');
$.mobile.changePage("second.html", { transition: "slideup", changeHash: false });
});
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
<a class="ui-btn-right" id="open-page">Next</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
Update:
Information you need has nothing to do with jQuery Mobile.
I showed you one solution which jQuery Mobile can actually do. But this solution will permanently show original HTML file name. This is because initial HTML page is loaded into the DOM and every other page is loaded into it. jQuery Mobile thus have full control over link name.
But this is not what mentioned page is using. It is using some kind of rewrite engine. By default, rewrite engine maps a URL to a filesystem path. However, it can also be used to redirect one URL to another URL (which is done here), or to invoke an internal proxy fetch. They are probably using Apache web server with mod_rewrite module turned on.
I want to fire a button's click event when pressing ENTER inside a input and I find it quite difficult with AngularJS.
My view (simplified, updated):
<!doctype html>
<html lang="en" ng:app="test">
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="css/app.css" />
</head>
<body ng-controller="TestController">
<button ng-click="onButton1Click()" class="btn1">Click Me</button>
<button ng-click="onButton2Click()" class="btn2">Don't click me</button>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="js/testcontroller.js"></script>
</body>
</html>
My controller for this view:
'use strict';
angular.module('test', [])
.controller('TestController', ['$scope',
function($scope) {
$scope.onButton1Click = function() {
alert("Hello");
}
$scope.onButton2Click = function() {
$('.btn2').click();
}
}])
I simplified all the code to this. When I click on btn2 I get this error
$apply already in progress
No, I can't call $scope.onButton1Click() directly, I must simulate the btn1 click.
You mentioned
fire a button's click event when pressing ENTER inside a input
So if it is safe to assume that you can have a form I would prefer using ng-submit as shown below.
<form ng-submit="clickEventFunction()">
<input type="text"/>
<button type="submit">Click</button>
</form>
Note button type should be submit.
This took me a while to figure out (lots of fiddles).
<form id="nowsorting" ng-submit="getData(sc_user)">Now sorting the Soundcloud likes of <input type="text" ng-model="sc_user"><input type="submit" value="Sort"></form>
Make a form and use ng-submit to fire the event (likely a function).
Then create two inputs (one is "text" and the other "submit").
Then pushing enter should fire the ng-submit event/function.
I think, you just have to call your $scope.onButtonClick()
Please check this Plunker
$scope.onKeyPress = function($event) {
if ($event.keyCode == 13) {
$scope.onButtonClick();
}
};
I got a jquery reference in my _Layout.cshtml . It does not look like this is working in my Index.cshtml page though: the /Home/GetSquareRoot is not hit? (it works when I uncomment the jquery reference in the index.cshtml though)
ViewStart.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
Index.cshtml
#{
ViewBag.Title = "Home Page";
}
<h2>#ViewBag.Message</h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
http://asp.net/mvc</a>.
</p>
#*<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>*#
<script type="text/javascript">
function calculateSquareRoot(numberToCalculate) {
$.ajax({
type: 'GET',
url: '/Home/GetSquareRoot',
data: { number: numberToCalculate },
success: function (data) { alert(data.result); }
});
}
</script>
<button type="button" onclick="calculateSquareRoot(9);">
Calculate Square</button>
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
#RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
homecontroller
public JsonResult GetSquareRoot(long number)
{
var square = Math.Sqrt(number);
return Json(new { result = square }, JsonRequestBehavior.AllowGet);
}
It works when you have the jQuery reference commented out, because your _Layout.cshtml file has the reference as well (just stating the facts, I realise you probably know this).
This also means that you have your routing set up correctly and that there is nothing wrong with the URL '/Home/GetSquareRoot'
The code looks fine, the only unknown that I can see is that ../../Scripts/ actually goes to the same place as ~/Scripts/ (will depend on what the URL of your page looks like).
I would use Google Chrome to check for script errors on your page: go to your page, right click and 'inspect element' on the page, then check that you don't have any script errors (bottom right of the inspector will have a red circle if you do).
If you have script errors that could be stopping the AJAX call from running.
When referring to hard-coded content URLs in your application, it's always a good idea to use Url.Content.
So instead of this:
<script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
use this:
<script src="#Url.Content("~/Scripts/jquery-1.5.1-vsdoc.js")" type="text/javascript"></script>
This way the correct URL to the jQuery script file will always be used, no matter what the URL of the page is.
Try out this one...
public JsonResult GetSquareRoot(long? number)
{
var square = Math.Sqrt(number);
return Json(new { result = square }, JsonRequestBehavior.AllowGet);
}
I can't see where I'm going wrong. I've tried everything I could think of, reCAPTCHA is just not working with the Ajax API. Here's what my code looks like:
<!-- this is in <head> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
$(document).ready(function() {
Recaptcha.create("my key here", "recaptcha_widget", {
"theme": "custom",
"lang": "en",
"callback": function() { console.log("callback"); } // this doesn't get called
});
});
</script>
<!-- ... this is in <body> -->
<div id="recaptcha_widget" style="display: none">
<div id="recaptcha_image"></div>
<div id="recaptcha_links">
get another •
<a class="recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')">switch to audio</a>
<a class="recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')">switch to image</a> •
help
</div>
<dt>Type the words</dt>
<dd><input type="text" id="recaptcha_response_field" name="recaptcha_response_field"></dd>
</div>
Works for me? What is happening? What are you trying to do?
When I substitute and alert for the console.log it alters everytime the page loads or a new reCaptcha gets generated. Exactly like it is supposed to.
The callback is not where you submit it for validation, if that is what you are trying to do then look here: http://recaptcha.net/apidocs/captcha/
Sorry for answering my question again. Found the problem, apparently you can't use reCAPTCHA in locally stored files (accessed via file:///), they have to be on a http:// site. As soon as I put this on localhost it worked.
+1 durilai for letting me know it works with him/her, this way I was able to look at the problem from a different perspective.
I want as well as Client Side Validation as Server Side Validation. I realized this as the following:
Model: ( The model has a DataModel(dbml) which contains the Test class )
namespace MyProject.TestProject
{
[MetadataType(typeof(TestMetaData))]
public partial class Test
{
}
public class TestMetaData
{
[Required(ErrorMessage="Please enter a name.")]
[StringLength(50)]
public string Name { get; set; }
}
}
Controller is nothing special.
The View:
<% Html.EnableClientValidation(); %>
<% using (Ajax.BeginForm("Index", "Test", FormMethod.Post,
new AjaxOptions {}, new { enctype = "multipart/form-data" }))
{%>
<%= Html.AntiForgeryToken()%>
<fieldset>
<legend>Widget Omschrijving</legend>
<div>
<%= Html.LabelFor(Model => Model.Name) %>
<%= Html.TextBoxFor(Model => Model.Name) %>
<%= Html.ValidationMessageFor(Model => Model.Name) %>
</div>
</fieldset>
<div>
<input type="submit" value="Save" />
</div>
<% } %>
To make this all work I added also references to js files:
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
Eventually it has to work, but it doesnt work 100%:
It does validates with no page refresh after pressing the button.
It also does "half" Client Side Validation. Only when you type some text into the textbox and then backspace the typed text. The Client Side Validation appears. But when I try this by tapping between controls there's no Client Side Validation.
Do I miss some reference or something? (I use Asp.Net MVC 2 RTM)
Change the order of the loaded javascript...
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
Had the exact same problem and this cleared it up for me...
I thought I was missing something too, but I do know that the jQuery validation plug in doesn't react to mouseEnter/mouseLeave. According to the documentation for that plug in (at the plug in page - look for the section labeled "A few things to look for when playing around with the demo"):
Before a field is marked as invalid, the validation is lazy: Before submitting the form for the first time, the user can tab through fields without getting annoying messages - he won't get bugged before he had the chance to actually enter a correct value
I assume it's the same rule with MVC 2 client-side validation. I can't be sure of that because the documentation doesn't say anything but "it works on my machine" :).
I went with the jQuery validation route, which is supported in MVC Futures (note that the documentation for that is non-existent). To use it, you just need to replace the script tags for MicrosoftAjax.js, MicrosoftMvcAjax.js and MicrosoftMvcValidation.js files with these two tags:
<script src="/js/jquery.validate.js" type="text/javascript"></script>
<script src="/js/MicrosoftMvcJQueryValidation.js" type="text/javascript"></script>
replacing the path with yours.
I also found the need to upgrade to the latest version of jquery.validate.js from the developer's page, because we are using a later version of jQuery (1.4) here.
Hope that helps.
hm..., it's late to answer but try this:
<script src="<%= Url.Content("ScriptFile.js") %>" type="text/javascript"></script>