I am trying in ASP.NET MVC in navbar put dropdown menu with select language. When I click on first dropdown button all navbar button need to change language. I wrote Language Controller and it works but my problem is that I want to have in navbar only show pictures of country and I try everything and always I see and letters and pictures.
I want to have only pictures of flag, without ENG.
One example of code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brig</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="main_manu">
<div class="title">
<h2>Brig</h2>
<br />
<div class="navbar navbar-inverse navbar-fixed" id="navbarMenu">
<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" id="navbar-colapse">
<ul class="nav navbar-nav">
<li class="dropdown">
#Html.LabelFor(model => model.ChoseLanguage) <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a>#Html.ActionLink("ENG", "Change", "Language", new { LanguageAbbrevation = "en" }, null)</a><img class="demo cursor" src="~/pictures/flag/gb.jpg" style="width:25%"></li>
<li><a>#Html.ActionLink("SPA", "Change", "Language", new { LanguageAbbrevation = "spa" }, null)</a><img class="demo cursor" src="~/pictures/flag/spa.png" style="width:25%"></li>
</ul>
</li>
<li>#Html.ActionLink(Resources.Resource.Home, "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })</li>
<li>#Html.ActionLink(Resources.Resource.Services, "Info", "Services", new { area = "" }, new { #class = "navbar-brand" })</li>
<li>#Html.ActionLink(Resources.Resource.Gallery, "Gallery", "Gallery", new { area = "" }, new { #class = "navbar-brand" })</li>
<li>#Html.ActionLink(Resources.Resource.Apartment, "Apartment", "Apartment", new { area = "" }, new { #class = "navbar-brand" })</li>
<li>#Html.ActionLink(Resources.Resource.Contact, "SendEmail", "Contact", new { area = "" }, new { #class = "navbar-brand" })</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Brig</p>
</footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
I will appreciate your help. Thank you.
Related
I want a fixed navigation bar in every page but this layout is changing the contents of other pages that are using this layout. Is it because of the scripts? Please try to explain from the basics. I have included the screenshot of the home page. The registration form is getting shrinked.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - MY BOOKS</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</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("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "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",false)
</body>
</html>
Homepage
#model LogReg.Models.Login
<!DOCTYPE html>
<html>
<head>
<title>MyBooks Login Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link href="/RegisterTemplate/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
<link href="/RegisterTemplate/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="//fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900" rel="stylesheet">
</head>
<body>
<div class="signupform">
<h1>MyBooks Login Form</h1>
<div class="container">
<div class="agile_info">
<div class="w3l_form">
<div class="left_grid_info">
<h3>Welcome to MyBooks!</h3>
<h4>A place of Story makers, Dragon-tamers, Dream Catchers, Fact Finders and definitely a safer place.</h4>
<p>Books are the quietest and most constant of friends; they are the most accessible and wisest of counselors, and the most patient of teachers. </p>
</div>
</div>
<div class="w3_info">
<h2>Login to an Existing Account</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<form action="#" method="post">
<div class="input-group">
<span><i class="fa fa-user" aria-hidden="true"></i></span>
#Html.EditorFor(model => model.Email_ID, new
{
htmlAttributes = new
{
#class = "form-control",
#placeholder = "Enter Email Address",
required = "Required",
pattern = "[a-z0-9._%+-]+#[a-z0-9.-]+\\.[a-z]{2,3}$",
title = "example#email.com"
}
})
#Html.ValidationMessageFor(model => model.Email_ID, "", new { #class = "text-danger" })
</div>
<div class="input-group">
<span><i class="fa fa-user" aria-hidden="true" ></i></span>
#Html.EditorFor(model => model.Password, new
{
htmlAttributes = new
{
#class = "form-control",
#placeholder = "Enter Password",
required = "Required",
oninvalid = "this.setCustomValidity('Password cannot be empty')",
oninput = "setCustomValidity('')"
}
})
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger" })
</div>
<div class="form-group">
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.Remember_Me)
#Html.ValidationMessageFor(model => model.Remember_Me, "Remember Me", new { #class = "text-danger" })
</div>
</div>
</div>
<button class="btn btn-danger btn-block" type="submit">Login</button>
</form>
}
</div>
<div class="clear"></div>
</div>
</div>
<div class="footer">
<p>© MyBooks Login form 2018. All Rights Reserved | Design by Aniket Prashar</p>
</div>
</div>
</body>
</html>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
I urge you to read an MVC tutorial or something similar as you do not yet understand the basic layout in ASP.NET MVC.
Assuming this is your layout, every page indicated to use this will have this layout and display the page content on the #RenderBody() meaning you should not reload scripts in your page view.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - MY BOOKS</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</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("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "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",false)
</body>
</html>
Controller:
[HttpGet]
public ActionResult Homepage()
{
return View(new LogReg.Models.Login());
}
Homepage View:
#{
ViewBag.Title= "MyBooks Login Page";
}
<link href="/RegisterTemplate/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
<link href="/RegisterTemplate/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="//fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900" rel="stylesheet">
<div class="signupform">
<h1>MyBooks Login Form</h1>
<div class="container">
<div class="agile_info">
<div class="w3l_form">
<div class="left_grid_info">
<h3>Welcome to MyBooks!</h3>
<h4>A place of Story makers, Dragon-tamers, Dream Catchers, Fact Finders and definitely a safer place.</h4>
<p>Books are the quietest and most constant of friends; they are the most accessible and wisest of counselors, and the most patient of teachers. </p>
</div>
</div>
<div class="w3_info">
<h2>Login to an Existing Account</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<form action="#" method="post">
<div class="input-group">
<span><i class="fa fa-user" aria-hidden="true"></i></span>
#Html.EditorFor(model => model.Email_ID, new
{
htmlAttributes = new
{
#class = "form-control",
#placeholder = "Enter Email Address",
required = "Required",
pattern = "[a-z0-9._%+-]+#[a-z0-9.-]+\\.[a-z]{2,3}$",
title = "example#email.com"
}
})
#Html.ValidationMessageFor(model => model.Email_ID, "", new { #class = "text-danger" })
</div>
<div class="input-group">
<span><i class="fa fa-user" aria-hidden="true" ></i></span>
#Html.EditorFor(model => model.Password, new
{
htmlAttributes = new
{
#class = "form-control",
#placeholder = "Enter Password",
required = "Required",
oninvalid = "this.setCustomValidity('Password cannot be empty')",
oninput = "setCustomValidity('')"
}
})
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger" })
</div>
<div class="form-group">
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.Remember_Me)
#Html.ValidationMessageFor(model => model.Remember_Me, "Remember Me", new { #class = "text-danger" })
</div>
</div>
</div>
<button class="btn btn-danger btn-block" type="submit">Login</button>
</form>
}
</div>
<div class="clear"></div>
</div>
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
#section Scripts will appear in the position of #RenderSection("scripts", required: false) inside your layout view meaning it will not be rendered after the </div> tag.
I am creating asp.net web api and i am trying to add a calendar control in one of the fields via date-time picker. After i run the application and press the button for creating article/event it shows this error: System.Web.HttpException: 'Section already defined: "scripts".'
Here is my _Layout.cshtml
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Public Events</title>
#Styles.Render("~/Content/css")
#RenderSection("styles", required: false)
#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>
#Html.ActionLink("Events", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#if (Request.IsAuthenticated)
{
<li>#Html.ActionLink("My Events", "My", "Events")</li>
<li>#Html.ActionLink("Create Event", "Create", "Events")</li>
}
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#Html.Partial("_Notifications")
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Events Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Scripts section defined twice. Remove one or combine them.
#section scripts
{
//...
}
I'm going through the Lynda.com ASP.NET MVC 5 Essentials course, when out of nowhere, I start getting plain HTML appearing when I try to view my site. I've tried different browsers with no luck. Any idea what could cause this?
EDIT: I should note, I'm not getting any errors at all.
I'll throw up some of my code, but I'm not 100% sure which pieces are relevant.
index.cshtml:
#{
ViewBag.Title = "Home Page";
}
<div class="row">
<div class="col-md-6 margin-top-20">
<a href="#" class="btn btn-primary btn-lg btn-block">
<span class="glyphicon glyphicon-circle-arrow-down">Withdrawal
</span>
<span class="glyphicon glyphicon-print">
Print Statement
</span>
<span class="glyphicon glyphicon-transfer">
Withdrawal
</span>
<span class="glyphicon glyphicon-circle-arrow-up">
Deposit
</span>
</a>
</div>
<div class="col-md-6 margin-top-20"></div>
}
HomeController.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace AutomatedTellerMachine.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[ActionName("about-this-atm")]
public ActionResult About()
{
return View();
}
public ActionResult Contact()
{
ViewBag.TheMessage = "Having trouble? Send us a message!";
return View();
}
public ActionResult Foo()
{
return View("About");
}
public ActionResult Serial(string letterCase)
{
var serial = "ASPNETMVC5ATM1";
if (letterCase == "lower")
{
return Content(serial.ToLower());
}
return Json(new { name = "serial", ValueProvider = serial }, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult Contact(string message)
{
// TODO : send message to HQ
ViewBag.Message = "Thanks, we got your message!";
return View();
}
}
}
Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - MVC Bank</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</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("MVC Bank", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - MVC Bank - #Html.Action("Serial", "Home")</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
And this is what I see in my browser:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - MVC Bank</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="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="/">MVC Bank</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Log in</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="row">
<div class="col-md-6 margin-top-20">
<a href="#" class="btn btn-primary btn-lg btn-block">
<span class="glyphicon glyphicon-circle-arrow-down">Withdrawal
</span>
<span class="glyphicon glyphicon-print">
Print Statement
</span>
<span class="glyphicon glyphicon-transfer">
Withdrawal
</span>
<span class="glyphicon glyphicon-circle-arrow-up">
Deposit
</span>
</a>
</div>
<div class="col-md-6 margin-top-20"></div>
</div>
}
<hr />
<footer>
<p>© 2016 - MVC Bank - {"name":"serial","ValueProvider":"ASPNETMVC5ATM1"}</p>
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
</body>
</html>
I've been working on a MVC 4 web app. I'm injecting a partial view into my index view, but no Resources that have been rendered in my layout page are being used by my partial view. For example, I can not use any jquery functions on any element inside the partial. So is there anything that could be causing this issue?
I've actually done it 2 ways: through razor and through jquery. I want to use jquery, but it wont work with it after its been rendered.
<script>
$("#Display div").click(function () {
var id = $(this).first().find("input").attr("value");
$.ajax({
type: 'GET',
url: '#Url.Content("~/Home/GetActors")',
data: {id:id},
success: function (result)
{
$('#Display').html(result);
}
});
});
</script>
`#Ajax.ActionLink("Edit", "GetActors", new { id = actor.ActorId }, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "Display", InsertionMode = InsertionMode.Replace })`
public PartialViewResult GetActors(int id)
{
return PartialView("GetActors",Db.Actors.Find(id));
}
Layout View
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link href="~/Content/bootstrap-rating.css" rel="stylesheet" />
</head>
<body style="background:url(http://res.cloudinary.com/arcangel210291/image/upload/v1416947586/1389017_do9nat.jpg) no-repeat fixed; background-size:cover;">
<nav class="navbar navbar-inverse" role="navigation" style="border-radius:0px;">
<div class="container">
<ul class="nav navbar-nav">
<li><a><span style="color:#B99A77" class="glyphicon glyphicon-facetime-video"></span></a></li>
<li><a>Movies</a></li>
<li><a>Actors</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn dropdown-toggle btnMovies" data-toggle="dropdown">ALL<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a>Somthing</a></li>
</ul>
</div>
<input type="text" class="form-control" placeholder="Search" />
<span class="input-group-btn">
<button type="button" class="btn btnMovies"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</form>
</div>
</nav>
<div class="container glass" id="NavContainer">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
#Scripts.Render("~/bundles/starrating");
#RenderSection("scripts", required: false)
</body>
</html>
Index
#model IEnumerable<S00133799_CA2.Models.MovieModels.Movie>
<nav class="navbar navbar-inverse container" id="userControls">
<ul class="nav nav-pills nav-justified">
<li role="presentation">#Ajax.ActionLink("Create New!", "","", new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "Display", InsertionMode = InsertionMode.Replace }, new { #class = "btn btn-default btnMovies" })</li>
</ul>
<ul class="nav nav-pills nav-justified">
<li role="presentation" ><p class="navbar-text"><span class="glyphicon glyphicon-list"></span> Sort By : </p></li>
<li role="presentation">#Ajax.ActionLink("Name △", "OrderBy", new { OrderType = "Name" }, new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "Display", InsertionMode = InsertionMode.Replace }, new { #class = "btn btn-default btnMovies" })</li>
<li role="presentation">#Ajax.ActionLink("Date △", "OrderBy", new { OrderType = "Date" }, new AjaxOptions() { HttpMethod="POST", UpdateTargetId="Display", InsertionMode= InsertionMode.Replace }, new { #class = "btn btn-default btnMovies" })</li>
<li role="presentation">#Ajax.ActionLink("Rating △", "OrderBy",new { OrderType = "Rating" }, new AjaxOptions() { HttpMethod="POST", UpdateTargetId="Display", InsertionMode = InsertionMode.Replace }, new { #class = "btn btn-default btnMovies" })</li>
<li role="presentation">#Ajax.ActionLink("All Movies", "OrderBy", new { OrderType = "ChangeToMovies" }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "Display", InsertionMode = InsertionMode.Replace }, new { #class = "btn btn-default btnMovies" })</li>
<li role="presentation">#Ajax.ActionLink("All Actors", "OrderBy", new { OrderType = "ChangeToActors" }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "Display", InsertionMode = InsertionMode.Replace }, new { #class = "btn btn-default btnMovies" })</li>
</ul>
</nav>
<div id="Display" class="row">
#foreach (var movie in Model)
{
<div class='col-xs-6 col-md-4'>
<div class='thumbnail' style="cursor:pointer">
<img src="#movie.MovieImage" class="img-responsive" style="height:310px; width:100%" alt='...'/>
<div class='caption text-center panel panel-warning' style='margin-bottom:3%;padding:0;'>
<h4 style='background: #B99A77;color: #ffffff;margin-top: 0;padding: 2%;border-radius: 2px;'>#Html.DisplayFor(modle=>movie.MovieName)</h4>
<h5><b class="text-center">#Html.DisplayFor(model=> movie.ReleaseDate)</b></h5>
<input type="hidden" value="#movie.MovieId" />
</div>
</div>
</div>
}
</div>
<nav class="navbar navbar-inverse container" id="footernav">
<ul class="pager">
#if((int)Session["PageNo"] != 0)
{<li class="disabled"><a>Previous</a></li>}
else{
<li> #Ajax.ActionLink("Previous", "Previous", "", new AjaxOptions { HttpMethod="GET", UpdateTargetId="Display", InsertionMode=InsertionMode.Replace })</li>
}
<li>#Ajax.ActionLink("Next", "Next", "", new AjaxOptions { HttpMethod="GET", UpdateTargetId="Display", InsertionMode=InsertionMode.Replace })</li>
</ul>
</nav>
#section scripts
{
<script>
$(document).ready(function(){
$("#Display div").on("click",function () {
var id = $(this).first().find("input").attr("value");
$.ajax({
type: 'GET',
url: '#Url.Content("~/Home/GetMovies")',
data: {id:id},
success: function (result)
{
$("#userControls").hide();
$("#footernav").hide();
$('#Display').html(result);
}
});
});
});
</script>
}
Seams that you have is because you html is rendered on the page dynamically using ajax request after your selectors are assigned, you have 2 options:
1- reload your js files or code again after injecting your partial view.
2- use on or live for older jquery versions on your selectors and events (I recommend this if possible).
SOLVED
I actually Did somthing realy stupid. I placed the scripts into the partial itself to load them again like Amr has said i had done this before but left out one script that threw the whole thing. Thanks for the help anyway guys. Much appreciated
I am trying to render a jquery popup onto a razor view. I have created a link in my view but when I click it I get a 404 error saying the page can't be found.
I have used jsbin.com so I know the jquery code is correct but clearly I am missing something, I guess I am either incorrectly rendering the javascript or I am trying to put the popup in a wrong file.
Can anyone explain what I have done wrong and why?
partial cshtml: popup
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal confirmation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$("#enableDisable").click(function () {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:220,
width:475,
modal: true,
buttons: {
"OK": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
});
</script>
</head>
<body>
<a id="Link">
click me
</a>
<div id="dialog-confirm" title="Empty the recycle bin?">
Are you sure you want to change the status of: #ViewBag.UserName
</div>
</body>
</html>
My Razor view requring the popup
#{
ViewBag.Title = "User Details";
}
<h2>User Details</h2>
<p><b>#ViewBag.UserName</b></p>
<table class="table">
<tr>
<th>
Application Name
</th>
<th>
Status
</th>
<th>
</th>
</tr>
#if (ViewBag.ApplicationStatuses.Count > 0)
{
#*Iterating Amadeus model using ViewBag *#
foreach (var item in ViewBag.ApplicationStatuses)
{
<tr>
<td>
#item.Key
</td>
<td>
#item.Value
</td>
<td>
<a href="~/Views/Home/ChangeStatusConfirmation" id="enableDisable">
Change Status
</a>
</td>
<td>
#Html.ActionLink("View Permissions", "Permissions", new { userID = View Bag.UserName, applicationName = item.Key })
</td>
</tr>
}
}
</table>
finally my layout view:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Business Security System</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.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("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })*#
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("MyTeam", "MyTeam", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#*#Html.Partial("_LoginPartial")*#
<p style="color:grey; text-align:right; margin-top:15px">#System.Security.Principal.WindowsIdentity.GetCurrent().Name</p>
</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>
Any assistance will be greatly appreciated.
I ended up using an action link in my view instead of the action tab I used before as shown:
#Html.ActionLink("Change Status", "ChangeStatus", "Home", new { userName = ViewBag.UserName, applicationName = item.Key, currentStatus = item.Value }, new { #class = "enableDisable" })
and instead of having the Jquery code in a seperate file I put the code I needed in the view file and ran it from there.
<div id="dialog-confirm" title="Change Status?">
Are you sure you want to change the status of: #ViewBag.UserName
</div>
#section Scripts {
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$("#dialog-confirm").hide();
$(function () {
$(".enableDisable").click(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 220,
width: 475,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
window.location.href = "~/Home/ChangeStatus/username/dbname/currentstatus/"
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
});
</script>
}
This is not the most elegant solution but it works well in the solution I am working in.
href="~/Views/Home/ChangeStatusConfirmation" doesn't seems right.
It should be ~/ControllerName/ActionName. also if you are handling the click event you should not use the href attribute.