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
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 am building an Asp.net MVC app and would like to add a datepicker.
I have this code in my form in the view
#Html.LabelFor(b => b.Date)
#Html.EditorFor(b => b.Date, new {id = "news_date"})
This is the javascript I am using to make a datepicker.
$(document).ready(function () {
$("#news_date").datepicker({ dateFormat: 'dd/mm/yy' });
});
I would like it so when the user clicks on the textbox a datepicker appears and they can then select a date. currently nothing happens when I click on the text box so I think that there is either an issue with the javascript or with linking it to the textbox.
Any ideas?
Edit:
Web console shows this error:
TypeError: $(...).datepicker is not a function
Edit: Edit: This is the code that is compiled and taken from the browser console:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Enter Transaction - My ASP.NET MVC Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">your logo here</p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<script type="text/javascript">
$(document).ready(function () {
$("#Date").datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
<h2>Enter Transaction</h2>
<form action="/Home/EnterTransaction" method="post"> <p>
<label for="Type">Type</label>
<select id="TypeItems" name="TypeItems"><option value="0">Type1</option>
<option value="1">Type2</option>
</select>
<br />
<label for="Date">Date</label>
<select id="UserItems" name="UserItems"><option value="0">User1</option>
<option value="1">User2</option>
</select>
<br />
<label for="Date">Date</label>
<input type="text" id="news_date" name="news_date" />
<input class="text-box single-line" data-val="true" data-val-date="The field Date must be a date." data-val-required="The Date field is required." id="Date" name="Date" type="date" value="12/01/2014" />
</p>
<input type="submit" value="Submit">
<p></p>
</form>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2014 - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
<script src="/Scripts/jquery-2.0.3.js"></script>
</body>
</html>
Two things :
First, be sure you have references to jquery and jqueryui.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css"/>
You also need jquery ui css referened.
Second, there's no overload of EditorFor taking htmlattributes as parameters.
You should rather do
#Html.LabelFor(b => b.Date)
#Html.EditorFor(b => b.Date)
and for jquery part
$(document).ready(function () {
$("##Html.IdFor(m => m.Date)").datepicker({ dateFormat: 'dd/mm/yy' });
});
This code is from http://jsfiddle.net/EuyB8/
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
#TemplateRow { display:none; }
table, tr, td, th { border: solid thin black; padding: 5px; }
</style>
<script type="text/javascript">//<![CDATA[
$(function() {
//attach the a function to the click event of the "Add Box Attribute button that will add a new row
$('#AddAttr').click(function() {
//clone the template row, and all events attached to the row and everything in it
var $newRow = $('#TemplateRow').clone(true);
//strip the IDs from everything to avoid DOM issues
$newRow.find('*').andSelf().removeAttr('id');
//add the cloned row to the table immediately before the last row
$('#BoxTable tr:last').before($newRow);
//to prevent the default behavior of submitting the form
return false;
});
//attach a remove row function to all current and future instances of the "remove row" check box
$('#DeleteBoxRow').click(function() {
//find the closest parent row and remove it
$(this).closest('tr').remove();
});
//finally, add an initial row by simulating the "Add Box Attribute" click
$('#AddAttr').click();
});
//]]>
</script>
</head>
<body>
<table id="BoxTable">
<tbody><tr>
<th>Name</th>
<th>Nationality</th>
<th>Relationship</th>
<th>Date of Birth</th>
</tr>
<tr id="TemplateRow">
<td>
<select name="BoxName" id="BoxName">
<option selected="selected" value="attr1">attr1</option>
<option value="attr2">attr2</option>
<option value="attr3">attr3</option>
</select>
</td>
<td>
<select name="BoxComparison" id="BoxComparison">
<option selected="selected" value="=">=</option>
<option value=">">></option>
<option value="<"><</option>
<option value="Like">Like</option>
<option value="!=">!=</option>
</select>
</td>
<td>
<input name="BoxVal" id="BoxVal" type="text">
</td>
<td>
<input id="DeleteBoxRow" name="DeleteBoxRow" type="checkbox">
</td>
</tr>
<tr>
<td colspan="4">
<input name="AddAttr" value="Add Box Attribute" id="AddAttr" type="submit">
</td>
</tr>
</tbody></table>
</body>
How can I get all the values of all the generated rows and put them in a c# array?
I have a solution for you but in my oppinion its a bit hacky. Since you are mentioning c# I assume you are working on a ASP.NET application. If that's right here is one way to do it:
First place a invisible textbox control on your page. The important thing here is that you hide it by css. If you set the visible property to false it wont be on your page and you cant sore anything in it.
Once the textbox is added you make a new jquery function which adds the value of your rows into the hidden textbox control. You can eiter do it with a mousedown event on your 'submit'-button or you can do it on the go with a 'changing'-event.
The last thing you have to do is that you have to add separators to the row values that you can split them back into an array in c#.
The value of the textbox control will look like this in the end:
ValueRow1|ValueRow2|ValueRow3
Back in c# its easy to split the value into an array:
string[] myArr = textbox1.Text.Split('|');
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?
Javascript
var form = document.getElementById('date_budget');
pop('', 'exp_upd', '95', '80');
form.action = "test.aspx";
form.target = 'exp_upd';
form.submit();
HTML
<form id="date_budget" name="date_budget" method="post">
<table>
<tr>
<!--#include file="zone.inc" -->
<td id='mlodg_loc'><select name="loc" id="loc">
<option value="Select Location">Select Location</option>
</select></td>
<td>
<select name="month" id="month">
<option value="1">1</option>
</select>
</td>
<td>
<select name="year" id="year">
<option value="2013">2013</option>
</select>
</td>
</tr>
</table>
</form>
The above code opens a popup window, but when I change the html by adding the runat attribute, I am getting “Validation of viewstate MAC failed”, and some extra junk. the modified html is below
<form id="date_budget" name="date_budget" method="post" runat="server">
<table>
<tr>
<!--#include file="zone.inc" -->
<td id='mlodg_loc'><select name="loc" id="loc" runat="server">
<option value="Select Location">Select Location</option>
</select></td>
<td>
<select name="month" id="month" runat="server">
<option value="1">1</option>
</select>
</td>
<td>
<select name="year" id="year" runat="server">
<option value="2013">2013</option>
</select>
</td>
</tr>
</table>
</form>
Is there any workaround to use both the runat server and using the same element in JS, without using those asp tags something like <%= hidBT.ClientID %> I don't want that any other way.
Try to add this <pages enableViewStateMac="false"> in your web.config (or)
Try to Change this <form id="date_budget" name="date_budget" method="post"> to
this <form id="date_budget" name="date_budget" runat="server">
It shouldn't specify method or action
You can try setting the ClientIDMode="Static" on the control or in the #Page directive. That will keep the id of the form as "date_budget".
Otherwise if you don't need the ViewState on the page, then you can disable it in the #Page directive using EnableViewState="false".