How to Setup DateTime.ascx(Nerdinner Editor Templates) in mvc page? - c#

I Add DateTime Datetime.ascx
\Views\Shared\EditorTemplates\
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime>" %>
<%= Html.TextBox("", String.Format("{0:yyyy-MM-dd HH:mm}",Model)) %>
<script type="text/javascript">
$(function () {
$('#EventDate').datetime({
userLang: 'en',
americanMode: true
});
});
</script>
And I Need to Use it in my DateFrom - To Texbox.
<%# Register src="../Shared/EditorTemplates/DateTime.ascx" tagname="DateTime" tagprefix="uc1" %>
<p>
Please enter your Date Range Below.
</p>
<p>
Please enter your Date Range Below.
</p>
<form method="post" action="<%= Html.AttributeEncode(Url.Action("List")) %>">
<div>
<table cellpadding="2" cellspacing="0" class="vertical">
<tr>
<th>Date From:</th>
<td><%= Html.TextBox("datefrom") %></td>
</tr>
<tr>
<th>Date To:</th>
<td><%= Html.TextBox("dateto")%></td>
</tr>
<tr>
<th></th>
<td><input type="submit" value="Show My Orders" /></td>
</tr>
</table>
</div>
</form>
I got the Datetime.ascx from Nerdinner
Thanks in Regards

You need to use the Html.EditorFor instead of Html.TextBox
BTW, can you even use the <%# register ..%> syntax in MVC? I've only ever used it in ASP.NET WebForms (although, I'm only using Razor now so my ASCX is kind of rusty)

Related

ASP.NET Web Form wants to display file directory

I'm currently attempting to modify this tutorial's code such that I can create an ASP.NET web form which will allow users to view information on and download my selected portfolio works. However, when the page loads, it gets treated as though I want to browse through the part of the server which hosts the files (~/SelectedWorks) and, since my Web.config isn't configured to allow directory browsing at that location - or any location - I get an error.
Below is the ASP.NET code behind the page. The C# code behind the page is, aside from differently-named classes, identical to that of the tutorial's. I've also been using exclusively Visual Studio 2013 Ultimate (and thus its bundled version of IIS Express) to test the page. If someone could help me figure out what's going on, I'd greatly appreciate it!
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="SelectedWorks.aspx.cs" Inherits="ConflictingGenius_ASP.SelectedWorks" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<section>
<div>
<hgroup>
<h2><%: Page.Title %></h2>
</hgroup>
<asp:ListView ID="productList" runat="server"
DataKeyNames="WorkID" GroupItemCount="4"
ItemType="ConflictingGenius_ASP.Models.SelectedWork" SelectMethod="GetProducts">
<EmptyDataTemplate>
<table >
<tr>
<td>No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<EmptyItemTemplate>
<td/>
</EmptyItemTemplate>
<GroupTemplate>
<tr id="itemPlaceholderContainer" runat="server">
<td id="itemPlaceholder" runat="server"></td>
</tr>
</GroupTemplate>
<ItemTemplate>
<td runat="server">
<table>
<tr>
<td>
<a href="WorkDetails.aspx?WorkID=<%#:Item.WorkID%>">
<img src="<%#:Item.ImagePath%>"
width="100" height="75" style="border: solid" /></a>
</td>
</tr>
<tr>
<td>
<a href="WorkDetails.aspx?WorkID=<%#:Item.WorkID%>">
<span>
<%#:Item.Title%>
</span>
</a>
<br />
<%-- <span>
Download
</span>--%>
<br />
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</p>
</td>
</ItemTemplate>
<LayoutTemplate>
<table style="width:100%;">
<tbody>
<tr>
<td>
<table id="groupPlaceholderContainer" runat="server" style="width:100%">
<tr id="groupPlaceholder"></tr>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr></tr>
</tbody>
</table>
</LayoutTemplate>
</asp:ListView>
</div>
</section>
</asp:Content>
Add this code to your .cs file.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string[] filePaths = Directory.GetFiles(Server.MapPath("~/Uploads/"));
List<ListItem> files = new List<ListItem>();
foreach (string filePath in filePaths)
{
files.Add(new ListItem(Path.GetFileName(filePath), filePath));
}
productList.DataSource = files;
}
}
Add this code in your ListView in .aspx file
<ItemTemplete>
<asp:LinkButton runat="server" PostBackUrl='<%#Eval("Value") %>' ><%#Eval("Text") %></asp:LinkButton>
</ItemTemplate>

How to get Dynamic Span id in jquery?

Iam using jquery in asp.net
I have one user control in which i have div and in div table and in table tr and in tr td and in td i have lables.
ASCX :
<div ID="Container" runat="server" class="dvContainer">
<table ID="Table" class = "Tablecs">
<thead><tr>
<td colspan="2">
<asp:Label ID="lbl1" Text="Swiss" runat="server" /></td>
</tr>
</thead>
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td><asp:Label ID="lblPA" Text="SUN 12/21 05:04" runat="server" /></td>
<td ><asp:Label ID="lblPD" Text="SUN 12/21 19:00" runat="server" /></td>
</tr>
<tr>
<td><asp:Label ID="lblAA" Text="SUN 12/21 05:04" runat="server" /></td>
<td ><asp:Label ID="lblAD" Text="SUN 12/21 19:00" runat="server" /></td>
</tr>
</table>
i want to bind data dynamically to these user control. i.e., binding data to lables in user contol.
my Jquery
$div.find(".Table").text(oPorts[iCount].Name); // my result is an array of oPorts and i have filed as Name
But this is not working fine.
when i checked into code dynamically its generating SPAN for each and every lable
How to find that SPAN id dynamiccaly in a loop and bind data to lables??
Any help is appreciated. Thanks in Advance.
suppose you have a usercontrol with a markup like given below
<%# Control Language="C#" AutoEventWireup="true"
CodeBehind="WebUserControl1.ascx.cs" Inherits="DOTNET_FORMS.WebUserControl1" %>
<div id="Container" runat="server" class="dvContainer">
<table id="Table" class="Tablecs">
<tr>
<td>
<asp:Label ID="lblPA" Text="SUN 12/21 05:04" runat="server" />
</td>
<td>
<asp:Label ID="lblPD" Text="SUN 12/21 19:00" runat="server" />
</td>
</tr>
</table>
</div>
and you have registered this usercontrol on your .aspx page like this:
<%# Register TagPrefix="UC" TagName="Test" Src="~/WebUserControl1.ascx" %>
and used it like this:
<UC:Test ID="uc1" runat="server" />
then, when you run your page, your elements get rendered something like
<div id="uc1_Container" class="dvContainer">
<table id="Table" class="Tablecs">
<tr>
<td>
<span id="uc1_lblPA">SUN 12/21 05:04</span>
</td>
<td>
<span id="uc1_lblPD">SUN 12/21 19:00</span>
</td>
</tr>
<tr>
<td>
<span id="uc1_lblAA">SUN 12/21 05:04</span>
</td>
<td>
<span id="uc1_lblAD">SUN 12/21 19:00</span>
</td>
</tr>
</table>
</div>
see how ids of your labels and other elements (elements with runat="server" attribute ) got changed i.e.
lblPA > uc1_lblPA
lblPD > uc1_lblPD
Container > uc1_Container
so, you have to look out for these changes, because only then you can grab these elements using jQuery, cause jQuery is a client side language, it executes, after the server side code (runat="server") has executed.
However, if you do not want to look out for modified id, you can do following
remove runat="server" attribute, and make sure your ids are unique, all of them
let the runat="server" attribute be their, place an attribute clientidmode="static" on all of your server side controls. and Ids wont change.
use ClientId i.e. in your jQuery selector, grab an element like this: $('#"+'<%= lblPA.ClientID %>');
now, since your IDs are unique, you don't need to find, directly grab the elements like this:
$('#lblPA').text();
or if you want to loop through all the tds of your table with class Tablecs, do this:
$('.Tablecs tr td').each(function(index, item){
alert($(item).text());
});

Insert data into asp.net table through code

I have a table in asp.net page and i want to insert the data which will be recieved from service call through c# code behind. Any idea on how to do this.
Below is my table.
<table id="DataTable" class="style1">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
I just need to insert values recieved from service call in place of &nbsp.
In your aspx page asp:Label controls and assign the values from code behind by accessing them using Id.
Inside .aspx
<asp:Label Id="lblName" runat="server">
In code behind
lblName.Text = "Value from Service";
If you need to repeat this table use GridView.
Use the asp:Table control instead.. It gives you much more control from server side than a normal html tag :)
And it ofc render as a normal table client side
If you persist on working with pure html table you can use an new/old style to control it.
like so:
<table>
<% foreach ( var o in objects ) { %>
<!--UserControl -->
<tr>
<td> can put here data like so: <%= o.Id %> </td>
</tr>
<!--UserControl -->
<%}%>
</table>
or you can use Repeater and Bind data if it's dynamic.
If data is not dynamic and your table will not grow or change size, you can use a little OOP for this.
like so:
create in your class properties and then populate them.
public string MyLabel { get; set; }
put something in page load.
in aspx do it like so..
<table>
<tr>
<td> <%= MyLabel %> </td>
</tr>
</table>
or
<table>
<tr>
<td> <asp:Label ID=|"myText" runat="server"/> </td>
</tr>
</table>
Make the table Html server side control. Try this:
<table runat="server" id="DataTable" class="style1">
<tr>
<td id="td1" runat="server">
</td>
<td id="td2" runat="server">
</td>
<td id="td3" runat="server">
</td>
<td id="td4" runat="server">
</td>
</tr>
Now in the code behind
td1.InnerText="xx" or td1.InnerHtml=..

Problem with help div inside table

I have a table of roles that has checkboxes with access or not. I need a help-button on the right most column that shows information for the role using JQuery Dialog. For some reason the dialog only shows every second time.
Below is the code I use:
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<%foreach (Role role in ViewData["Roles"] as List<Role>)
{ %>
<tr>
<td width="20%">
<%=role.RoleName %>
</td>
<td width="70%">
<%=Html.CheckBox(role.RoleName, Model.IsInRole(role.LoweredRoleName)) %>
</td>
<td width="10%">
<%if (!string.IsNullOrEmpty(role.Description))
{ %>
<%Html.RenderPartial("Help", new KeyValuePair<string, string>(role.RoleName, role.Description)); %>
<%} %>
</td>
</tr>
<%} %>
</table>
Help.aspx:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<KeyValuePair<string, string>>" %>
<a href="#" onclick="$('#<%=Model.Key.Replace(" ", "") %>').dialog(); return false;">
<img border="0" src="../../Content/Images/help_icon.gif" alt="?"/>
</a>
<div id="<%=Model.Key.Replace(" ", "") %>" title="<%=Model.Key %>" style="display:none;">
<%=Model.Value %>
</div>
A call to $(foo).dialog() will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with: $(foo).dialog({ autoOpen: false }) and open it with $(foo).dialog('open')
http://docs.jquery.com/UI/Dialog#overview and
http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/
But I'd suggest to use something like http://plugins.learningjquery.com/cluetip/ instead. ClueTip has options to be opened via click and stay until closed, so you can choose between hover and click activation. It is also extremely easy to get content via AJAX, so you don't have to load page full of information that user may never click to see.

xVal and jQuery Submit Button

I have a simple form. Its got one field and a submit button.
I hide the submit button. The submit button is actually triggered with an anchor
tag that calls a javascript method that uses jQuery to get the element and execute
a click(). This works fine, the form posts and record is successfully written into the DB.
So now I added xVal for validation. I am trying to add in the simple client side validation.
It doesn't work when I click the anchor tag. However, if I un-hide the submit button and try posting the form with that instead of using the anchor tag that's calls the js method, it does work. So basically I am trying to figure out why it doesn't work when I use the js method to trigger the click of the submit button.
Any grande ideas? Thanks much!
Heres some code...
<div id="manufacturerButtons" class="moduleRow">
<%= Html.ActionImage(Url.Content("~/Content/Icons/bullet_go_back.png"), "Back To Admin", "Admin", "Admin")%>
| <a class="actionImage" href="javascript: addManufacturer();">
<img border="0" src="<%= Url.Content("~/Content/Icons/accept.png")%>"> <span>Add
Manufacturer </span></a>
</div>
<div class="moduleContent">
<div id="manufacturerContainer">
<div class="moduleRow">
<h3>
New Manufacturer</h3>
</div>
<div class="moduleRow">
<% Html.BeginForm("NewManufacturer", "Admin", FormMethod.Post); %>
<table class="noBorder" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 125px">
<h6>Name:</h6>
</td>
<td>
<%= Html.TextBox("Name") %>
</td>
</tr>
<tr style="display: none;">
<td>
</td>
<td>
<input type="submit" id="btnAdd" name="btnAdd" />
</td>
</tr>
</table>
<% Html.EndForm(); %>
<%= Html.ClientSideValidation<EquipmentManufacturer>() %>
</div>
</div>
Javascript:
function addManufacturer() {
//$('form').submit(); // doesnt work when trying to validate either
$('#btnAdd').click();
return true;
}
What you need to do is trigger the jQuery validation on your form. Try:
$('form').validate();
To submit the form upon successful validation, try:
$('form').validate({ submitHandler: function(form) { form.submit(); } });
Note that 'form' should be a valid jQuery selector for your form...

Categories

Resources