I am having a view composed of partial views. Please look at the following image -
I am using JQuery for navigating left side panel. Each right side screen is a partial view. Everything works perfectly. The problem here is with the silverlight screen embed in the following view. Lets check the image -
Each time i click on the code link the silverlight screen is reloaded washing out my contents that i entered in the code editor.
Following is the code -
<div id="scanneredit" class="tabs">
<div class="Navigation">
<div class="header"><%=DataOrModel %> Sections</div>
<ul>
<li>
<div class="inner">
<img alt="Code" src="../../Content/Images/Icon_Code.png" />
Code
<%if (Model.ErrorInSection == 5)
{%>
<div class="ErrorIndicator">
<img alt="General Details" src="../../Content/Images/no.png" />
</div>
<%}
else if (Model.ErrorInSection > 5)
{%>
<div class="ErrorIndicator">
<img alt="General Details" src="../../Content/Images/ok.png" />
</div>
<%} %>
</div>
</li>
</ul>
</div>
<div class="tab">
<%Html.BeginForm("Create", "Scanner", FormMethod.Post, new { id = "createscanner" });%>
.
.
.
<div id="code" class="scanner">
<h3>Code</h3>
<h5>Define core logic of a <%=DataOrModel%>.</h5>
<hr />
<%
Html.RenderPartial("~/Views/Scanner/ScannerCode.ascx", new ViewDataDictionary(Model) );
%>
</div>
.
.
.
</div>
Any help is greatly appreciated.
Related
#szimek I am trying to implement your Signature Pad in a C# Web Forms application. The signature pad displays and the Clear button is clickable, but the canvas won't open up to allow entry of the signature. I have had to change signature-pad ID to signaturepad, could that be the reason it isn't working? HELP!!
</div>
<hr class="double" />
<asp:HiddenField ID="hfimg" runat="server" />
<div id="signaturepad" class="signature-pad" runat="server">
<div class="signature-pad--body" runat="server">
<canvas></canvas>
</div>
<div class="signature-pad--footer" runat="server">
<div class="description">Sign above</div>
<div class="signature-pad--actions" runat="server">
<div>
<button type="button" class="button clear" data-action="clear">Clear</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/signature_pad#4.0.0/dist/signature_pad.umd.min.js"></script>
<script src="Content/app.js"></script>
how to create layout with header, main content and footer in separately files?
In Site.Master there is a Menu, main content and footer together and I want to separate them.
I've created new Web Form with Master Page (Menu.aspx):
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Menu.aspx.cs" Inherits="WebApplication2.Menu" %>
<asp:Content ID="Content1" ContentPlaceHolderID="menu" runat="server">
<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" runat="server" href="~/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</asp:Content>
and I'm trying to include it in Site.Master:
<form runat="server">
<!-- Menu -->
<asp:ContentPlaceHolder ID="menu" runat="server">
</asp:ContentPlaceHolder>
<!-- Main content -->
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
but it won't render. What's wrong?
I think that the MasterPageFile in your Menu.ascx shouldn't be there. The menu is like a partial view, it shouldn't have masterpage. However, I would chose different approach.
Menu
<%# Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="Menu.ascx.cs" Inherits="WebApplication2.Menu" %>
<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" runat="server" href="~/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
</ul>
</div>
</div>
</div>
What I've done on the Menu page: I removed the MasterPageFile attribute of the menu, because the menu isn't a whole page but a part of one (like partial view in MVC). Also, removed the <asp:Content> tag because you don't want the menu to be rendered in the main of your Site.Master.
Site.Master
Include this line on the top of the Site.Master
<%# Register TagPrefix="Menu" TagName="Menu" Src="the path to your Menu.ascx" %>
Change the value of the Src attribute with the path to your Menu.Ascx page.
Now you can render your Menu.ascx page wherever you want in your Site.Master like that:
<Menu:Menu runat="server" />
I am not 100% sure it will work because I haven't tested it. If something's wrong comment below. I will help you.
So needed help again
Sorry a bit confusing but, I am trying to create a chat box which user can submit and then retrieve it again from the DB, I am following this script https://bootsnipp.com/snippets/EkQe7
As you can see, from the HTML code, there is two types, one is when you chat and another is when other people chat,
<div class="chat">
<div class="chat-history">
<ul class="chat-ul">
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle you"></i> You</span>
</div>
<div class="message you-message">
A new client?!?! I would love to help them, but where are we going to find the time?
</div>
</li>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-name">Ada, your OperationsAlly</span> <i class="fa fa-circle me"></i>
</div>
<div class="message me-message float-right"> We should take a look at your onboarding and service delivery workflows, for most businesess there are many ways to save time and not compromise quality. </div>
</li>
</ul>
</div> <!-- end chat-history -->
</div> <!-- end chat -->
So now, what I am trying to do is from the retrieve the message from DB then code-behind submit the HTML code into the Repeater,
If it is "You", then will use this code
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle you"></i> You</span>
</div>
<div class="message you-message">
A new client?!?! I would love to help them, but where are we going to find the time?
</div>
If it is other people, then will use this code
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-name">Ada, your OperationsAlly</span> <i class="fa fa-circle me"></i>
</div>
<div class="message me-message float-right"> We should take a look at your onboarding and service delivery workflows, for most businesess there are many ways to save time and not compromise quality. </div>
</li>
My question is how to do that from Code-Behind PageLoad? How to add the code above into the Repeater from code-behind?
Thanks!
First, you'll have to retrieve the records in the database in the code behind. (See this msdn article for details)
messages.DataSource = myMessages;
messages.DataBind();
Now we can use Repeater, in which the html is separated by author, to iterate the data. Note that I am assuming how your database of messages is structured.
<asp:Repeater id="messages" runat="server">
<ItemTemplate>
<div runat="server" visible='<% (Container.DataItem("author") == "us") %>'>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle you"></i> You</span>
</div>
<div class="message you-message">
<%# Eval("testMessage") %>
</div>
</li>
</div>
<div runat="server" visible='<% (Container.DataItem("author") != "them") %>'>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-name"><%# Eval("authorName") %></span> <i class="fa fa-circle me"></i>
</div>
<div class="message me-message float-right">
<%# Eval("testMessage") %>
</div>
</li>
</div>
</ItemTemplate>
</asp:Repeater>
I haven't tested this code, but its a high level idea of what to do. You may also want to see some Examples on using Repeater.
I want to call my code behind method on click of hyperlink on my ASPX design page.
So that I can Fetch the Identity value and pass it to my stored procedure and redirect user to the landing page.
I am facing syntax issue as what to write where.
In my expected code I tried to add runat server but getting error.
Other things are working fine.
Current Code
<div class="row">
<% foreach (System.Data.DataRow item in dt.Rows)
{
%>
<div class="col-xs-6 col-sm-3 mix livefeeds News">
<div class="work-item">
<div class="image-holder">
<a href="<%=item["Identity"].ToString()%>">
<img src="<%=item["ImagePath"].ToString()%>"/>
<h4>
<span><%=item["Headline"].ToString()%></span>
</h4>
</a>
</div>
</div>
</div>
<%
}
%>
</div>
Expected Code
<div class="row">
<% foreach (System.Data.DataRow item in dt.Rows)
{
%>
<div class="col-xs-6 col-sm-3 mix livefeeds News">
<div class="work-item">
<div class="image-holder">
<a href="<%=item["Identity"].ToString() runat="server" onServerClick="MyFuncion_Click"%>">
<img src="<%=item["ImagePath"].ToString()%>"/>
<h4>
<span><%=item["Headline"].ToString()%></span>
</h4>
</a>
</div>
</div>
</div>
<%
}
%>
</div>
Looks like <% %> and quotes are messed up a bit. Tired to correct it:
<a href='<%=item["Identity"].ToString()%>' runat="server" onServerClick="MyFuncion_Click">
However I have doubts this will actually work the way you expect (do a postback straight away) unless you have some javascript handling client onclick.
Our solution runs with a parent frame and a main content iframe. One of the pages in the main content iframe is set up with a series of divs used as tabs, example as follows.
<div id="topRow">
<div class="mainInformation tab tabSelected" runat="server" id="mainInformationTop">
<div class="tabLeft">
<div class="tabMain">
Main Information
</div>
</div>
</div>
<div class="executives tab" runat="server" id="executivesTop">
<div class="tabLeft">
<div class="tabMain">
Executives
</div>
</div>
</div>
</div
<div id="secondRow">
<div id="mainInformationTabGroup" runat="server" class="mainInformation tabGroup">
<div id="overview" runat="server" class="tab tabSelected overview">
<div class="tabLeft">
<div class="tabMain">
Overview
</div>
</div>
</div>
<div id="locations" runat="server" class="tab locations">
<div class="tabLeft">
<div class="tabMain">
Locations
</div>
</div>
</div>
</div>
<div id="executivesTabGroup" runat="server" class="executives tabGroup" style="display: none">
<div id="companyExecutives" runat="server" class="tab companyExecutives">
<div class="tabLeft">
<div class="tabMain">
Company Executives
</div>
</div>
</div>
<div id="affiliatedExecutives" runat="server" class="tab affiliatedExecutives">
<div class="tabLeft">
<div class="tabMain">
Affiliated Company Executives
</div>
</div>
</div>
</div
</div>
The jquery event handlers are loaded from a local .js file, example pertaining to the above HTML as follows
$('#topRow div.tab').click(function() {
$('#topRow div.tabSelected').removeClass('tabSelected');
$(this).addClass('tabSelected');
})
$('#topRow .mainInformation').click(function() {
$('#secondRow').css('display', 'block');
$('#thirdRow').css('display', 'none');
resizeAllIframes();
$('#secondRow .tabGroup').css('display', 'none');
$('#secondRow .mainInformation').css('display', 'block');
$('#secondRow .mainInformation div.tab').not('.locked').children().first().trigger('click');
});
$('#topRow .executives').click(function(){
$('#secondRow').css('display', 'block');
$('#thirdRow').css('display', 'none');
resizeAllIframes();
$('#secondRow .tabGroup').css('display', 'none');
$('#secondRow .executives').css('display', 'block');
$('#secondRow .executives div.tab').not('.locked').children().first().trigger('click');
});
(The click events just change the "src" attribute of the iframe)
The issue I'm experiencing is that sometimes when we load this tab page (and only in Internet Explorer 9+, IE7 seems to not have this issue), I'll click on a tab and nothing will happen. The hover events for the CSS are loaded just fine, but click on the tab does nothing. However, if I click one tab and nothing happens, I can click on the next and it will work fine. Similarly, if I click anywhere in the main content frame first and then on a tab, it will always fire the event handler.
We've noticed this problem happening almost entirely when we try to direct to the tabbed page from the parent frame (we have a quicksearch up there) and we use a Response.Redirect to load the iframe with the tab page. I've tried redirecting this quicksearch to a landing page inside the iframe that then uses a Response.Redirect to get us to the tab page, but it ends up with the same results. When we're clicking on a hyperlink from inside the iframe (Target="_self"), that works just fine.
This issue doesn't happen in Firefox, Chrome, or IE7, but it does in IE9+.
Does anybody have any thoughts, ideas, known bugs that I'm missing, anything like that?
this is how you bind an event to an element:
$(document).bind('click','#topRow div.tab',function() {
$('#topRow div.tabSelected').removeClass('tabSelected');
$(this).addClass('tabSelected');
});
do the exact same for the other events just change the selector part (I mean "#topRow div.tab") with the desired selectors.