I have model created with data annotations and in the partial view form when I click on submit client side validations does not work and form gets posted to the server. I am breaking my head over this from last couple of days. Following is the head section in _Layout.cshtml where I have included all the scripts
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<link href="~/Images/yellowtribe3.png" rel="shortcut icon" type="image/x-icon" />
<link href="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
<link href="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/themes/base/css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/YellowTribes.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/menu3.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/rateit.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/shCore.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/shThemeDefault.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/prettify.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/rateit.css")" rel="stylesheet" type="text/css" />
<script src="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
<meta name="viewport" content="width=device-width" />
#System.Web.Optimization.Scripts.Render("~/bundles/jquery")
#System.Web.Optimization.Scripts.Render("~/bundles/jquery")
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.6.4.min.js")"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = true;
$.extend($.mobile, { ajaxFormsEnabled: true });
});
</script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
And following is the partial view code where I have inputs
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="left">
<tr>
<td align="right" width="15%">
<div>Name:</div>
</td>
<td align="left">
<div class="input200">
<div class="input200">#Html.EditorFor(x => x.Name, new { #maxlength = "25" })</div>
</div>
</td>
</tr>
<tr>
<td align="right" valign="top">
<div>Comment:</div>
</td>
<td align="left">
<div>#Html.TextAreaFor(x => x.CommentText, 5, 50, null)</div>
</td>
</tr>
<tr>
<td></td>
<td>
#Html.Raw(Html.GenerateCaptcha())
#Html.ValidationMessage("recaptcha")
</td>
</tr>
<tr>
<td align="right">
</td>
<td align="left">
<input id="ArticleID" name="ArticleID" type="hidden" value="#ViewData["ArticleID"].ToString()" />
<input class="actionButtons" type="submit" value="Submit" onclick="validateInput();" formmethod="post"/>
<div id="thanksMsg" style="display:none; color:Red;">
<b>Thank you for your comment...</b>
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<br /> <br />
</td>
</tr>
</table>
If I view the source of my web page it seems to look fine with validations
<div class="input200"><input class="text-box single-line" data-val="true" data-val-required="Please enter your name" id="Name" name="Name" type="text" value="" /></div>
</div>
<div><textarea cols="50" data-val="true" data-val-required="Please enter comments" id="CommentText" name="CommentText" rows="5">
Not sure why it just won't validate when I leave these fields empty. Any help greatly appreciated.
I finally found the issue. The problem was with the way I have included javascripts scripts.
I changed following order
from
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
To
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
Can you post your model code?
I did something really silly the other day that kept me stuck for a little while, I hadn't declared my properties correctly, I just created public strings instead of a property with a set and get method. Everything worked just fine when using the model except for the model binding and validation. It was driving me nuts, maybe you've made the same mistake?
Related
I'm using bootstrap-table in my application to achieve pagination, global search, etc. It is a single-page application that uses Blazor framework(.net 5). The problem is when I run the app, it immediately shows a bootstrap table with pagination, search but then it disappears and turns to a regular bootstrap table.
What I tried:
My Index.razor
#page "/"
#inherits IndexBase
<div class="container mt-3 mb-3">
<table class="table table-hover" id="tblCustomers"
data-toggle="table"
data-pagination="true"
data-search="true"
data-search-align="left"
data-show-refersh="true"
data-detail-view="true"
data-detail-formatter="detailFormatter">
<thead>
<tr>
<th data-field="Id" data-width="18" data-align="center" data-sortable="true">Cust Id</th>
<th data-field="Name" data-width="18" data-align="center" data-sortable="true">Cust Name</th>
<th data-field="GId" data-width="18" data-align="center" data-sortable="true">G Id</th>
<th data-field="AccNo" data-width="18" data-align="center" data-sortable="true">Acc No</th>
<th data-field="Active" data-width="18" data-align="center" data-sortable="true">Active</th>
<th data-field="Key" data-width="18" data-align="center" data-sortable="true">Key</th>
<th data-field="action" data-align="center">Action</th>
</tr>
</thead>
<tbody>
#if (Customers == null)
{
<tr rowspan="10">
<td colspan="8" style="text-align:center"> <div class="spinner">
<img src="/images/loader.gif" height="60" width="40"/>
</div>
</td>
</tr>
}
else
#foreach (var cust in Customers)
{
<tr>
<td>#cust.CustomerId</td>
<td>#cust.CustomerName</td>
<td>#cust.GId</td>
<td>#cust.AccNo</td>
<td>#cust.IsActive</td>
<td>Not available</td>
<td>
</i>
</i>
</td>
</tr>
}
</tbody>
</table>
</div>
_host.cshtml
#page "/"
#namespace MyBlazorApp.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MyBlazorApp</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="MyBlazorApp.styles.css" rel="stylesheet" />
<link rel="stylesheet" href="~/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="~/js/bootstrap-table/bootstrap-table.min.css" />
<link rel="stylesheet" href="~/css/custom/main.css" />
<link rel="stylesheet" href="~/css/custom/header.css" />
<link rel="stylesheet" href="~/css/custom/index.css" />
<link rel="stylesheet" href="~/css/custom/customer.css" />
<style type="text/css">
/* width */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar:horizontal {
width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #555;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script src="~/js/jquery/jquery-3.6.0.min.js"></script>
<script src="~/js/popper/popper.min.js"></script>
<script src="~/js/bootstrap/bootstrap.min.js"></script>
<script src="~/js/bootstrap-table/bootstrap-table.min.js"></script>
<script src="~/js/jquery-resizable/dist/jquery.resizableColumns.min.js"></script>
<script src="~/js/bootstrap-table/extensions/resizable/bootstrap-table-resizable.js"></script>
<script>
$(function () {
$(".search").append('<span><i class="fa fa-search fa-search-custom" aria-hidden="true"></i></span>');
/* add the span inside search div with append box*/
})
function detailFormatter(index, row) {
//debugger;
var html = [];
$.each(row, function (key, value) {
if (key == 'Id' || key == 'Name' || key == 'AccNo' || key == 'Active') {
html.push('<p class="row" style="width:50%;float:right"><b col="col-md-2">' + key + '</b><span class="col-md-10">: ' + value + '</span></p>');
}
});
return html.join('');
}
</script>
</body>
</html>
What am I missing? Any help would be much appreciated.
I had the same problem with bootstrap-table in a Blazor app. I think I got a solution.
For some reason, Blazor loads js scripts at the beginning and it seems bootstrap-table is loading correctly. But after loading, the table you want to apply bootstrap, stays in a raw style and state. I don't really know why, I guess it's a kind of Blazor behavior. (I think we should learn exactly how blazor works to know the real reason).
Anyway, few weeks ago I applied a pdf viewer tool and I follow the installing instructions. It was the same that other tools, call some js and css files... But as I was following the Blazor installing steps, I noticed that they do a kind of JS running function after render, not just importing files.
So, after this explanation I could make bootstrap-table work doing the following.
Import css and js files as usual into _Host.cshtml file (Or the file you're using as main file). I installed bootstrap-table files into my project but I think it could work with CDN. Of course, JS files just before close the body tag.
///CSS FILES
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap-icons/font/bootstrap-icons.css" />
<link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css" />
///JS FILES
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap-table/bootstrap-table.min.js"></script>
Create a js custom file (This is going to contain the code to initialize the bootstrap-table once page is rendered). And add it after bootstrap-table.min.js reference.
<script src="js/bootstrapTableScript.js"></script>
Write next code inside that file. (bootstrapTableScript.js file)
window.bootstrapTableFunction = {
initBootstrapTable: function () {
$('[data-toggle="table"]').bootstrapTable();
}
};
Go to the file you want to insert the table and inject IJSRuntime interface, so you could call JS functions in Runtime
#inject IJSRuntime JSRuntime
In the same razor file, insert the html table code. I used the bootstrap page sample table
<table data-toggle="table" data-search="true">
<thead>
<tr>
<th>Item ID</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
</tbody>
</table>
Write this code in the same razor file (where the table is) but inside code section.
protected override async void OnAfterRender(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeAsync<object>("bootstrapTableFunction.initBootstrapTable");
}
}
Try it! It should work
This is how you should see
So, this is how it works... That OnAfterRender event is going to be ran when the razor page is already rendered. At that time, we are going to call an object called bootstrapTableFunction (the one is in your bootstrapTableScript file... Step 2 and 3). That object has a function called initBootstrapTable that is going to initialize the code that transform a simple table into a bootstrap-table. And that's it! You have your bootstrap-table.
This table example has the search function applied. So, if you want other functions like sort or so, you have to add data-sort and that kind of suff in html table, or inside bootstrapTableScript.js if you want it by javascript. Just like the official bootstrap-table documentation says.
Hope this be useful!
I've been using kendo ui for asp.net mvc 3 and I'm having some problems whit datepickers
the problem is that my datepickers renders a simple input date instead od the gorgeous controls
here is my code
<table class="table-container">
<tr>
</td>
<td class="item-value">
#(Html.Kendo().DatePickerFor(model => model.paymentDueDate)
.Name("datepicker")
.Value(DateTime.Now.ToShortDateString())
.HtmlAttributes(new { type = "text" })
)
</td>
</tr>
</table>
and in the header the next
<link media="screen" type="text/css" href="/kendo/styles/kendo.common.min.css" rel="stylesheet">
<link media="screen" type="text/css" href="/kendo/styles/kendo.default.min.css" rel="stylesheet">
<link media="screen" type="text/css" href="/kendo/styles/kendo.rtl.min.css" rel="stylesheet">
<script type="text/javascript" src="/Scripts/kendo.datepicker.min.js">
<script type="text/javascript" src="/Scripts/kendo.aspnetmvc.min.js">
<script type="text/javascript" src="/Scripts/kendo.web.min.js">
I also added the reference to kendo.Mvc.dll
and that renders a simple input date
here is the code I got in firefox after running the application
<input id="datepicker" type="text" value="11/07/2013" name="datepicker" class="valid">
I havent found anything about that
am I missing some css or js?
please help this is getting me crazy
thanks in advance
Are you including jQuery? Before any other JS you should include jQuery:
<script type="text/javascript" src="/Scripts/jquery.min.js">
I used to some thing like this in jsp.
<%#page language="java" import="java.util.*"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<%# page errorPage="/showError.jsp" %>
<%
String path = request.getContextPath();
%>
<sql:query var="rs" dataSource="jdbc/production">
select id,location,zone,ifnull(DATE_FORMAT(date_recp,'%m/%d/%Y'),'00-00-0000') as date_recp,qry_id ,cust_name,qry_recvd,qry_mode,ifnull(DATE_FORMAT(start_date,'%m/%d/%Y'),'00-00-0000') as start_date,
timing,qry_type,qry_cat,qry_det,ifnull(DATE_FORMAT(date_esclation,'%m/%d/%Y'),'00-00-0000') as date_esclation,ifnull(DATE_FORMAT(date_recp_ho,'%m/%d/%Y'),'00-00-0000') as date_recp_ho,
ifnull(DATE_FORMAT(date_recp_ho,'%m/%d/%Y'),'00-00-0000') as final_date,remarks,qry_stat from cust_supp where final_date is null or final_date='0000-00-00'
</sql:query>
<html>
<head>
<title>Customer Support Search Operation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="<%= path %>/js/style.css" />
<style type="text/css" title="currentStyle">
#import "<%= path%>/css/demo_table.css";
#import "<%= path%>/css/demo_table_jui.css";
#import "<%= path%>/css/jquery-ui-1.8.20.custom.css";
#import "<%= path%>/css/TableTools.css";
#import "<%= path%>/css/TableTools_JUI.css";
</style>
<script type="text/javascript" src="<%= path%>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%= path %>/js/tcal.js"></script>
<link rel="stylesheet" type="text/css" href="<%= path %>/css/tcal.css" />
<script src="<%= path%>/js/jquery.dataTables.js" type="text/javascript"></script>
<script src="<%= path%>/js/ZeroClipboard.js" type="text/javascript"></script>
<script src="<%= path%>/js/TableTools.js" type="text/javascript"></script>
<link href="<%=path%>/css/style.css" rel="stylesheet" type="text/css" />
<link href="<%=path%>/css/styles.css" rel="stylesheet" type="text/css" />
<script src="<%=path%>/js/tinybox.js" type="text/javascript"></script>
<script src="<%= path%>/js/send_data.js"></script>
</head>
<div class="brand" style="background:url('<%=path%>/images/head.jpg') no-repeat ;"></div>
<body>
<div class="forms">
<form style="height:450pt;width:95%;margin-left:5pt;margin-top:0" name ="form" action="<%=path%>/Download">
<input type="hidden" name="query" value="q0" />
<input type="hidden" name="dwld" value="cust_supp" />
<table width="95%" id="dataTable" class="display">
<thead>
<tr>
<th width="20pt"><b>S.no</b></th>
<th><b>Query ID</b></th>
<th><b>Zone</b></th>
<th><b>Location</b></th>
<th><b>Customer Name</b></th>
<th><b>Query Received</b></th>
<th><b>Date of Receipt</b></th>
<th><b>Mode of Query</b></th>
<th><b>Start Fall-Up Date</b></th>
<th><b>Timing</b></th>
<th><b>Query Type</b></th>
<th><b>Query Category</b></th>
<th><b>Query Details</b></th>
<th><b>Date of Escalation</b></th>
<th><b>Date of Receipt HO/Client/Bank</b></th>
<th><b>Final Date</b></th>
<th><b>Remarks</b></th>
<th><b>Query Status</b></th>
<th><b>Update</b></th>
</tr>
</thead><tbody>
<c:forEach var="row" items="${rs.rows}">
<tr>
<td>${row.id}</td>
<td><span>${row.qry_id}</span></td>
<td><span>${row.zone}</span></td>
<td><span>${row.location}</span></td>
<td><span class="editable">${row.cust_name}</span></td>
<td><select name="query_rcvd" >
<option value="${row.qry_recvd}" selected>${row.qry_recvd}</option>
<option value="Client">Client</option>
<option value="HO">HO</option>
<option value="Other">Other</option>
</select></td>
<td align="right"><input type="text" name="date" class="tcal" value="${row.date_recp}" /></td>
<td><select name="mode" >
<option value="${row.qry_mode}" selected>${row.qry_mode}</option>
<option value="phone">Phone</option>
<option value="E-mail">E-mail</option>
</select></td>
<td><input type="text" name="date" class="tcal" value="${row.start_date}"/></td>
<td><span class="editable">${row.timing}</span></td>
<td><select name="nature">
<option value="${row.qry_type}" selected>${row.qry_type}</option>
<option value="ECS Debit">ECS Debit</option>
<option value="ECS Credit">ECS Credit</option>
<option value="ASP">ASP</option>
<option value="MF">MF</option>
<option value="Retail">Retail</option>
</select></td>
<td><select name="category">
<option value="${row.qry_cat}" selected>${row.qry_cat}</option>
<option value="Status of the Transaction" >Status of the Transaction</option>
<option value="Mandate Related Queries">Mandate Related Queries</option>
<option value="Mandate Re-submission Cases">Mandate Re-submission Cases</option>
<option value="Wrong Reason Code Given By The Bankers">Wrong Reason Code Given By The Bankers</option>
<option value="Txn bounced at our end but cust bank a/c debited">Txn bounced at our end but cust bank a/c debited</option>
<option value="Extra debit in the bank account">Extra debit in the bank account</option>
<option value="Credit Query">Credit Query</option>
<option value="R7">R7 Report</option>
</select></td>
<td><span class="editable">${row.qry_det}</span></td>
<td><input type="text" name="date" class="tcal" value="${row.date_esclation}"/></td>
<td><input type="text" name="date" class="tcal" value="${row.date_recp_ho}"/></td>
<td><input type="text" name="date" class="tcal" value="${row.final_date}"/></td>
<td><span class="editable">${row.remarks}</span></td>
<td><span class="editable">${row.qry_stat}</span></td>
<td><input type="button" class="tab_buttons" value="Update"/></td>
</tr>
</c:forEach>
</tbody>
</table>
</form>
</div>
</body>
</html>
That creates a page from MySql DB which contains select and input elements within a html table, Now I want to achieve the same in an aspx page. I tried to add dynamically from code behind, but that's completely mixing c# with html, I don't want that, As I am new, someone suggested me spark, they said it worked like jstl which I used above, I tried but spark is not getting into my head, a simple simple simple example plsss. Or any other better way to achieve that. MVC not involved in this so that I can use razor.
Thank you
Using ASP.NET, C#, HTML5 and CSS3. My MasterPage is not recognizing the background image I have set in my stylesheet. I found an answer from 2009 on the ASP.NET forums from an MSN developer and it is still not working. After checking the code, the answer is relevant to XHTML transitional, the default doctype for .NET in Visual Studio.
Any suggestions? Thank you in advance.
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="../changes.css" rel="stylesheet" type="text/css" />
<link href="../style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="PageWrapper">
html, body {
background-color: #000;
background-image: url('../images/darker_wood_1600x1200.jpg');
background-attachment: scroll;
background-repeat: repeat-x;
}
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head><title>
</title>
<link href="changes.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>
<form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkM1MGX8QufJ31wnSeINevDB81G3lHsitto4ucLAdg6zs=" />
</div>
<div id="PageWrapper">
<div id="Header"><a href="./">Header here
</a></div>
<div id="MenuWrapper">Menu here</div>
<div id="MainContent">
</div>
<div id="Sidebar">Sidebar here</div>
<div id="Footer">Footer here</div>
</div>
</form>
This code works for me, but I don't know if the code above is how it looks. Cause you post a stylesheet value in the middle of a div.
Also, if the page can't read the file. Try a different file or try changing the search path for the file. Maybe it can't read it because it's outside the server dir. Because the CSS code looks correct.
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="../changes.css" rel="stylesheet" type="text/css" />
<link href="../style.css" rel="stylesheet" type="text/css" />
<link href="changes.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /></head>
<meta charset="utf-8" />
<style type="text/css">
// If you want the "Page" background to be this way:
html, body
{
background-color: #000;
background-image: url('../images/darker_wood_1600x1200.jpg');
background-attachment: scroll;
background-repeat: repeat-x;
}
// Or the PageWrapper
div#PageWrapper
{
background-color: #000;
background-image: url('../images/darker_wood_1600x1200.jpg');
background-attachment: scroll;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<!--- <form id="form1" runat="server"> --->
<form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkM1MGX8QufJ31wnSeINevDB81G3lHsitto4ucLAdg6zs=" />
</div>
<div id="PageWrapper">
<div id="Header">
Header here
</div>
<div id="MenuWrapper">
Menu here
</div>
<div id="MainContent">
</div>
<div id="Sidebar">
Sidebar here
</div>
<div id="Footer">
Footer here
</div>
</div>
</form>
<!--- </form> --->
</body>
</html>
I've got a test page put together to display a jQuery Calendar.
It seems like I have created everything correctly, but the Calendar control does not show.
Does anyone see anything wrong with my example below?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TestjQuery.aspx.cs" Inherits="AcpSheetMetal.TestjQuery" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Calendar Test</title>
<link rel="Stylesheet" type="text/css" href="Styles/jquery.ui.datepicker.css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript" />
<script src="Scripts/jquery.ui.datepicker.js" type="text/javascript" />
<script type="text/javascript">
$(function () {
alert("Select Dates and Run Search.");
$("#txtStartDate").datepicker();
$("#txtEndDate").datepicker();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="height:100%;width:100%">
<tr>
<td style="width:20%;">
<asp:Label ID="lblStartDate" runat="server" Text="[Start Date]" /><br />
<asp:TextBox ID="txtStartDate" runat="server" ClientIDMode="Static"></asp:TextBox>
</td>
<td style="width:20%;">
<asp:Label ID="lblEndDate" runat="server" Text="[End Date]" /><br />
<asp:TextBox ID="txtEndDate" runat="server" ClientIDMode="Static"></asp:TextBox>
</td>
<td style="text-align:left;">
Run Search:<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
It's probably the self closing script tags causing the problem -
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript" />
try using this pattern instead for all the script tags
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
See this question for further info - Why don't self-closing script tags work?
Because you said the alert does not fire I would say that the path Scripts/jquery-1.4.1.min.js could be wrong.
Are you sure this points to your javascript file?
Make sure your paths are correct and close your JavaScript tags:
<link rel="Stylesheet" type="text/css" href='<%= Page.UrlResolve("~/Styles/jquery.ui.datepicker.css" %>' />
<script src='<%= Page.UrlResolve("~/Scripts/jquery-1.4.1.min.js" %>' type="text/javascript"></script>
<script src='<%= Page.UrlResolve("~/Scripts/jquery.ui.datepicker.js" %>' type="text/javascript"></script>
Why don't self-closing script tags work?