Kendo Window won't load data from model - user-interface

#model Example.Model1ViewModel
#if (Model != null && Model.TableSix != null)
{
<table>
<thead>
<tr>
<td style="width:60%"></td>
<td style="width:20%">Outstanding Amount</td>
</tr>
</thead>
<tbody>
<tr>
<td>Total</td>
<td class="Total cursor">#Html.DisplayFor(x => x.TableSix.Total)</td>
</tr>
<tr>
<td>One</td>
<td>#Html.DisplayFor(x => x.TableSix.One)</td>
</tr>
<tr>
<td>Two</td>
<td>#Html.DisplayFor(x => x.TableSix.Two)</td>
</tr>
</tbody>
</table>
}
<div style="display: none">
#(Html.Kendo().Window()
.Name("RemainingAssetsDrillDown")
.Modal(true)
.Title("Item Drill Down")
.Actions(actions => actions.Close())
.Content(#<text>
<div>
<table>
<tbody>
<tr>
<td>One</td>
<td>#Html.DisplayFor(x => x.TableSix.One)</td>
</tr>
</tbody>
</table>
</div>
</text>)
</div>
)
$(".Total").click(function () {
$("#MVC").load('#Url.Action("PartList", "Report")');
var win = $("#DrillDown").data("kendoWindow");
win.center().open();
});
<style type="text/css">
.cursor {
cursor: pointer;
}
</style>
So, the problem is that #Html.DisplayFor(x => x.TableSix.One) fetches the correct value from the view model in the first table, but in the table under kendo window I get the value as 0.
Any idea how I can get #Html.DisplayFor(x => x.TableSix.One) to display the value from the view model into the table that is under kendo window?
Thanks in advance. :)

Related

Laravel PDF bangla font not supported

In my Laravel 6 web application bangla is working working fine. But when I am printing report bangla font doesn't show. See screenshot.
My Print page code is :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Daily Purchase Reprt pdf</title>
<style>
{
font-family: 'Baloo Da 2', cursive;
}
</style>
</head>
<body>
<table width="100%">
<tbody>
<tr>
<td width="60%" style="text-align: center; font-size: 25px;"> <strong style="text-align: center;">Kopotakkho Enterprise</strong> </td> <br>
</tr>
</tbody>
</table>
<table width="100%">
<tbody>
<tr>
<td width="30%" style="float: left;"> </td>
<td width="40%" style="text-align: justify;"> 123, Kakrail Road , Moubon Super Market(2nd Floor), Shantinagar, Dhaka - 1217</td>
<td width="30%" style="float: right;"></td>
</tr>
</tbody>
</table>
<h3 style="text-align: center; text-decoration: underline;">Daily Purchase Report ({{ date('d-m-Y', strtotime($start_date)) }} - {{ date('d-m-Y', strtotime($end_date)) }})</h3>
<table width="100%">
<tbody>
</tbody>
</table>
<br>
<table width="100%" border="1">
<thead>
<tr>
<th width="5%">S/N</th>
<th width="10%">Prch. No</th>
<th width="10%">Date</th>
<th width="5%">Category</th>
<th width="10%">Product</th>
<th width="10%">Qty</th>
<th width="15%">Unit Price</th>
<th width="15%">Total Price</th>
</tr>
</thead>
<tbody>
#php
$sum_total = '0';
#endphp
#foreach($allData as $key => $purchase)
<tr>
<td style="text-align:center;">{{ $key+1 }}</td>
<td style="text-align:center;">{{ $purchase->purchase_no }}</td>
<td style="text-align:center;">{{ date('d-m-Y', strtotime($purchase->date)) }}</td>
<td style="text-align:center;">{{ $purchase['category']['cat_name'] }}</td>
<td style="text-align:center;">{{ $purchase['product']['product_name'] }}</td>
<td style="text-align:center;">
{{ $purchase->buying_qty }}
{{ $purchase['product']['unit']['unit_name'] }}
</td>
<td style="text-align:center;">{{ $purchase->unit_price }}</td>
<td style="text-align:center;">{{ $purchase->buying_price }}</td>
#php
$sum_total += $purchase->buying_price;
#endphp
</tr>
#endforeach
<tr>
<td colspan="7" style="text-align:right;"> Grand Total  </td>
<td style="text-align:center;">{{$sum_total}}</td>
</tr>
</table>
#php
$date = new DateTime('now', new DateTimezone('Asia/Dhaka'));
#endphp
<i>Printing time : {{ $date->format('F j, Y, g:i a')}}</i>
<hr>
<br><br>
<table>
<tr>
<td width="30%" style="float:left;">Customer Signature</td>
<td width="40%"></td>
<td width="30%" style="float:right; padding-left: 70px;"><span style=" padding-left: 50px; text-align: center;">Author Signature</span></td>
</tr>
</table>
</body>
</html>
I have used "niklasravnsborg/laravel-pdf": "^4.0" package for printing.
In my pdf.php file code is :
<?php
return [
'mode' => 'utf-8',
'format' => 'A4',
'author' => '',
'subject' => '',
'keywords' => '',
'creator' => 'Laravel Pdf',
'display_mode' => 'fullpage',
'tempDir' => base_path('../temp/')
];
return [
// ...
'font_path' => base_path('public/admin/Baloo_Da_2/'),
'font_data' => [
'BalooDa2' => [
'R' => 'BalooDa2-Regular.ttf', // regular font
'B' => 'BalooDa2-Bold.ttf', // optional: bold font
'useOTL' => 0xFF, // required for complicated langs like Persian, Arabic and Chinese
'useKashida' => 75, // required for complicated langs like Persian, Arabic and Chinese
]
// ...add as many as you want.
]
// ...
];
BUT bangla not showing. Please help. thanks
You need to embed bangla font to your project. In config/pdf.php file please add bangla font. Following this procedure.
'font_path' => base_path('resources/fonts/'),
'font_data' => [
'solaimanlipi' => [
'R' => 'SolaimanLipi.ttf', // regular font
'B' => 'SolaimanLipi.ttf', // optional: bold font
'I' => 'SolaimanLipi.ttf', // optional: italic font
'BI' => 'SolaimanLipi.ttf', // optional: bold-italic font
'useOTL' => 0xFF,
'useKashida' => 75,
]
]
And download "SolaimanLipi" font and place it to your resources/fonts folder.

Use all the elements of the table in Laravel

I have a table in the page "map.blade.index.php" as:
<table id="table">
<thead>
<tr><th>ID</th>
<th>Name</th>
<th>Latitude</th>
<th>Longitude</th>
</tr>
</thead>
<tbody><tr>
<td>0</td>
<td id="0">Name 174</td>
<td id="lat0">41.1230199</td>
<td id="lng0">14.73767010000006</td>
</tr>
</tbody>
</table>
and I try to use the table elements in my function Controller called "MapController#saved" , but I think that I can't use the table by her id.
there a way to use all the elements of the table ? Now I must use one item at a time.
You can parse your table with any HTML parser. I'm using this one.
$html->find('td[id=lat0]')->innertext; // Returns 41.1230199
If I understood then what you need is a multi input like:
<form action="map/saved">
<table id="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Latitude</th>
<th>Longitude</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td id="0">Name 174</td>
<td id="lat0">41.1230199</td>
<td id="lng0">14.73767010000006</td>
<input type="hidden" name="entry[0][name]" value="Name 174">
<input type="hidden" name="entry[0][lat]" value="41.1230199">
<input type="hidden" name="entry[0][lng]" value="14.73767010000006">
</tr>
</tbody>
</table>
<button type="submit">
</form>
Your controller method will looks like this:
public function map(Request $request) {
foreach ($request->input('entry') as $i => $entry) {
// here you get an array with:
// array (3) [
// 'name' => 'Name 174'
// 'lat' => '41.1230199'
// 'lng' => '14.73767010000006'
// ]
}
}

MVC3 ASP Replace null value with empty space on the view

I have the following view which returns some text if the POnumber is null.
What I think I need to have instead of the if(Model.Invoice.PONumber == null) is a check mechanism ( maybe multiple if statements ) that will check the fields LineNumber, Description, UnitOfMeasure, QtyOrdered and if any of them is null it will replace it with N/A or empty space but it will still allow the user to see the rest of information available.
Do you have any sugestions? I am new to MVC and any help will be apreciated.
Thank you in advance for your time and help,Bobby
<div class="contentWrapper2">
<div class="content2">
<div class="clr lfl w100">
<h1>Invoice Detail</h1>
<div class="return-btn">
<a class="btn btnStyleC btn-back-invoice" href="#Url.Action("InvoiceHistory", "Account")">
Back to Invoice List</a>
</div>
</div>
#if (Model.ErpError.Length > 0)
{
<div class="clr lfl w100 error">
#Html.Raw(Model.ErpError)
</div>
}
else
{
if(Model.Invoice.PONumber == null)
{
<div class="lfl w100 clr messaging">
<p>No information available at the moment for current invoice.
Please call our sales department for further assistance.
</p>
</div>
}
else
{
<div class="clr lfl w100">
<div class="order-number-date">
<table>
<tr>
<th class="col-1">
<h3>Invoice #:</h3>
</th>
<td class="col-2">
<h3>#Model.Invoice.InvoiceNumber</h3>
</td>
</tr>
<tr>
<th class="col-1">
<h3>Invoice Date:</h3>
</th>
<td class="col-2">
<h3>#Model.Invoice.InvoiceDate.ToShortDateString()</h3>
</td>
</tr>
</table>
</div>
<div class="order-number-date">
<table>
<tr>
<th class="col-1">
<h3>Order #:</h3>
</th>
<td class="col-2">
<h3>#Model.Invoice.OrderNumber</h3>
</td>
</tr>
<tr>
<th class="col-1">
<h3>PO #:</h3>
</th>
<td class="col-2">
<h3>#Model.Invoice.PONumber</h3>
</td>
</tr>
<tr>
<th class="col-1">
<h3>Due Date:</h3>
</th>
<td class="col-2">
<h3>#Model.Invoice.DueDate.ToShortDateString()</h3>
</td>
</tr>
</table>
</div>
</div>
<div class="clr lfl w100">
<div class="bill-ship">
<table>
<tr>
<th>
<h4>Billing Information</h4>
</th>
</tr>
<tr>
<td>#Model.Invoice.BTDisplayName
</td>
</tr>
<tr>
<td>
<#Html.Raw(Model.Invoice.BTAddress1)
</td>
</tr>
#if (!string.IsNullOrEmpty(Model.Invoice.BTAddress2))
{
<tr>
<td>#Html.Raw(Model.Invoice.BTAddress2)
</td>
</tr>
}
<tr>
<td>#Html.CityCommaStateZip(Model.Invoice.BTCity, Model.Invoice.BTState, Model.Invoice.BTZip)</td>
</tr>
<tr>
<td>#Model.Invoice.BTCountry
</td>
</tr>
<tr>
<td>#Model.Invoice.BTPhone1</td>
</tr>
<tr>
<td>#Model.Invoice.BTEmail
</td>
</tr>
</table>
</div>
</div>
if (Model.Invoice.InvoiceLines.Count > 0)
{
<div class="clr lfl w100 line-item-detail">
<table class="info-tbl">
<tr>
<th class="vid-item">Item #</th>
<th class="vid-desc">Description</th>
<th class="vid-um">
U/M
</th>
<th class="vid-qty">
Qty
</th>
<th class="vid-ship">
Ship Date
</th>
#if (Model.ShowPackslip)
{
<th class="vid-pack">Pack Slip</th>
}
<th class="vid-unit">Unit Price</th>
<th class="vid-ext">Ext Price</th>
</tr>
#foreach (var invoiceLine in Model.Invoice.InvoiceLines)
{
<tr>
<td class="vid-line">#invoiceLine.LineNumber</td>
<td class="vid-desc">#invoiceLine.Description</td>
<td class="vid-um">#invoiceLine.UnitOfMeasure</td>
<td class="vid-qty">#invoiceLine.QtyOrdered</td>
<td class="vid-ship">
#if (invoiceLine.ShipDate.ToShortDateString() == "1/1/0001")
{
}
else
{
#invoiceLine.ShipDate.ToShortDateString()
}
</td>
#if (Model.ShowPackslip)
{
<td class="vid-pack">
#invoiceLine.PackSlip
</td>
}
<td class="vid-unit">#invoiceLine.UnitPrice.ToCurrency()
</td>
<td class="vid-ext">#invoiceLine.ExtendedPrice.ToCurrency()
</td>
</tr>
}
</table>
</div>
}
<div class="clr lfl w100">
<table class="tbl-total">
<tr class="subtotal">
<th class="col-1">Subtotal</th>
<td class="col-2">#Model.Invoice.OrderSubTotal.ToCurrency()
</td>
</tr>
#if (Model.Invoice.DollarOffOrder > 0)
{
<tr>
<th class="col-1">Order Discount</th>
<td class="col-2">#Model.Invoice.DollarOffOrder.ToCurrency()</td>
</tr>
}
#if (Model.Invoice.ShippingAndHandling > 0)
{
<tr>
<th class="col-1">Shipping</th>
<td class="col-2">#Model.Invoice.ShippingAndHandling.ToCurrency()
</td>
</tr>
}
#if (Model.Invoice.MiscCharges > 0)
{
<tr>
<th class="col-1">Misc. Charges</th>
<td class="col-2">#Model.Invoice.MiscCharges.ToCurrency()</td>
</tr>
}
<tr>
<th class="col-1">Sales Tax</th>
<td class="col-2">#Model.Invoice.TotalTax.ToCurrency()</td>
</tr>
<tr>
<th class="col-1">Invoice Total</th>
<td class="col-2">#Model.Invoice.InvoiceTotal.ToCurrency()</td>
</tr>
</table>
</div>
<div class="clr lfl w100">
<a class="btn btnStyleB btn-print" href="javascript:window.print();">Print</a>
</div>
}
}
</div>
</div>
You could create a template called for example "nullcheck.cshtml" like:
#if (ViewBag.ValueToCheck == null) {
<div class="lfl w100 clr messaging">
<p>
No information available at the moment for #(ViewBag.Field).
Please call our sales department for further assistance.
</p>
</div>
}
else {
#Html.Partial(ViewBag.TargetTemplate, Model)
}
Then you call it from your main view:
#{
ViewBag.TargetTemplate = "okModel";
ViewBag.Field = "P.O.Number";
ViewBag.ValueToCheck = Model.Invoice.PONumber;
Html.RenderPartial("nullCheck", Model, ViewBag);
}
okModel.cshtml should be the part of your template you will display when the value is not null...
I haven't tested this myself but it should give you some ideas... contact me if things go wrong XD
Cheers!
This seems like something you should take care of in your controller.
public ActionResult YourControllerAction()
{
var myViewModel = SomeService.GetMyViewModel();
if (myViewModel.Invoice.PONumber == null)
{
myViewModel.Invoice.PONumber = "N/A";
}
//etc
}
This leaves your view clearer (my personal preference)
However in the view you could simply use the null coalescing operator like so:
#Model.Invoice.PONumber ?? "NA"

Grid generated with JQuery template need to reset using Ajax not working

Sometime working and sometime not.
I am trying to generate Grid with the help of JQuery Template via Ajax once record is added or deleted. In js file
$('.gridRow').remove();
is not working properly. Someone tell me how to reset grid to fill it again. Below is the code.
JS File
var ReloadGrid = (function(){
$.getJSON("/HeaderMenu/GetHeaderGrid", function(data) {
$('.gridRow').remove();
(data.length <= 0) ? $("#gridBtn").hide() : $("#gridBtn").show();
for (var i=0; i<data.length; i++) { data[i].num = i+1; }
$('#gridTemplate').tmpl(data).appendTo('table.gridTable > tbody');
});
});
on MVC3 cxhtml page
<script id="gridTemplate" type="text/x-jquery-tmpl">
<tr class="gridRow">
<td class="cellTd ">
<input type="checkbox" id="deleteCb" />
<input type="hidden" id="Id_ + ${num}" class="idField" value="${Id}" />
</td>
<td class="cellTd">
<input id="index" name="index" class="numberField" type="text" value="${IndexOrder}" />
</td>
<td class="cellTd">${DisplayName}</td>
<td class="cellTd ">${UrlName}</td>
<td class="cellTd ">
<input type="checkbox" id="activeCb" {{if Active}} checked{{/if}} />
</td>
</tr>
</script>
<div class="gridDiv">
<table class="gridTable" cellspacing="0" cellpadding="0">
<tbody>
<tr class="gridTitleRow">
<td class="iconLink width36">Delete</td>
<td class="iconLink width60">Sort Order</td>
<td class="iconLink widthAuto">Display Name</td>
<td class="iconLink widthAuto">Url Name</td>
<td class="iconLink widthAuto">Active</td>
</tr>
</tbody>
</table>
</div>
I usually empty the wrapper instead of the row.
$('table.gridTable > tbody').empty();
But for that to work you'd have to change your table to use thead
<table class="gridTable" cellspacing="0" cellpadding="0">
<thead>
<tr class="gridTitleRow">
<th class="iconLink width36">Delete</th>
<th class="iconLink width60">Sort Order</th>
<th class="iconLink widthAuto">Display Name</th>
<th class="iconLink widthAuto">Url Name</th>
<th class="iconLink widthAuto">Active</th>
</tr>
<thead>
<tbody>
</tbody>
</table>

MVC3: How do I validate a drop down list?

In MVC2 the validation I use for a drop down list works;
<tr>
<td align="right">
<%: Html.LabelFor(model => model.contract.ContractTypeId)%><span class="error">*</span>
</td>
<td>
<%: Html.DropDownListFor(model => model.contract.ContractTypeId, Model.contractTypesSelectList, "<--Select-->")%>
<%: Html.ValidationMessageFor(model => model.contract.ContractTypeId)%>
</td>
</tr>
and with data annotation;
[DisplayName("Contract Prefix")]
[UIHint("DropDownList")]
[Required(ErrorMessage = "You must select a Contract Prefix")]
public int ContractTypeId { get; set; }
If I try this in MVC3, it no longer works;
<tr>
<td align="right">
#Html.LabelFor(model => model.contract.ContractTypeId)<span class="error">*</span>
</td>
<td>
#Html.DropDownListFor(model => model.contract.ContractTypeId, Model.contractTypesSelectList, "<--Select-->")
#Html.ValidationMessageFor(model => model.contract.ContractTypeId)
</td>
</tr>
data annotation;
[DisplayName("Contract Prefix")]
[UIHint("DropDownList")]
[Required(ErrorMessage = "You must select a Contract Prefix")]
public int ContractTypeId { get; set; }
What am I doing wrong?
EDIT
Actually what is happening is that when I click submit, the other fields are flagging up as invalid. When I correct them and click submit, then the drop downs flag up as invalid. So it kind of works, but should work all at the same time, rather than in this sequence.
My controller is;
#region CREATE
/********
* CREATE
***** */
[Authorize(Roles = "Inputter,Administrator")]
public ViewResult Create()
{
return View(new ContractViewModel());
}
//
// POST: /Contract/Create
[Authorize(Roles = "Inputter,Administrator")]
[HttpPost]
public ActionResult Create(ContractViewModel contractViewModel)
{
if (ModelState.IsValid)
{
CapitaliseNames(ref contractViewModel);
int contractId = contractViewModel.contract.Add();
// Store the Addresses for Client and Contract Administrator on the database,
// and store the Ids of the new addresses on the Contract object.
contractViewModel.clientContact.ContractId = contractId;
contractViewModel.contractAdministratorContact.ContractId = contractId;
int clientContactId = contractViewModel.clientContact.Add();
int contractAdministratorContactId
= contractViewModel.contractAdministratorContact.Add();
contractViewModel.contract.Update(clientContactId, contractAdministratorContactId);
return RedirectToAction("List");
}
return View(new ContractViewModel());
}
private static void CapitaliseNames(ref ContractViewModel contractViewModel)
{
contractViewModel.clientContact.ContactName = contractViewModel.clientContact.ContactName.UppercaseFirst();
contractViewModel.clientContact.NameOfContact = contractViewModel.clientContact.NameOfContact.UppercaseFirst();
contractViewModel.contractAdministratorContact.ContactName = contractViewModel.contractAdministratorContact.ContactName.UppercaseFirst();
contractViewModel.contractAdministratorContact.NameOfContact = contractViewModel.contractAdministratorContact.NameOfContact.UppercaseFirst();
}
#endregion
My View is;
#model HITOC.Models.ContractViewModel
#{
ViewBag.Title = "Create";
}
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#contract_ContractNo_Letter').setMask({ mask: 'a' });
$('#contract_ContractNo_Number').setMask({ mask: '999', type: 'reverse' });
$('#contract_ContractPeriodInWeeks').setMask({ mask: '999', type: 'reverse' });
$('#contract_ContractValue').setMask({ mask: '99.999999999999', type: 'reverse', defaultValue: '000' });
});
</script>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<h1>CREATE an Instruction to Open File Form</h1>
<hr />
<p>DIRECTOR OR HEAD OF DIVISION <b>ONLY</b> TO INSTRUCT</p>
<fieldset>
<legend>Enter the contract details here:</legend>
<p>Where you see <span class="error">*</span> you must enter data.</p>
<table>
<tr>
<td align="right">
#Html.LabelFor(model => model.contract.SignOffDate)<span class="error">*</span>
</td>
<td>
#Html.EditorFor(model => model.contract.SignOffDate)
#Html.ValidationMessageFor(model => model.contract.SignOffDate)
</td>
</tr>
<tr>
<th colspan="2">-- Enter Contract Number</th>
</tr>
<tr>
<td align="right">
#Html.LabelFor(model => model.contract.ContractTypeId)<span class="error">*</span>
</td>
<td>
#Html.DropDownListFor(model => model.contract.ContractTypeId, Model.contractTypesSelectList, "<--Select-->")
#Html.ValidationMessageFor(model => model.contract.ContractTypeId)
</td>
</tr>
<tr>
<td align="right">
#Html.LabelFor(model => model.contract.ContractNo_Letter)<span class="error">*</span>
</td>
<td>
#Html.TextBoxFor(model => model.contract.ContractNo_Letter,
new { autocomplete = "off", maxlength = "1", style = "width:15px;text-transform: uppercase;" })
#Html.ValidationMessageFor(model => model.contract.ContractNo_Letter)
</td>
</tr>
<tr>
<td align="right">
#Html.LabelFor(model => model.contract.ContractNo_Number)<span class="error">*</span>
</td>
<td>
#Html.TextBoxFor(model => model.contract.ContractNo_Number,
new { autocomplete = "off", maxlength = "3", style = "width:30px;" })
#Html.ValidationMessageFor(model => model.contract.ContractNo_Number)
</td>
</tr>
<tr>
<td align="right">
#Html.LabelFor(model => model.contract.ContractNo_Suffix)
</td>
<td>
#Html.TextBoxFor(model => model.contract.ContractNo_Suffix,
new { maxlength = "2", style = "width:30px;text-transform: uppercase;" })
</td>
</tr>
<tr>
<th colspan="2">-- Enter Estimate and Order Details</th>
</tr>
<tr>
<td align="right">
#Html.LabelFor(model => model.contract.EstimateNumber)<span class="error">*</span>
</td>
<td>
#Html.TextBoxFor(model => model.contract.EstimateNumber,
new { autocomplete = "off", style = "text-transform: uppercase;" })
#Html.ValidationMessageFor(model => model.contract.EstimateNumber)
</td>
</tr>
<tr>
<td align="right">
#Html.LabelFor(model => model.contract.ClientOrderNumber)
</td>
<td>
#Html.EditorFor(model => model.contract.ClientOrderNumber)
</td>
</tr>
<tr>
<td align="right">
#Html.LabelFor(model => model.contract.InstructionWithoutClientOrder)<br />
(Only if no Client Order Number)
</td>
<td>
#Html.TextAreaFor(model => model.contract.InstructionWithoutClientOrder,
new { maxlength = "255", style = "width:200px;height:100px;"})
</td>
</tr>
<tr>
<td align="right">
#Html.LabelFor(model => model.contract.GivenDate)<span class="error">*</span>
</td>
<td>
#Html.EditorFor(model => model.contract.GivenDate)
#Html.ValidationMessageFor(model => model.contract.GivenDate)
</td>
</tr>
<tr>
<th colspan="2">-- Enter Client Details</th>
</tr>
<tr>
<td align="right">
Client Organisation Name<span class="error">*</span>
</td>
<td>
#Html.TextBoxFor(model => model.clientContact.ContactName, new { autocomplete = "off", style = "text-transform: capitalize;" })
#Html.ValidationMessageFor(model => model.clientContact.ContactName)
</td>
</tr>
<tr>
<td align="right">
Client Address<span class="error">*</span>
</td>
<td>
#Html.EditorFor(model => model.clientContact.AddressLine1)
#Html.ValidationMessageFor(model => model.clientContact.AddressLine1)
</td>
</tr>
<tr>
<td></td>
<td>
#Html.EditorFor(model => model.clientContact.AddressLine2)
</td>
</tr>
<tr>
<td align="right">
Post code<span class="error">*</span>
</td>
<td>
#Html.TextBoxFor(model => model.clientContact.PostCode,
new { autocomplete = "off", style = "text-transform: uppercase;" })
#Html.ValidationMessageFor(model => model.clientContact.PostCode)
</td>
</tr>
<tr>
<td align="right">
Name of contact
</td>
<td>
#Html.TextBoxFor(model => model.clientContact.NameOfContact, new { autocomplete = "off", style = "text-transform: capitalize;" })
#Html.ValidationMessageFor(model => model.clientContact.NameOfContact)
</td>
</tr>
<tr>
<td align="right">
Tel No
</td>
<td>
#Html.EditorFor(model => model.clientContact.Phone)
#Html.ValidationMessageFor(model => model.clientContact.Phone)
</td>
</tr>
<tr>
<th colspan="2">-- Enter Contract Administrator Details</th>
</tr>
<tr>
<td></td>
<td><input id="chkCopyContact" type="checkbox" name="chkCopyContact" /> Click here to copy across the client contact details </td>
</tr>
<tr>
<td align="right">
Name<span class="error">*</span>
</td>
<td>
#Html.TextBoxFor(model => model.contractAdministratorContact.ContactName, new { autocomplete = "off", style = "text-transform: capitalize;" })
#Html.ValidationMessageFor(model => model.contractAdministratorContact.ContactName)
</td>
</tr>
<tr>
<td align="right">
Address<span class="error">*</span>
</td>
<td>
#Html.EditorFor(model => model.contractAdministratorContact.AddressLine1)
#Html.ValidationMessageFor(model => model.contractAdministratorContact.AddressLine1)
</td>
</tr>
<tr>
<td></td>
<td>
#Html.EditorFor(model => model.contractAdministratorContact.AddressLine2)
</td>
</tr>
<tr>
<td align="right">
Post code<span class="error">*</span>
</td>
<td>
#Html.TextBoxFor(model => model.contractAdministratorContact.PostCode,
new { autocomplete = "off", style = "text-transform: uppercase;" })
#Html.ValidationMessageFor(model => model.contractAdministratorContact.PostCode)
</td>
</tr>
<tr>
<td align="right">
Name of contact
</td>
<td>
#Html.TextBoxFor(model => model.contractAdministratorContact.NameOfContact,
new { autocomplete = "off", style = "text-transform: capitalize;" })
#Html.ValidationMessageFor(model => model.contractAdministratorContact.NameOfContact)
</td>
</tr>
<tr>
<td align="right">
Tel No
</td>
<td>
#Html.EditorFor(model => model.contractAdministratorContact.Phone)
#Html.ValidationMessageFor(model => model.contractAdministratorContact.Phone)
</td>
</tr>
<tr>
<th colspan="2">-- Enter Contract Title/Address</th>
</tr>
<tr>
<td align="right">
#Html.LabelFor(model => model.contract.ContractTitle)<span class="error">*</span>
</td>
<td>
#Html.EditorFor(model => model.contract.ContractTitle)
#Html.ValidationMessageFor(model => model.contract.ContractTitle)
</td>
</tr>
<tr>
<td></td>
<td>
#Html.EditorFor(model => model.contract.ContractAddressLine1)
</td>
</tr>
<tr>
<td></td>
<td>
#Html.EditorFor(model => model.contract.ContractAddressLine2)
</td>
</tr>
<tr>
<td align="right">
Post code<span class="error">*</span>
</td>
<td>
#Html.TextBoxFor(model => model.contract.ContractPostCode,
new { autocomplete = "off", style = "text-transform: uppercase;" })
#Html.ValidationMessageFor(model => model.contract.ContractPostCode)
</td>
</tr>
<tr>
<th colspan="2">-- Enter Work Description</th>
</tr>
<tr>
<td align="right"><span class="error">*</span></td>
<td >
#Html.TextAreaFor(model => model.contract.WorkDescription,
new { maxlength = "255", style = "width:200px;height:100px;" })
#Html.ValidationMessageFor(model => model.contract.WorkDescription)
</td>
</tr>
<tr>
<th colspan="2">-- Enter Contract Details</th>
</tr>
<tr>
<td align="right">
#Html.LabelFor(model => model.contract.StartDate)
</td>
<td>
#Html.EditorFor(model => model.contract.StartDate)
#Html.ValidationMessageFor(model => model.contract.StartDate)
</td>
</tr>
<tr>
<td align="right">
#Html.LabelFor(model => model.contract.ContractPeriodInWeeks)<span class="error">*</span>
</td>
<td>
#Html.TextBoxFor(model => model.contract.ContractPeriodInWeeks, new { style = "width:30px" })
#Html.ValidationMessageFor(model => model.contract.ContractPeriodInWeeks)
</td>
</tr>
<tr>
<td align="right">
#Html.LabelFor(model => model.contract.OperationsManagerUserId)<span class="error">*</span>
</td>
<td>
#Html.DropDownListFor(model => model.contract.OperationsManagerUserId, Model.operationManagerSelectList, "<--Select-->")
#Html.ValidationMessageFor(model => model.contract.OperationsManagerUserId)
</td>
</tr>
<tr>
<td align="right">
#Html.LabelFor(model => model.contract.ContractValue)
</td>
<td>
#Html.TextBoxFor(model => model.contract.ContractValue, new {style = "width:120px" })
(Leave as zero if not decided yet).
#Html.ValidationMessageFor(model => model.contract.ContractValue)
</td>
</tr>
<tr>
<td align="center" colspan="2" style="padding-top:20px;"><input type="submit" value="Create" /></td>
</tr>
</table>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "List")
</div>
Your view model doesn't make sense. You are putting Required attribute on a non-nullable integer property which will have always a value (0 in your case). So start by modifying your view model:
[DisplayName("Contract Prefix")]
[UIHint("DropDownList")]
[Required(ErrorMessage = "You must select a Contract Prefix")]
public int? ContractTypeId { get; set; }
Now you can have dropdown lists with null values:
#Html.DropDownListFor(
x => x.contract.ContractTypeId,
Model.contractTypesSelectList,
"<--Select-->"
)
#Html.ValidationMessageFor(x => x.contract.ContractTypeId)
Then if you want to do client side validation in ASP.NET MVC 3, jQuery and the jQuery validate plugins are used for this. So make sure you have included the following scripts to your page:
jquery.validate.js
jquery.validate.unobtrusive.js
Also make sure that your controller action receives properly the selected value:
[HttpPost]
public ActionResult Foo(MyViewModel model)
{
if (!ModelState.IsValid)
{
// there was an error => redisplay the view
return View(model);
}
// model.contract.ContractTypeId will contain a value
// at this stage here => use it to do some processing
...
}

Resources