I am doing my application in MVC. I have registration and Login links. I have implemented Login link in all pages. If i click login it is moving to the server side(controller) and opening. MY problem is from whatever page i click login it needs to open in the same window in popup. It means that it doesn't go the server side.
My code is
#model SYTMain.Models.Login
#{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout_for_login.cshtml";
//Layout = "~/Views/Shared/_Layout_for_login_registration .cshtml";
}
<center><h2>Login</h2></center>
<div id="dialog-modal" title="Login">
#using (Html.BeginForm())
{
#Html.ValidationSummary(true, "Login failed. Check your login details.");
<div style=" margin-bottom: 400px;">
<fieldset>
<legend>Login</legend>
<div class="editor-label">
#Html.LabelFor(u => u.EmailID)
</div>
<div class="editor-field">
#Html.TextBoxFor(u => u.EmailID)
#Html.ValidationMessageFor(u => u.EmailID)
</div>
<div class="editor-label">
#Html.LabelFor(u => u.Password)
</div>
<div class="editor-field">
#Html.PasswordFor(u => u.Password)
#Html.ValidationMessageFor(u => u.Password)
</div>
#*<div class="editor-label">
#Html.CheckBoxFor(u => u.RememberMe)
#Html.LabelFor(u => u.RememberMe)
</div>*#
<input type="submit" value="Log In" />
</fieldset>
</div>
}
</div>
Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
#*<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />*#
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
#Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-ui-1.8.24.js"></script>
<script src="~/Scripts/Popup/jquery-1.5.1.min.js"></script>
<script src="~/Scripts/Popup/jquery-ui-1.8.11.js"></script>
#Scripts.Render("~/bundles/modernizr")
<script>
$(function () {
$("#dialog-modal").dialog({
width: 400,
height: 200,
show: {
effect: "shake",
duration: 100
},
hide: {
effect: "explode",
duration: 1000
}
});
});
</script>
</head>
<body style=" margin: 0px auto;overflow: scroll; overflow-x: hidden; /* width: 1330px; */height: auto;">
<div class="layoutouter">
<div class="layoutlogo">
#Html.ActionLink("Sell Your Time", "Index", "Home")
</div>
<div class="layoutmenu">
#if (!string.IsNullOrEmpty(Convert.ToString(Session["EmailID"])))
{
#Html.ActionLink("Signout", "Logout", "CU")
}
else
{
#Html.ActionLink("Register", "Create", "CU")
}
</div>
<br /><br />
#*<strong>Welcome #Session["EmailID"]</strong>*#
<div>
#RenderSection("featured", required: false)
</div>
</div>
<div style="width:1000px ; margin:0px auto;">
#RenderBody()
</div>
<div class="layoutfooter">
<div class="layoutfooter_data">
<div class="layout_location">
#Html.ActionLink("Change Location", "yy", "zz")
<span>|</span>
</div>
<div class="layout_feedback">
#Html.ActionLink("Feedback", "yy", "zz")
<span>|</span>
</div>
<div class="layout_help">
#Html.ActionLink("Help", "yy", "zz")
</div>
</div>
<div class="footer_copy">
<p>© #DateTime.Now.Year - acutesoftsys</p>
</div>
<div class="footer_condition">
<div class="footer_term">
<span>|</span>
#Html.ActionLink("Term & Condition", "", "")
</div>
<div class="footer_policy">
#Html.ActionLink("Privacy Policy", "yy", "zz")
</div>
</div>
</div>
#RenderSection("scripts", required: false)
</body>
</html>
My controller code is
[HttpPost, ValidateInput(false)]
public ActionResult Login(Login loginDetails)
{
if (ModelState.IsValid)
{
using (SYTEntities context = new SYTEntities())
{
var LoginUser = context.tblUsers.Where(a => a.EmailID == loginDetails.EmailID && a.Password == loginDetails.Password).FirstOrDefault();
if (LoginUser != null)
{
FormsAuthentication.SetAuthCookie(loginDetails.EmailID, loginDetails.RememberMe);
Session["EmailID"] = LoginUser.EmailID;
Session["UserID"] = LoginUser.UserID;
return RedirectToAction("CalendarView", "Appt", new { CustomerUserid = Session["UserID"]});
// return RedirectToAction("Details/" + Session["UserID"]);
}
else
{
ModelState.AddModelError("", "Login data is incorrect!");
}
}
}
return View(loginDetails);
}
Please help me to achieve this .
Thanks in Advance
Your controller code should look something like this
public ActionResult YourControllerAction( int Userid )
{
//Add your logic here
return PartialView( "UserDetails", model );
}
Your partial view should look like this
#model Models.Login
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>login</title>
</head>
<body>
<div>
/*Your markup here*/
</div>
</body>
</html>
Your jQuery code should look something like this.
$('#loginlinkid').on('click', function(evt) {
var $loginDiv = $('#PopUpDiv')
$.get(urlOfYourAction, function(data) {
$loginDiv.replaceWith(data);
});
//Add code to open popup here. eg..bootstrap modal dialog
});
Similar post here Render a partial view inside a Jquery modal popup on top of a parent view
Related
I've read the article about localization. As I understood, kendo provides localization for text in its buttons for different cultures. I did what is written in the article, specified russian language, but buttons didn't translate.
_Layout:
#using Microsoft.AspNetCore.Mvc.Localization
#inject IViewLocalizer _localizer
#{
const string appName = "Accounter";
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>#_localizer[(string)ViewData["Title"]] - #appName</title>
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
#* <link rel="manifest" href="icons/site.webmanifest"> *#
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script src="~/js/layout.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.bootstrap-v4.min.css"/>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.aspnetmvc.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/cultures/kendo.culture.ru.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/cultures/kendo.culture.en.min.js"></script>
<script>kendo.culture("ru");</script>
<link rel="stylesheet" href="~/css/site.css"/>
</head>
<body>
<header>
<nav class="navbar navbar-expand navbar-light">
<div class="container">
<a class="navbar-brand" asp-action="Index" asp-controller="GeneralInformation">#appName</a>
<div class="navbar-nav">
#if (User.Identity.IsAuthenticated)
{
<a class="nav-link text-dark" asp-controller="Authentication" asp-action="LogOut">#_localizer["Log out"]</a>
}
else
{
<a class="nav-link text-dark" asp-controller="Authentication" asp-action="Index">#_localizer["Log in"]</a>
}
</div>
<partial name="_SelectLanguagePartial"/>
</div>
</nav>
</header>
<div></div>
<div class="pt-5 backdrop">
<div class="container rounded-3 p-3">
<main role="main">
#RenderBody()
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
#await RenderSectionAsync("Scripts", false)
</body>
</html>
Usage of grid:
#{
var grid = Html.Kendo().Grid<UserVM>()
.Name("Grid")
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("gridError"))
.PageSize(10)
.ServerOperation(false)
.Model(model =>
{
model.Id(e => e.Id);
model.Field(e => e.Role).DefaultValue((RoleVM)ViewData["DefaultRole"]);
})
.Read("Read", "GeneralInformation")
.Create("Read", "GeneralInformation")
.Update("Update", "GeneralInformation")
.Destroy("Delete", "GeneralInformation")
)
.Columns(columns =>
{
columns.Bound(e => e.FullName).Title(_userLocalizer["Full name"]);
columns.Bound(e => e.Role.Name).Title(_userLocalizer["Role"]).EditorTemplateName("RoleEditor");
columns.Bound(e => e.Position).Title(_userLocalizer["Position"]);
columns.Bound(e => e.PhoneNumber).Title(_userLocalizer["Phone number"]);
columns.Bound(e => e.Email).Title(_userLocalizer["Email"]);
})
.Editable(GridEditMode.InLine)
.Sortable()
.Pageable(pager => pager
.Input(true)
.PageSizes(true)
)
.Scrollable(scroll => scroll
.Virtual(GridVirtualizationMode.RowsAndColumns)
);
if (User.IsInRole("Administrator"))
{
grid
.Columns(columns =>
{
columns.Command(command =>
{
command.Edit().HtmlAttributes(new { #class = "mb-2 mb-xxl-0" });
command.Destroy();
});
})
.ToolBar(toolbar => { toolbar.Create(); });
}
if (!User.IsInRole("Employee"))
{
grid.ToolBar(toolbar => { toolbar.Search(); });
}
}
#grid
Setting culture in controller:
public override void OnActionExecuting(ActionExecutingContext context)
{
CultureInfo.DefaultThreadCurrentCulture = CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("ru");
base.OnActionExecuting(context);
}
Try to add the culture again in the view:
#{
var culture = System.Globalization.CultureInfo.CurrentCulture;
}
<script>
kendo.culture("#culture");
</script>
Yes, it provides localization, but only for text on buttons. The hint text on search field, didn't translate. Problem of localizing on russian was that the right culture name is ru-RU. So need to change to this:
public override void OnActionExecuting(ActionExecutingContext context)
{
CultureInfo.DefaultThreadCurrentCulture = CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("ru-RU");
base.OnActionExecuting(context);
}
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/cultures/kendo.culture.ru-RU.min.js"></script>
<script>kendo.culture("ru-RU");</script>
I have been trying to get chips autocomplete to work as part of a project.
I have stripped code right back to remove any odd effects and replicated code as on the Materialize site. As in attached code I can get autocomplete to work as expected but not with chips.
I have tried with Chrome and Edge browsers and various combinations of tags and class names but still unable to make it work.
So now I need some help!
What have I missed?
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container" >
<!-- autocomplete from materialize web site -->
<div class="row">
<div class="col s12">
<div class="input-field col s6">
<i class="material-icons prefix">textsms</i>
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input">from materialize web site</label>
</div>
</div>
</div>
<!-- chip autocomplete from materialize web site -->
<div class="row">
<div class="col s6">
<div id="chips-autocomplete" class="chips chips-autocomplete " ></div>
</div>
</div>
</div> <!-- container end -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
options={"data": {"abel":null,"baker":null,"charlie":null},
"placeholder":'fred'}
console.log (options)
var autoElems = document.querySelectorAll('.autocomplete');
var attemptElems = document.getElementById("attempt");
var chipsElems = document.getElementById("chips-autocomplete");
var auto = M.Autocomplete.init(autoElems, options);
var chips = M.Chips.init(chipsElems, options);
});
</script>
</body>
</html>
The data init for chips-autocomplete is incorrect. From the docs:
$('.chips-autocomplete').chips({
autocompleteOptions: {
data: {
'Apple': null,
'Microsoft': null,
'Google': null
},
limit: Infinity,
minLength: 1
}
});
With Vanilla JS:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.chips-autocomplete');
var instances = M.Chips.init(elems, {
autocompleteOptions: {
data: {
'Apple': null,
'Microsoft': null,
'Google': null
},
limit: Infinity,
minLength: 1
}
});
});
you are simply setting data (in quotes, when there should be no quotes). It should be autocompleteOptions as an object, and then data inside this.
I am new asp.net mvc4 with entity frame work, I have designed rating in cshtml file,Pls help me to get a rated value in Controller. Thanks in advance.
This is my cshtml code for rating
{
#{
ViewBag.Title = "Index";
}
<h2>Index rating</h2>
<h2>rating</h2>
#*<form method="post" id="signin" action="#Url.Action("rating", "Rating")">*#
#if (Request.IsAuthenticated)
{
<form method="post" id="signin" action="#Url.Action("rating", "Rating")">
<p>
#DateTime.Now
</p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="~/Scripts/jquery.js"></script>
<script type="text/javascript" src="~/Scripts/rating.js"></script>
<link rel="stylesheet" type="text/css" href="~/Styles/rating.css" />
<script type="text/javascript">
$(function () {
$('.rating').rating();
$('.ratingEvent').rating({ rateEnd: function (v) { $('#result').text(v); } });
});
</script>
<input type="text" class="ratingEvent rating5" #*id="result"*# value="rating" />
<div><b id="result">5</b> start(s)</div>
<p> </p>
</form>
}
}
This is my Controller code
{
[HttpGet]
public ActionResult rating(int ratedvalue)
{
using (var db = new Project.Models.EntitiesContext())
{
var value= new Project.Models.Tbl_Rating();
var rat = db.Tbl_Rating.FirstOrDefault(u => u.Rating == ratedvalue);
value.Rating = Convert.ToInt32(rat);
return View();
}
}
}
}
try like this
View:
<form method="post" id="signin" action="#Url.Action("rating", "Rating")">
**YOUR CODE**
<input type="text" class="ratingEvent rating5" name="rating" value="rating" /> //Add name attribute
<input type="submit" />
</form>
Controller:
public ActionResult rating(FormCollection form)
{
int ratedvalue=form["rating"]
}
I'm developing an MVC 4 web application and using signalR library to make a real time notification system.
I have a working script that I use in master page called _Layout.cshtml.
here's the script in _Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
#Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.signalR-2.0.1.min.js"></script>
<script src="~/signalr/hubs"></script>
</head>
<body >
<header dir="rtl">
<table align="center" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td style="width:30%; height:40px;" valign="top"><img src="~/Images/header_logo3.png" /></td>
<td style="width: 40%; height: 40px; " valign="top"> <a href='#Url.Action("Index","Home")'><img class="header_logo" src='#Url.Content("~/Images/header_logo2.png")' /></a></td>
<td style="width: 30%; height: 40px; " valign="top" ><img src="~/Images/header_logo4.png" /></td>
</tr>
</table>
<h2>Index</h2>
<span id="mySpanTag"></span>
<script type="text/javascript">
//var notificationHub = $.connection.notificationHub;
$(function () {
//Create Hub on Air
var chat = $.connection.notificationHub;
//Messages
$messages = $("#mySpanTag");
//Client Side Method To Access From Server Side Method
chat.client.sendMessage = function (msg) {
$messages.html(msg);
}
$.connection.hub.start(function () {
chat.server.sendMessage("Hello World!");
});
});
</script>
</header>
<div id="wrapper" dir="rtl">
<div id="Smenu" class="visible">
#{Html.RenderAction("Menu", "SettingsMenu", new { id = "nir"});}
</div>
#RenderSection("JavaScript", false)
<section>
#RenderBody()
</section>
</div>
<footer></footer>
</body>
</html>
the Hub class:
using System.Web;
using Microsoft.AspNet.SignalR.Hubs;
using Microsoft.AspNet.SignalR;
using System.Collections.Concurrent;
using System.Threading.Tasks;
namespace HaifanetMobile.Hubs
{
public class NotificationHub : Hub
{
public void SendMessage(string msg)
{
Clients.All.sendMessage(msg);
}
}
}
Everything goes ok and I see the massage method called from the hub class in my page, except that
this script is running only on the index.cshtml (startup page) and not in all the web pages in the project or in a specific one of them. e.g not working and the script is the same as you can see:
#model schoolnetMobile.Models.UserModel
#{
ViewBag.Title = "Details";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<span id="mySpanTag"></span>
<script type="text/javascript">
//var notificationHub = $.connection.notificationHub;
$(function () {
//Create Hub on Air
var chat = $.connection.notificationHub;
//Messages
$messages = $("#mySpanTag");
//Client Side Method To Access From Server Side Method
chat.client.sendMessage = function (msg) {
$messages.html(msg);
}
$.connection.hub.start(function () {
chat.server.sendMessage("Hello World!");
});
});
</script>
<br /><br />
#if (Request.IsAuthenticated) {
<h4>profile: #Model.UserName</h4>
if (User.Identity.Name == #Model.UserName)
{
<br />
<ul style="list-style-type: none;">
<li>first name: #Model.FirstName;</li>
<li>username: #Model.UserName</li>
<li>schoolname: #Model.SchoolName</li>
<li>role: #Model.Role</li>
</ul>
}
else
{
<br />
<ul style="list-style-type: none;">
<li>username: #Model.UserName</li>
<li>school: #Model.SchoolName</li>
<li>role: #Model.Role</li>
</ul>
}
}
else
{
<h4>need to login</h4>
}
Update: I placed the script only if detail.cshtml. Looks like
there is a problem in this line
var chat = $.connection.notificationHub;
as only the first alert("hi") pops up and not the second...
#model HaifanetMobile.Models.UserModel
#{
ViewBag.Title = "Details";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section Scripts
{
<script type="text/javascript">
$(function () {
//Create Hub on Air
alert("hi");
var chat = $.connection.notificationHub;
alert("hi1");
//Messages
$messages = $("#messages");
alert("hi2");
//Client Side Method To Access From Server Side Method
chat.client.addMessage = function (frm, msg) {
$messages.append("<br /><b>" + frm + ":</b>" + msg);
}
alert("hi3");
$("#txtMsg").keypress(function (e) {
//when enter
if (e.which == 13) {
alert("hi4");
//get value of input
var input = $(this).val();
//send message to "Server Side Method"
chat.server.sendMessage("#Session.SessionID", input);
//Reset TextBox
$(this).val("");
}
});
//Hub Starting
$.connection.hub.start();
});
</script>
}
<div>Your ID: #Session.SessionID</div>
<input type="text" id="txtMsg" />
<div id="messages">
</div>
<h2>Index</h2>
<span id="mySpanTag"></span>
<br /><br />
#if (Request.IsAuthenticated) {
<h4>user profile: #Model.UserName</h4>
if (User.Identity.Name == #Model.UserName)
{
<br />
<ul style="list-style-type: none;">
<li>first name: #Model.FirstName;</li>
<li>user name: #Model.UserName</li>
<li>school: #Model.SchoolName</li>
<li>role: #Model.Role</li>
</ul>
}
else
{
<br />
<ul style="list-style-type: none;">
<li>username: #Model.UserName</li>
<li>school: #Model.SchoolName</li>
<li>role: #Model.Role</li>
</ul>
}
}
else
{
<h4>Please login</h4>
}
I am using a Toggle Switch in the settings pane. Problem is that the text in the title and labelOff, labelOn is not visible. I am not sure how can I change the front color or styles from the WinJS.UI.ToggleSwitch so that this text start displaying. Any examples will be highly appreciated.
Here is my html.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="mypage fragment"
id="mysettings"
data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{width:'narrow'}">
<div class="win-header">
<button onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton">
</button>
<div class="win-label">My Settings</div>
</div>
<div class="mytoggle" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{ title:'Test', labelOff: 'Close', labelOn:'Open', checked: true}"></div>
</div>
</body>
</html>
Below is my css
.fragment.mypage .mytoggle .win-title .win-labelOff{
color: green; }
you can refer the css styling classes for WinJS.UI.ToggleSwitch here.
default.js:
app.onsettings = function onsettings(e)
{
e.detail.applicationcommands = {
about: { title: 'About', href: '/pages/settings/about.html' },
};
WinJS.UI.SettingsFlyout.populateSettings(e);
}
/pages/about/about.css:
.myflyout .win-content .mytoggle .win-title
{
color: blue;
}
/pages/about/about.html page:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="/pages/settings/about.css" rel="stylesheet" />
</head>
<body>
<!-- BEGINSETTINGFLYOUT -->
<div class="myflyout" data-win-control="WinJS.UI.SettingsFlyout"
data-win-options="{settingsCommandId:'about'}">
<div class="win-ui-light win-header" >
<button type="button" onclick="WinJS.UI.SettingsFlyout.show()"
class="win-backbutton"></button>
<div class="win-label">About</div>
<img src="/images/smalllogo.png" style="position: absolute; right: 20px;"/>
</div>
<div class="win-content">
<div class="mytoggle" data-win-control="WinJS.UI.ToggleSwitch"
data-win-options="{title: 'example of toggle'}" >
</div>
</div>
</div>
<!-- ENDSETTINGSFLYOUT -->
</body>
</html>
As of 2016 I failed doing this with ".win-title". Instead used ".win-toggleswitch-header".