I am using asp.net web forms for developing mobile application
My Code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MobileApplication.Default" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Mobile WebForms</title>
<meta charset="urf-8" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
body
{
font-family:Verdana;
height: 119px;
}
label
{
font-size:11pt;
font-family: Arial, Helvetica, sans-serif;
display:block;
margin-right:50px;
}
input[type=text]
{
width:200px;
height:15px;
margin-left:15px
}
.content
{
width:350px;
margin:0px auto;
}
header
{
width:350px;
text-align:center;
font-size:15px;
font-weight:bold;
}
.button
{
width:350px;
text-align:center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div data-role="content">
<asp:Table ID="Table1" runat="server" GridLines="Both" Height="107px" Width="210px">
<asp:TableRow runat="server">
<asp:TableCell runat="server">
<asp:Label ID="Label1" runat="server" Text="Request ID"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" Text="9015/DOM/NDA/0711"></asp:TextBox>
</asp:TableCell>
<asp:TableCell runat="server">
<asp:Label ID="Label2" runat="server" Text="Request Type" ></asp:Label>
<asp:TextBox ID="TextBox2" runat="server" Text="Domestic Travel - Self (Employee)"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow runat="server">
<asp:TableCell runat="server">
<asp:Label ID="Label3" runat="server" Text="Request Status"></asp:Label>
<asp:TextBox ID="TextBox3" runat="server" Text="Pending With L1 Manager"></asp:TextBox>
</asp:TableCell>
<asp:TableCell runat="server">
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
</form>
</body>
</html>
I am getting below output in emulator but I want my page to shrink and fit in mobile display.
My web page output is:
This output should shrink and fit into mobile.I have used viewport tag to do this but I am not getting the desired output. Please help me to do this task. Is iquery mobile helpful in doing this?
There are many combination you can use, i would suggest below one,
1) use this viewport tag, <meta name="viewport" content = "width =device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
2) Use a fluid layout, twitter bootstrap is a good library
Related
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.
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>
I have a multi-level Layout master pages in an ASP.NET MVC 4.
I have the following:
<title>#ViewBag.Title</title>
The order of Layout pages is as follows:
_Layout.cshtml
_SubLayout.cshtml (based on _Layout.cshtml)
Index.cshtml (based on _SubLayout.cshtml)
I am setting the #ViewBag.Title inside Index Action. However, I get the following exception:
Value cannot be null or empty. Parameter name: contentPath
Here is the code I have. I am simply making the code of ASP.NET Design Patterns books work for VS 2012 / MVC 4
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<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" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="header">
<span><a href="#Url.Content("")">
<img alt="Agatha's Clothing Store"
src="#Url.Content("/Content/Images/Structure/lg_logo.png")"
border="0" /></a></span>
</div>
<div id="headerSummary">
#RenderSection("headerBasketSummary", required: false)
</div>
<div class="topBarContainer">
<div id="background">
<div id="navigation">
#RenderSection("MenuContent", required: false)
</div>
<div id="content">
#RenderBody()
</div>
<div style="clear: both;" />
</div>
</div>
#Html.Partial("_SiteFooter")
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-jtemplates.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/agatha-common-scripts.js")"></script>
</body>
</html>
_ProductCatalogProduct.cshtml
#model BaseProductCatalogPageView
#using Agathas.Storefront.Controllers.ViewModels.ProductCatalog
#using Agathas.Storefront.UI.Web.MVC.Helpers
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
#if (IsSectionDefined("MenuContent"))
{
#RenderSection("MenuContent", required: false)
}
else
{
#Html.Partial("_Categories", ((BaseProductCatalogPageView)Model).Categories)
}
#RenderBody();
Index.cshtml
#model HomePageView
#using Agathas.Storefront.Controllers.ViewModels.ProductCatalog
#using Agathas.Storefront.Services.ViewModels
#using Agathas.Storefront.UI.Web.MVC.Helpers
#{
Layout = "~/Views/Shared/_ProductCatalogLayout.cshtml";
ViewBag.Title = "Home Page";
}
<img width="559" height="297"
src="#Url.Content("~/Content/Images/Products/product-lifestyle.jpg")"
style="border-width: 0px; padding: 0px; margin: 0px" />
<div style="clear: both;"></div>
<h2>Top Products</h2>
<div id="items" style="border-width: 1px; padding: 0px; margin: 0px">
<ul class="items-list">
#foreach (ProductSummaryView product in Model.Products)
{
<li class="item-detail">
<a class="item-productimage-link" href="#Url.Action("Detail", "Product", new { id = product.Id }, null)">
<img class="item-productimage" src="#Url.Content("~/Content/Images/Products/" + product.Id.ToString() +".jpg"))" /></a>
<div class="item-productname">#Html.ActionLink(product.BrandName + " " + product.Name, "Detail", "Product", new { id = product.Id }, null)</div>
<div class="item-price">#product.Price</div>
</li>
}
</ul>
</div>
Many thanks
This piece of code is throwing the exception: <a href="#Url.Content("")">. This happens because contentPath parameter of Url.Content method cannot be null or empty.
This can happen if you are assigning a value in the Child Razor view file that is also set in the parent one, but is displayed in a partial called by the Layout.cshtml
For example
_Layout.cshtml
|
(parent of)
|
Parent.cshtml
|
(parent of)
|
Page1.cshtml
In Page1.cshtml I do
ViewBag.Title= "Value1";
In Parent.cshtml I do the same but using the Umbraco call:
ViewBag.Title = Umbraco.Field("value").ToString();
The fix is to remove the assignment in Parent.cshtml. This appears to be a bug and I'm afraid that this is the only fix I've found. Hope it helps you out...
You should check if path not null or empty before use it as source of image
#foreach (var post in Model)
{
<div class="col-md-6">
<div class="product-list post-list">
#if (!string.IsNullOrWhiteSpace(post.Photo))
{
<a href="#" class="product-list-img">
<img src="#Url.Content(post.Photo)" alt="">
</a>
}
</div>
</div>
Ive looked everywhere for this. How can a link specify the title of a tab and url to load?
Something like:
Create new tab dynamically
And how can I close the tab?
The closest I found is http://www.dhtmlgoodies.com/scripts/tab-view/tab-view.html but id prefer to use jquery
Thanks
UPDATE
I found jeasyui and looks really simple but Im having some problems. heres my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height: 100%; overflow: hidden;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="jeasyui/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jeasyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
function open1(title,plugin){
if ($('#tt').tabs('exists',title)){
$('#tt').tabs('select', title);
} else {
$('#tt').tabs('add',{
title:title,
href:plugin,
closable:true,
extractor:function(data){
var tmp = $('<div></div>').html(data);
data = tmp.find('#content').html();
tmp.remove();
return data;
}
});
}
}
</script>
</head>
<body class="easyui-layout" style="text-align:left">
<div region="north" border="false" style="background:#666;text-align:center">
<div id="header-inner">
<table cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td rowspan="2" style="width:20px;">
</td>
<td style="height:52px;">
<div style="color:#fff;font-size:22px;font-weight:bold;">
TEST
</div>
</td>
<td style="padding-right:5px;text-align:right;vertical-align:bottom;">
</td>
</tr>
</table>
</div>
</div>
<div region="west" border="false" split="true" title="Menu" style="width:250px;padding:5px;">
<ul class="easyui-tree">
<li iconCls="icon-base"><span>Base</span><ul>
<li iconCls="icon-gears">test</li>
<li iconCls="icon-gears">test1</li>
<li iconCls="icon-gears">test2</li>
<li iconCls="icon-gears">test3</li>
</ul>
</div>
<div region="east" border="false" split="true" title="Live " style="width:250px;padding:5px;">
<h1>Hello</h1>
</div>
<div region="center" border="false">
<div id="tt" class="easyui-tabs" fit="true" border="false" plain="true">
<div title="Welcome" href="dashbord.php"></div>
</div>
</div>
</body>
</html>
It adds a new tab with a title but it doesn't load the URL(demo.php)
Use jQuery UI !!!
http://jqueryui.com/demos/tabs/#manipulation
I'm working with some nested datalist controls and cannot get the SP parameters for my nested stored procedure to work.
In debug I can see that SqlDataSource2.SelectParameters.Add("Section",oLabel.Text.ToString()); is getting the correct value from the label but when the results display I always get the results for the last parameter added?
I'm guessing I need to clear the parameters in some way each time the nested datalist is bound but if I add code to do that it results in an error that I have not specified the parameters?
My code is below, you'll see that eventually I will have 3 nested datalists inside each other - or that's the plan.
Thanks for any suggestions
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="nhscsharprepeater._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# Import Namespace="System.Web" %>
<%# Import Namespace="System.Web.UI" %>
<%# Import Namespace="System.Data" %>
<script type="text/C#" runat="server">
protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
{
DataList oList = (DataList)e.Item.FindControl("Datalist2");
Label oLabel = (Label)e.Item.FindControl("lblSection");
DataList oList2 = (DataList)oList.FindControl("Datalist3");
SqlDataSource2.SelectParameters.Clear();
SqlDataSource2.SelectCommand = "report_DistinctSubSections";
SqlDataSource2.SelectParameters.Add("Section",oLabel.Text.ToString());
oList.DataBind();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:productfolioConnectionString %>"
SelectCommand="report_DistinctSection" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:productfolioConnectionString %>"
SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:Parameter Name="Section" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:productfolioConnectionString %>"
SelectCommand="report_getReports" SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:Parameter Name="SubSection" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" RepeatColumns="2" RepeatDirection="Horizontal" OnItemDataBound="DataList1_ItemDataBound">
<ItemTemplate>
<asp:Label Runat="server" text='<%# DataBinder.Eval(Container.DataItem, "Section") %>' ID="lblSection">
</asp:Label>
<br />
<asp:datalist id="Datalist2" runat="server" DataSourceID="SqlDataSource2">
<ItemTemplate>
<asp:Label Runat="server" text='<%# DataBinder.Eval(Container.DataItem, "SubSection") %>' ID="lblSection">
</asp:Label>
<br />
<asp:datalist id="Datalist3" runat="server" DataSourceID="SqlDataSource3">
<ItemTemplate>
<!--<asp:Label Runat="server" text='<%# DataBinder.Eval(Container.DataItem, "Report") %>' ID="lblSection">
</asp:Label>-->
</ItemTemplate>
</asp:datalist>
</ItemTemplate>
</asp:datalist>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
One might guess that calling Clear on SqlDataSource2.SelectParameters before calling Add might do the trick.