I am trying to add javascript from partial view to layout.cshtml head section by calling
#RenderSection("scripts", required: false) but failing. Please view my partialview page code.
#{
Layout = null;
}
<div id="modal-login" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" title="Insert Student">
#using (Html.BeginForm("Login", "Home", FormMethod.Post, new { id = "form-login" }))
{
<div style="width:320px; height:320px; padding:0px 15px 15px 15px; border:solid 1px silver">
<div style="width:310px; height:30px; padding-bottom:0px; border:solid 0px red">
<div style="width:320px; height:30px; float:left;">
<div id="loading" style="height:15px; width:120px">
</div>
</div>
</div>
<div style="width:310px; height:30px; padding-bottom:35px; border:solid 0px red">
<div style="width:320px; height:30px; float:left;">
<input type="text" class="textbox" id="tbEmailAddress" name="tbFirstName" size="50" placeholder="First Name" />
</div>
</div>
<div style="width:310px; height:30px; padding-bottom:35px; border:solid 0px red">
<div style="width:320px; height:30px; float:left;">
<input type="text" class="textbox" id="tbPassword" typeof="password" name="tbFirstName" size="50" placeholder="First Name" />
</div>
</div>
<div style="width:320px; height:20px; padding-top:5px; padding-bottom:15px; border:solid 0px red; font-size:9px;">
<div style="width:310px; height:30px; float:left;">
<input id="btnLogin" class="submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="submit" value="Submit" style="border:1px solid gray; width:80px; height:25px ">
</div>
<div style="width:140px; height:30px; float:left;">
</div>
</div>
</div>
}
</div>
#section scripts
{
<script type="text/javascript">
$(document).ready(function () {
$("#modal-login").dialog({
show: "slide",
modal: true,
autoOpen: false,
});
$("#btnLogin").click(function () {
$("#modal-login").dialog("open");
return false;
});
});
</script>
}
And below is layout.chtml head section where iam calling #RenderSection("scripts", required: false) in the second last line of code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#*#Scripts.Render("~/bundles/jqueryui")*#
<link href="~/Content/themes/base/jquery-ui-1.10.4.custom.css" rel="stylesheet" />
#*<script src="~/Scripts/jquery-1.10.2.js"></script>*#
<script src="~/Scripts/jquery-ui-1.10.4.custom.js"></script>
#RenderSection("scripts", required: false)
</head>
Please view my code and suggest if i missed anything? thanks.
the order #section scripts don't work in partialView, erase that and your script work.
but why you try to put the script in the head??
You call JQuery in the head the Script in the partial view works isn't necesary up in the head.
But if I understand your code you make a login form in a partial View for insert in the layout for use in entire web site?
well is more easy if you write the script directly in the head in layout, but better is create a script file with all custom script, mix this with the others scripts in one bundle and finally call this bundle in the head, with this way your site will more faster.
Related
Iam having code with two dialogs one from another, while going back from second dialog to first i have given data-transition as slide but it is not working. Can someone help me please thanks.
Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale="1"">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>
<style>
.ui-simpledialog-screen-modal{
opacity: 0.4;
}
.ui-simpledialog-container {
border: 1px solid rgb(221, 221, 221) !important;
}
.ui-grid-a > div {
padding: 2px;
}
</style>
<script>
$(document).on("pagecreate", "#page1", function () {
$(document).on('click', '#openPopup', function() {
$('#inlinecontent').simpledialog2({
mode: "blank",
headerText: "Select Item(s)",
headerClose: false,
blankContent: true,
themeDialog: 'a',
width: '75%',
zindex: 1000
});
});
$(document).on('click', '#dialogSubmit', function() {
var numChecked = $('#cBoxes').find('[type=checkbox]:checked').length;
if (numChecked > 0){
$(document).trigger('simpledialog', {'method':'close'});
} else {
$('<div>').simpledialog2({
mode: 'blank',
headerText: 'Warning',
headerClose: true,
transition: 'flip',
themeDialog: 'b',
zindex: 2000,
blankContent :
"<div style='padding: 15px;'><p>Please select at least one checkbox first.</p>"+
// NOTE: the use of rel="close" causes this button to close the dialog.
"<a rel='close' data-role='button' href='#'>OK</a></div>"
});
}
});
});
</script>
</head>
<body>
<!-- the page markup -->
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed">
<h1>SimpleDialog2 Chained Popup</h1>
</div>
<div class="ui-content" role="main">
<!-- button that opens the popup -->
<button id="openPopup">Select One or More Item(s)...</button>
</div>
</div>
<!-- the popup markup -->
<div id="inlinecontent" style="display:none" >
<div style="padding: 15px;">
<fieldset id="cBoxes" data-role="controlgroup" >
<legend>Favorite Fruit:</legend>
<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" />
<label for="checkbox-v-2a">Apple</label>
<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" />
<label for="checkbox-v-2b">Banana</label>
<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c" />
<label for="checkbox-v-2c">Orange</label>
</fieldset>
<div class="ui-grid-a">
<div class="ui-block-a"><button id="dialogSubmit" data-theme="b">OK</button></div>
<div class="ui-block-b"><button id="dialogCancel" rel='close'>Cancel</button></div>
</div>
</div>
</div>
</body>
</html>
I created a partial view and I use this partial to another view that it inherit from a _layout m code is true and doesn't have a bug, but when I click on submit it shows this message : (The resource cannot be found). I can't trace this error . please help me . thanks
This is my news.Cshtml:
#model MPortal.Models.WebSite_OpinionDB
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section Body{
#Html.Partial("CreateOpinion")
#Html.Action("CreateOpinion", "User")
}
And this is my _Layout.cshtml :
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<link href="~/Theme/css/bootstrap.css" rel="stylesheet">
<link href="~/Content/CssFramework.css" rel="stylesheet" />
#RenderSection("CSS", required: false)
</head>
<body>
#RenderSection("Body", required: false)
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/modernizr-2.5.3.js"></script>
<script src="~/Theme/js/bootstrap.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
And this is my Partialview :(CreateOpinion.cshtml)
#model MPortal.Models.WebSite_OpinionDB
#section Body{
<div class="" style="float: right; width: 75%">
#Html.Raw(Session["Right"])
#using (Html.BeginForm())
{
<div class="rateit" style="float: right; width: 25%">
<input type="text" maxlength="100" value="name" class="form-control" name="Values" id="NameFamily" />
<br />
<input type="text" maxlength="100" value="email" class="form-control" name="Values" id="Email" />
<br />
#Html.TextAreaFor(x => x.OpinionText, new { #class = "form-control", #placeholder = "opinion" })
<br />
<button class="btn btn-primary" type="submit">submit</button>
</div>
}
<div class="" style="width: 20%; height: 625px; border: 1px solid black; float: left">
#Html.Raw(Session["Left"])
</div>
</div>
<div class="" style="float: right; width: 75%">
#if (ViewData["Success"] != null)
{
<div class="alert alert-success alert-dismissable">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
#(ViewData["Success"] != null ? ViewData["Success"].ToString() : "")
</div>
}
#if (ViewData["UnSuccess"] != null)
{
<div class="alert alert-danger bs-alert-old-docs">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
#(ViewData["UnSuccess"] != null ? ViewData["UnSuccess"].ToString() : "")
</div>
}
</div>
}
and this is my action of partial view :
[ChildActionOnly]
public ActionResult CreateOpinion(MPortal.Models.WebSite_OpinionDB saveop, FormCollection frm)
{
if (!string.IsNullOrEmpty(frm["Values"]))
{
int mtID = (int)MPortal_CL.Globals.GetParam("MetaDataID", 0);
MPortal.Models.WebSite_OpinionDB op = new MPortal.Models.WebSite_OpinionDB();
String[] texts = frm["Values"].Split(',');
.....
.......
}
Remove attribute [ChildActionOnly] and if this does not work please use the overloaded version
#using (Html.BeginForm("CreateOpinion","ControllerName"))
I have the following code snippet for a login home page. I want it to be responsive. how do I make it responsive using jQuery mobile?
Does jqm provide any default css for it?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="./css/custom.css">
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="content">
<img src="./imgs/abc.jpg">
<div class="ui-grid-a">
<div class="ui-block-a"><img src="./imgs/home.jpg">
</div>
<div class="ui-block-b">
<form id="HLogin" method="POST">
<div data-role="fieldcontain">
<label for="url">Username:*</label>
<input class="required" id="Lusername" name="uid_r" type="text" value="">
</div>
<div data-role="fieldcontain">
<label for="url">Password:*</label>
<input id="Lpassword" name="pwd_r" type="password" value="">
</div>
<button data-theme="b" type="submit">Login</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
custom.css:
.ui-block-a {
width:70% !important;
}
.ui-block-b {
width:30% !important;
}
Here you can add your css according screen and add min-width, which you want.
#media screen and (min-width: 320px) {
.ui-block-a {
width:0% !important;
}
.ui-block-b {
width:100% !important;
}
}
#media screen and (min-width: 620px) {
.ui-block-a {
width:70% !important;
}
.ui-block-b {
width:30% !important;
}
}
I have MVC4 project that i want to use Telerik Q2 2013 panel bar in my _layout razor file for showing my menu. it uses a site map. in Telerik website it bind panel bar with controller .but i do not know how can i get controller for my layout page or is it true (it means is it true to use controller for _layout and how can i do this ?)i try section but i cant do any thing.
This is my _layout code:
enter link description here
<!DOCTYPE html>
<html lang="en">
#using StackExchange.Profiling;
#using Telerik.Web.Mvc.UI;
<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")
#Scripts.Render("~/bundles/modernizr")
#(Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group
.Add("telerik.common.min.css")
.Add("telerik.webblue.min.css")
.Add("telerik.rtl.min.css")
.Combined(true)
.Compress(true))
)
</head>
<body>
<div class="container">
<div style="width: 950px; margin: 0 auto;">
<div id="Header" class="span-24 last" style="height: 100px"></div>
<div id="HeaderTitle" class="span-20 last" style="height: 50px">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
</div>
<div id="Content" class="span-24 last" style="height: 400px">
<div id="Menu" class="span-4 last" style="width: 150px; float: right; height: 450px">
<div class="t-rtl">
#{ Html.Telerik().PanelBar()
.Name("PanelBar")
.HtmlAttributes(new { style = "width: 300px;" })
.BindTo("SparepartsManagement")
.Render();
}
</div>
</div>
<div style="float: right; width: 800px; height: 400px;">
<div id="HeadContent" style="height: 50px;">Head Content</div>
<div id="MainContetnt" style="height: 400px;">
#RenderSection("featured", required: false)
#RenderBody()
</div>
</div>
</div>
<div id="footer" class="span-24 last" style="height: 50px; text-align: center">
<h6 class="alt">Copyright ©2013 artec</h6>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
#MiniProfiler.RenderIncludes()
#(Html.Telerik().ScriptRegistrar()
.DefaultGroup(group => group
.Add("telerik.common.min.js")
.Add("telerik.panelbar.min.js")
.Compress(true)))
</body>
</html>
So, if you take a look at the jsfiddle (I posted the code below for consistency) you will see that the input text is centered. However, if I visit the jsfiddle (and on my testing site) on my iPhone (iOS5) the text is just left-aligned. So, am wondering do you guys maybe know is this a know issue (googled - seems not) and do you know of a workaround.
css:
.centerText{
text-align: center;
}
js:
$(document).ready(function(){
$( "#popupLogin" ).popup( "open" );
});
html:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>test page</h1>
</header>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<h3 class="centerText">Register free!</h3>
<div class="popup">
<form>
<input type="email" name="email" id="email" class="centerText" placeholder="email" data-theme="a"/>
<button type="submit" data-theme="b">Sign me up</button>
<p class="centerText">
text1<br/>
text2<br/>
etc...<br/>
</p>
</form>
</div>
</div>
</section>
</body>
</html>
Here some tinkering from your jsFiddle: http://jsfiddle.net/Twisty/jb8Jx/2/ Just shows you some ways to try and move the placeholder about.
HTML
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>test page</h1>
</header>
<div data-role="content">
<label>Left Align</label><input type="text" placeholder="email" class="leftText">
<label>Right Align</label><input type="text" placeholder="email" class="rightText">
<label>Center Text</label><input type="text" placeholder="email" class="centerText">
<label>Pad Left</label><input type="text" placeholder="email" class="leftPadText">
</div>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<h3 class="centerText">Register free!</h3>
<div class="popup">
<form>
<input type="email" name="email" id="email" class="centerText" placeholder="email" data-theme="a" style="text-align: center;"/>
<button type="submit" data-theme="b">Sign me up</button>
<p class="centerText">
text1<br/>
text2<br/>
etc...<br/>
</p>
</form>
</div>
</div>
</section>
</body>
</html>
CSS
input.centerText{
text-align: center;
}
input.leftText {
text-align: left;
}
input.rightText {
text-align: right;
}
input.leftPadText {
padding-left: 220px;
}