How to call a search method in a _Layout.cshtml? - c#

I'm trying to create a search method, that is called in my _Layout.cshtml and when I click on submit button, the user is redirected to "search view".
I' following this tutorial, but the author call your method at index view and I need to call the method at _Layout to be redirect to another view that will give me the return of method.
This is my _Layout, is basic a nav-bar from bootstrap with a textfield and a button, that the user can put what he need to find:
#model IEnumerable<TestTcc2.Models.Musica>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/Bootstrap")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">#Html.ActionLink("your logo here", "IndexOuvinte", "Home")</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "IndexOuvinte", "Home")</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>#Html.ActionLink("Manage Account", "Manage", "Account")</li>
<li>#using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{
#Html.AntiForgeryToken()
Log off}</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container">
#RenderSection("featured", required: false)
#RenderBody()
</div>
<!--Fim container -->
</body>
</html>
and this is the method that I want to call at _Layout.cshtml:
public ActionResult Search(string search)
{
var musicas = from m in db.Musicas select m;
if (!String.IsNullOrEmpty(search))
{
musicas = musicas.Where(s => s.Nome.Contains(search));
return RedirectToAction("Search"); //name of view that will return the data
}
return View(musicas);
}


Well, you might consider specifying an action to the form or just use the appropriate helper to generate it:
#using (Html.BeginForm("Search", "SomeController", null, FormMethod.Post, new { #class = "navbar-form navbar-left", role = "search" }))
{
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
}

Related

Model Validation in Asp.Net Core Doesnt Work

my model validation doesnt work but every thing is ok I mean I have asp-net-validationin in view and my model have attributes and my submit button send the form with post method to index method in Home controller but the validation not working but the interesting part is that my login validation is work but my main form validation that has all the things that login form has not work I try every thing but no result. but I think the problem can be in the controller. I dont have any idea please help.
Controller
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult Index(User user)
{
if (ModelState.IsValid)
{
return RedirectToAction("Index");
}
return View(user);
}
User Model
public class User
{
[Key]
public int LeadId { get; set; }
[Display(Name ="name")]
[Required(ErrorMessage = "please enter your name")]
[MaxLength(50,ErrorMessage ="the max is 50")]
public string FirstName { get; set; }
[Display(Name = "family")]
[Required(ErrorMessage = "please enter your family")]
[MaxLength(50,ErrorMessage = "the max is 50")]
public string LastName { get; set; }
[Display(Name = "email")]
[Required(ErrorMessage = "please enter your email")]
[MaxLength(100,ErrorMessage = "the max is 100")]
[DataType(DataType.EmailAddress)]
public string EMailAddress1 { get; set; }
[Display(Name = "mobile")]
[Required(ErrorMessage = "please enter your mobile")]
[MaxLength(11,ErrorMessage = "the max is 11")]
[DataType(DataType.PhoneNumber)]
public string MobilePhone { get; set; }
[Required(ErrorMessage = "please choose gender")]
public int gender { get; set; }
}
view
#model DataLayer.User
#{
ViewData["Title"] = "welcome to form";
Layout = "/Views/Shared/_Layout.cshtml";
}
<div class="preloader type-preloader d-flex justify-content-center align-items-center">
<img src="/files/preloader/sdf.gif" alt="preloader" />
</div>
<div class="container">
<form method="post" asp-action="Index" asp-controller="Home" name="myForm" id="myForm" class="box box1 col-lg-12 pb-3 pt-3 col-md-12 col-sm-12 col-12">
<div class="row">
#* Name *#
<div class="form-group floating-label-group col-6 col-sm-12 col-xl-12 col-md-6 col-lg-6">
<i class="zmdi zmdi-account namedarkmode namedarkmode1 "></i>
<input asp-for="FirstName" type="text" name="Name" class="Nameinput Nameinput1 name farsiinput jh" lang="fa" required autocomplete="off" title="enter your name" maxlength="50" />
<label asp-for="FirstName" class="floating-label-name floating-label-name1">name:</label><br />
<span asp-validation-for="FirstName" class="text-danger"></span>
</div>
#* Family *#
<div class="form-group floating-label-group col-6 col-sm-12 col-xl-12 col-md-6 col-lg-6">
<i class="zmdi zmdi-account familydarkmode familydarkmode1 "></i>
<input asp-for="LastName" type="text" name="Family" class="Familyinput Familyinput1 farsiinput family" lang="fa" required autocomplete="off" title="enter your family" maxlength="50" />
<label asp-for="LastName" class="floating-label-family floating-label-family1">family:</label><br />
<span asp-validation-for="LastName" class="text-danger"></span>
</div>
</div>
#* Email *#
<div class="row">
<div class="form-group floating-label-group col-12 col-sm-12 col-md-12 col-xl-12 col-lg-12">
<i class="zmdi zmdi-email emaildarkmode emaildarkmode1"></i>
<input asp-for="EMailAddress1" type="email" name="Email" class="Emailinput Emailinput1" autocomplete="off" required title="enter your email" maxlength="100" />
<label asp-for="EMailAddress1" class="floating-label-email floating-label-email1">email:</label>
<span asp-validation-for="EMailAddress1" class="text-danger"></span>
</div>
</div>
#* Mobile *#
<div class="row">
<div class="d-flex align-items-center align-items-baseline col-12">
<div class="form-group floating-label-group">
<i class="zmdi zmdi-phone phonedarkmode phonedarkmode1"></i>
<input asp-for="MobilePhone" type="tel" name="Mobile" class="MobileInput MobileInput1 farsiinput" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" pattern="[0-9]{11}" lang="fa" dir="rtl" autocomplete="off" required title="enter your mobile" maxlength="11" />
<label asp-for="MobilePhone" class="floating-label-mobile floating-label-mobile1">mobile:</label><br />
<span asp-validation-for="MobilePhone" class="text-danger"></span>
</div>
#* Male/Female *#
<div class="form-group d-inline">
<div class="form-check custom-control custom-radio d-inline">
<input class="form-check-input MaleInput MaleInput1" type="radio" id="MaleRadio" name="Gender" />
<label class="form-check-label custom-control-label cl maledarkmode maledarkmode1" for="MaleRadio"> man</label>
</div>
<div class="form-check custom-control custom-radio d-inline">
<input class="form-check-input FemaleInput FemaleInput1" type="radio" id="FemaleRadio" name="Gender" />
<label class="form-check-label custom-control-label cl femaledarkmode femaledarkmode1" for="FemaleRadio"> woman</label>
<small class="text-danger"></small>
</div>
<span asp-validation-for="gender"></span>
</div>
</div>
</div>
#* reCAPTCHA *#
<div class="pt-2">
<div class="d-flex justify-content-start form-group recaptcha">
<div class="g-recaptcha" data-sitekey="6LcZ05gbAAAAAHOBPJu3xvtCkQcB_mMQIVrxGmTd"></div>
</div><br />
<small class="text-danger recaptchaerror mb-6"></small>
</div>
#* button *#
<div class="row pt-3 col-12">
<button class="d-flex justify-content-start btn btn-outline-success" type="submit">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
enter
</button>
</div>
</form>
</div>
layout
#model AdminContent
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>form</title>
#* material design iconic *#
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
#* bootstrap *#
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="/css/bootstrap.min.css" rel="stylesheet" />
#* css *#
<link rel="stylesheet" href="/css/style.css" />
#* fontawsome *#
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="icon" type="image/x-icon" href="">
</head>
<body class="d-flex justify-content-center align-items-center">
<header class="header">
<nav class="navbar navbar1 d-flex align-items-baseline navbar-expand-sm navbar-toggleable-sm">
<div class="container navtop navtop1">
#* <img src="/files/AdminImages/#Model.IconImageName" />
*# #if (User.Identity.IsAuthenticated)
{
<h1 class="navbar-brand navbar-brand1 d-inline text-secondary">#User.Identity.Name #ViewData["Title"]</h1>
}
else
{
<h1 class="navbar-brand navbar-brand1 d-inline text-secondary">#ViewData["Title"]</h1>
}
#* start dark mode html *#
<div class="container bn">
<div class="sun sun-logo">
<i class="fas fa-sun fonticon"></i>
</div>
<div class="moon moon-logo">
<i class="fas fa-moon fonticon"></i>
</div>
</div>
#* end dark mode html *#
#if (User.Identity.IsAuthenticated)
{
<i class="zmdi zmdi-power icon icon1"></i>
<a asp-action="Logout" asp-controller="Account" class="btn-link">exit</a>
}
else
{
<i class="zmdi zmdi-account-box icon icon1 mb-7 ml-2"></i>
<a asp-action="Admin" asp-controller="Home" class="btn-link text text1 mnb mb-7 text-secondary">Admin</a>
}
</div>
</nav>
</header>
<main class="d-flex flex-row justify-content-start align-items-start">
#RenderBody()
</main>
#* <script src="/lib/jquery/dist/jquery.min.js"></script>
*#
<script src="/js/jquery-3.5.1.min.js"></script>
<script src="/js/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?hl=fa"></script>
#RenderSection("Scripts", required: false)
</body>
</html>

make sure to include your model name in the razor page. This is how razor knows the ViewModel
#model UserViewModel
Startup.cs
services.AddRazorPages();
RazorPage.cshtml
<form method="post">
<div asp-validation-summary="ModelOnly"></div>
</form>

C# MVC 5 ASP.NET

I created registration and login to my app. But when I login i don't see logged user. How can I do that? I create all redirection to home page when user is connected but I don't see connected user like on this site.
I was fallowing this tutorial. And all is working fine. But how can I get this?
On my site i have this:
My git. I didn't post any code, because is almost the same like in tutorial, except i added redirection to my home page.
https://github.com/ivanradunkovic/Vozila/tree/master/Vozila
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Vehicle</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script type="text/javascript">
var appInsights=window.appInsights||function(config){
function s(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},r=document,f=window,e="script",o=r.createElement(e),i,u;for(o.src=config.url||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",r.getElementsByTagName(e)[0].parentNode.appendChild(o),t.cookie=r.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace"];i.length;)s("track"+i.pop());return config.disableExceptionTracking||(i="onerror",s("_"+i),u=f[i],f[i]=function(config,r,f,e,o){var s=u&&u(config,r,f,e,o);return s!==!0&&t["_"+i](config,r,f,e,o),s}),t
}({
instrumentationKey:"615aadc5-8508-46e7-aa93-713181a155ae"
});
window.appInsights=appInsights;
appInsights.trackPageView();
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Vehicle", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<ul class="nav navbar-nav">
<li>#Html.ActionLink("About application", "About", "Home")</li>
<li>#Html.ActionLink("Vehicle Make", "Index", "Make")</li>
<li>#Html.ActionLink("Vehicle Model", "Index", "Model")</li>
<li>#Html.ActionLink("About author", "AboutAuthor", "Home")</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li style="color: white; line-height: 50px;">
<li>#Html.ActionLink("Login", "Login.aspx", "Login.aspx")</li>
<li>#Html.ActionLink("Register", "Register.aspx", "Register.aspx")</li>
</ul>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Vehicle by Ivan Radunković</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
My View/Shared/_Layout.cshtml

In shared/_Layout.cshtml you have to write code if user is loggedIn then display Name and Logg Off Text else show Login and Register Text(Button).
Like :
#if(Model.IsAuthenticated)
{
<div>
{Name(Fetch from model} Logg Off
</div>
}
else
{
<div> Register Login
</div>
}
Enjoy......

If you can confirm that the users are being saved to the database then you just have to change your _Layout.cshtml:
#if(Model.IsAuthenticated)
{
"Hello " + User.Identity.GetUserName()
}
else
{
<ul class="nav navbar-nav navbar-right">
<li style="color: white; line-height: 50px;">
<li>#Html.ActionLink("Login", "Login.aspx", "Login.aspx")</li>
<li>#Html.ActionLink("Register", "Register.aspx", "Register.aspx")</li>
</ul>
}

MVC Carousel not sliding automatically Bootstrap MVC

The Index.cshtml file in Microsoft Visual Studio. I want to be available to have my carousel move to the second image but it doesn't slide.
#{ ViewBag.Title = "Home Page"; }
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/Content/img/slide-1.png" alt="First Image" class=""/>
<div class="carousel-caption">
<h2 class="awesome">This Template Is Awesome</h2>
<p class="awesome-line">resto restaurant home page website template</p>
</div>
</div>
<div class="item">
<img src="~/Content/img/slide-2.png" alt="Second Image" class="" />
<div class="carousel-caption">
<h2 class="awesome">This Template Is Awesome</h2>
<p class="awesome-line">resto restaurant home page website template</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#mySlider" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#mySlider" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
_Layout.cshtml Page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li>#Html.ActionLink("Our Story", "Index", "Home")</li>
<li>#Html.ActionLink("Menu", "Menu", "Home")</li>
<li>#Html.ActionLink("Reservations", "Reservations", "Home")</li>
<li>#Html.ActionLink("News", "News", "Home")</li>
<li>#Html.ActionLink("Reviews", "Reviews", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Do I need to call the script in the index.cshtml file?

Yes do call the Jquery,boostrap scripts
Change your href's into your carousel ID
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
and this code will help you automatically slide your carousel
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel({
interval: 1200
})
});
</script>
A little Javascript will do the trick :)

Uncaught Error when loading page

I( have an MVC 5 application that is also using angularjs and boot strap. When the page loads the modal doesnt launch and i get the following err in the console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.8/$injector/modulerr?p0=myApp&p1=Error%3A%2….c%20(http%3A%2F%2Flocalhost%3A60248%2FScripts%2Fangular.min.js%3A17%3A431)
Here is my html:
Layout:
<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temujin #ViewBag.Title</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/js/Login.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Temujin", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Temujin</p>
</footer>
</div>
</body>
</html>
Directive template:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<form class="form-signin" name="authForm" ng-submit="auth()" ng-controller ="AuthController" novalidate>
<input type="text" class="form-control" placeholder="user name" ng-model ="AuthController.user.username" required autofocus>
<input type="password" class="form-control" placeholder="password" ng-model ="AuthController.user.password" required>
<input type="submit" class="btn btn-primary" value="Submit" />
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
cshtml:
#{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2></h2>
<div id="loginBox">
<auth-modal></auth-modal>
</div>
angularjs:
(function () {
var temujin = angular.module('temujin', []);
temujin.controller('AuthModalController', ['$scope',function ($scope) {
$scope.temujin.user = {};
console.log("AuthModalController ran");
$scope.$(".modal").modal({ message: 'HEll0 World' });
}]);
temujin.directive("authModal", function () {
return { restrict: 'E', templateUrl: '\\js\\templates\\auth-modal.html', controller: 'AuthModalController',controllerAs: 'authmodalCtrl'}
});
temujin.controller('AuthController',['$scope',function ($scope) {
$scope.user = {};
console.log("AuthController ran");
$scope.auth = function () {
console.log("user " + this.user);
};
}]);
})();
MVC 5 controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace temujin.Controllers
{
public class TemujinController : Controller
{
//
// GET: /Temujin/
public ActionResult Index()
{
return View();
}
}
}

You are attempting to use the module myApp in your page here:
<html ng-app ="myApp">
But your actual module is named temujin
You just need to change your ng-app directive to point to the right module name.
<html ng-app ="temujin">

When submitting form not calling controller function

When clicking the submit button the auth function isn't being called, I haven't been able to figure out why.
html for the template for all pages:
<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyApp #ViewBag.Title</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/js/Login.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("myApp", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - myApp</p>
</footer>
</div>
</body>
</html>
html for this pages view:
#{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2></h2>
<div id="loginBox">
<auth-modal></auth-modal>
</div>
here is the html for the custom directive:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<form class="form-signin" name="authForm" ng-submit="auth()" ng-controller ="AuthController" novalidate>
<input type="text" class="form-control" placeholder="user name" ng-model ="AuthController.user.username" required autofocus>
<input type="password" class="form-control" placeholder="password" ng-model ="AuthController.user.password" required>
<input type="submit" class="btn btn-primary" value="Submit" />
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Here is the JS:
(function () {
var MyApp = angular.module('MyApp', []);
MyApp.controller('AuthModalController', function () {
MyApp.user = {};
console.log("AuthModalController ran");
$(".modal").modal({});
});
MyApp.directive("authModal", function () {
return { restrict: 'E', templateUrl: '\\js\\templates\\auth-modal.html', controller: 'AuthModalController',controllerAs: 'authmodalCtrl'}
});
MyApp.controller('AuthController',function () {
this.user = {};
console.log("AuthController ran");
this.auth = function () {
console.log("user " + this.user);
};
});
})();
MVC 5 Controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MyApp.Controllers
{
public class MyAppController : Controller
{
//
// GET: /MyApp/
public ActionResult Index()
{
return View();
}
}
}

Edit: I'm adding on here that I couldn't get the code linked below to run except by adding the ng-app="app-name-from-module" directive alongside the controller declaration on the form object, which is not in the linked angular-js documentation!
Reading just the documentation I noticed quite a few issues,
1) You're declaring "myApp" and using "MyApp" unless thats an obfuscation error.
2) I think your controller is missing a few things per the documentation (esp $scope variable, https://docs.angularjs.org/guide/controller)
2a) You're not attaching the auth function to the $scope
3) The .controller seems to take a string and an array as an argument, not a generic function.
Per: https://docs.angularjs.org/api/ng/directive/ngSubmit
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function() {
if ($scope.text) {
$scope.list.push(this.text);
$scope.text = '';
}
};
}]);
</script>
<form ng-app="submitExample" ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
</form>

Categories