I'm trying to create a way so that when clicking the submit button or a link, do the submission
and remain in the same modal dialog.
My program has two forms within the same dialog, one is not shown until the first is submited and i would like that on submiting the first form load, within the same dialog.
For the load dialog i have this code:
function loadDialog(tag, event, target) {
event.preventDefault();
var $loading = $('<img src="../../Content/assets/images/nivo-loader.gif" alt="loading" class="ui-loading-icon">');
var $url = $(tag).attr('href');
var $title = $(tag).attr('title');
var $dialog = $('<div></div>');
$dialog.empty();
$dialog
.append($loading)
.load($url)
.dialog({
autoOpen: false
, title: $title
, width: 600
, modal: true
, minHeight: 200
, show: 'fade'
, hide: 'fade'
});
});
Then in the Create.cshtml:
#model Mvcproject.Models.MyModel
<script language="javascript" type="text/javascript">
$(function () {
$("input[type=submit]")
.button(
);
$('a.modalDlg2').live("click", function (event) { loadDialog('#modalDlg', event, '#Receipt Create'); });
/*$('input.Submit').live("click", function (event) {
e.preventDefault();
loadDialog('#modalDlg', event, '#Receipt Create');
});*/
$(".demo button").button({
icons:
{
primary: 'ui-icon-plusthick'
}
});
});
</script>
<h2>
Add line</h2>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset class="createReceipt">
<legend>User login</legend>
#if (ViewBag.Created)
{
<table class="createTable">
<tr>
<td rowspan="4">
<img src="../../Images/no_image.jpg" width="100" height="100" />
</td>
<th colspan="1">
#Html.LabelFor(model => model.User.Name)
</th>
<td colspan="5">
#Html.EditorFor(model => model.User.Name)
#Html.ValidationMessageFor(model => model.User.Name)
</td>
</tr>
<tr>
<th colspan="1">
#Html.LabelFor(model => model.User.Email)
</th>
<td colspan="5">
#Html.EditorFor(model => model.User.Email)
#Html.ValidationMessageFor(model => model.User.Email)
</td>
</tr>
<tr>
<th colspan="1">
#Html.LabelFor(model => model.User.Password)
</th>
<td colspan="5">
#Html.EditorFor(model => model.User.Password)
#Html.ValidationMessageFor(model => model.User.Password)
</td>
</tr>
<!--User picture-->
<tr>
<td>
<input type="file" value="browse" name="Browse" accept="image/gif, image/jpeg, image/jpg" />
</td>
</tr>
</table>
<p>
<input type="submit" class="Submit" value="Create" />
<buttonreceipt style="width: 150px; text-align: left">#Html.ActionLink("Create", "Create")</buttonreceipt>
</p>
}
else
{
<!-- This will be displayed when user data is submited and inserted into database-->
<table class="createTable">
<tr>
<th colspan="1">
#Html.LabelFor(model => model.User.Name)
</th>
<td colspan="5">
#Html.DisplayFor(model => model.User.Name)
</td>
</tr>
<tr>
<th colspan="1">
#Html.LabelFor(model => model.User.Email)
</th>
<td colspan="5">
#Html.DisplayFor(model => model.User.Email)
</td>
</tr>
<tr>
<td colspan="1">
<img src="#Model.User.Picture"/>
</td>
</tr>
</table>
}
</fieldset>
}
#if (!ViewBag.Created)
{
#Html.Partial("_AddUserInformation");
}
ViewBag.Created is either false or true depending on if user data has been inserted with success into database and that functionality is already done.
And _AddUserInformation.cshtml has other information for the user that is trying to register, like address and country...
Hope this explains better my problem.
You can use the jQuery post() function to send data to an address. You'll need to pick out the data from your fields manually using jQuery selectors (shouldn't be difficult) as well as configure a function to receive and treat the data. This link on post should give you what you need to get started. http://api.jquery.com/jQuery.post/
Related
I'm new to .Net Razor pages and followed this tutorial by FreeCodeCamp
I made an Index page with the help of the tutorial and wanted to add a copy button beside the entries but can't find a way to do so, here is the image of how the table looks, and here is the code:
//Index.cshtml.cs
private readonly ApplicationDbContext _db;
public IndexModel(ApplicationDbContext db)
{
_db = db;
}
public IEnumerable<PasswordEntry> PasswordEntries { get; set; }
public async Task OnGet()
{
PasswordEntries = await _db.PasswordEntry.ToListAsync();
}
//Index.cshtml
<br />
<div class="container row p-0 m-0">
<div class="col-9">
<h4>Passwords</h4>
</div>
</div>
<div class="col-12 border p-3 mt-3">
<form method="post">
#if (Model.PasswordEntries.Count() > 0)
{
<table class="table table-striped border">
<tr class="table-secondary">
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Name"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Url"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Email"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Username"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Password"></label>
</th>
<th>
</th>
</tr>
#foreach (var item in Model.PasswordEntries)
{
<tr>
<td>
#Html.DisplayFor(m => item.Name)
</td>
<td>
#Html.DisplayFor(m => item.Url)
</td>
<td>
#Html.DisplayFor(m => item.Email)
</td>
<td>
#Html.DisplayFor(m => item.Username)
</td>
<td>
#Html.TextBoxFor(m => item.Password, new { type = "password", disabled = "disabled" })
</td>
<td>
<button asp-page-handler="Delete" asp-route-id="#item.Id">Delete</button>
<a asp-page="Edit" asp-route-id="#item.Id">Edit</a>
</td>
</tr>
}
</table>
}
else
{
<h1>no entries available</h1>
}
</form>
</div>
I did try adding a copy button beside the delete and edit buttons with onClick function, on click it would call a funcition in #section Script area, but it didn't work probably cause the foreach loop ends after displaying the result,
what would be a good way to implement the copy button?
If you want to copy the line when click Copy button,here is a demo:
<div class="col-12 border p-3 mt-3">
<form method="post">
#if (Model.PasswordEntries.Count() > 0)
{
<table class="table table-striped border">
<tr class="table-secondary">
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Name"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Url"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Email"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Username"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Password"></label>
</th>
<th>
</th>
</tr>
#foreach (var item in Model.PasswordEntries)
{
<tr>
<td>
#Html.DisplayFor(m => item.Name)
</td>
<td>
#Html.DisplayFor(m => item.Url)
</td>
<td>
#Html.DisplayFor(m => item.Email)
</td>
<td>
#Html.DisplayFor(m => item.Username)
</td>
<td>
#Html.TextBoxFor(m => item.Password, new { type = "password", disabled = "disabled" })
</td>
<td>
<button asp-page-handler="Delete" asp-route-id="#item.Id">Delete</button>
<button onclick="copy(this)">Copy</button>
<a asp-page="Edit" asp-route-id="#item.Id">Edit</a>
</td>
</tr>
}
</table>
}
else
{
<h1>no entries available</h1>
}
</form>
</div>
js:
#section Scripts{
<script>
function copy(t) {
$("table")[0].innerHTML += $(t).parent().parent()[0].outerHTML;
}
</script>
}
result:
Update:
If you want to copy password to clipboard.Try to use the folowing js function:
function copy(t) {
var password = $(t).parent().parent()[0].children[4].children[0].value;
navigator.clipboard.writeText(password);
}
I want to replace those three fields Edit/Details/Delete with icons I just downloaded. The icons are with size 512x512, will this be a problem? Can I resize them in the code (how), or I should resize them using some program.
I've been searching through the net and I found some very long pieces of C# code but I have no idea where to put it in order to replace the text of those properties with the icons.
Here is my HTML:
#using PagedList.Mvc;
#model PagedList.IPagedList<Rating_System.Models.tblTeacher>
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
#{
ViewBag.Title = "Teachers List";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Teachers</h2>
<p>
#Html.ActionLink("Add new", "Create")
</p>
#using (Html.BeginForm("Index", "Teachers", FormMethod.Get))
{
<p>
Търсене: #Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
<input type="submit" value="Search" />
</p>
}
<table class="table">
<tr>
<th>
</th>
<th>
#Html.DisplayNameFor(model => model.First().FirstName)
</th>
<th>
#Html.DisplayNameFor(model => model.First().SecondName)
</th>
<th>
#Html.DisplayNameFor(model => model.First().Title)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
<img src="#Url.Action("GetImage", "Teachers", new {item.ID})" width="45" height="45" />
</td>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.SecondName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Title)
</td>
<td>
#Html.ActionLink("Редактирай", "Edit", new { id = item.ID }) |
#Html.ActionLink("Детайли", "Details", new { id = item.ID }) |
#Html.ActionLink("Изтрий", "Delete", new { id = item.ID })
</td>
</tr>
}
</table>
#Html.PagedListPager(Model, page => Url.Action("Index", new { page, pageSize = Model.PageSize }))
Results #Model.FirstItemOnPage - #Model.LastItemOnPage от общо #Model.TotalItemCount Teachers
try with this code
<a href="#Url.Action("ActionName", "ControllerName", new { id = item.ID })">
<img src="#Url.Content("~/Content/imgname.jpg")" />
</a>
If you want to use an icon (Image) use the following code:
#Html.ActionLink("Редактирай", "Edit", new { id = item.ID }, new { #class="class" })
Then write you css class to include a background image
a.class
{
background: url(../Images/image.gif) no-repeat top left;
width: 50px;
height: 50px;
display: block;
text-indent: -9999px; /* hides the link text */
}
However, I would suggest using bootstrap glyphicons for example
<a href="#Url.Action("Action", "Controller")" class="btn btn-info">
Your link text
<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
</a>
Or
<span class="glyphicon glyphicon-ok" style="cursor:pointer" onclick="JavascriptFunction()"></span>
And in Javascript
function JavascriptFunction() {
window.location.href = encodeURI("/Controller/Action/");
}
You can pass the ID through the javascript function
I have the code below which loads on edit mode. but when i get the infor back to server it dosent return any rows any ideas why. the method does go into the post method below. this will be a update method in edit mode.
#model List<SubjectSuggestionModel>
#using Telerik.Sitefinity.UI.MVC
#using Telerik.Sitefinity.UI.MVC.Helpers
<script type="text/javascript">
$(document).ready(function () {
$("#grid").kendoGrid({
sortable: true,
pageable: true,
dataSource: { pageSize: 20 }
});
});
</script>
<div class="container">
<fieldset>
<table id="grid">
<thead>
<tr>
<th data-sortable="false">
Subject ID
</th>
<th data-sortable="false">
Suggestion order
</th>
<th data-field="QuestionText">
Suggested subject
</th>
</th>
</tr>
</thead>
#using (Html.BeginFormSitefinity("editSubjectSuggestions", "editSubjectSuggestions"))
{
#Html.ValidationSummary(true)
<tbody>
#foreach (var i in Model)
{
<tr>
<td>#Html.TextBoxFor(model => i.subject_id, new { #readonly = "readonly" })
</td>
<td>#Html.TextBoxFor(model => i.suggestion_order)
</td>
<td>#Html.TextBoxFor(model => i.suggested_subject_id)
</td>
</tr>
}
</tbody>
}
</table>
<input type="submit" value="confirm" runat="server" />
</fieldset>
</div>
Action methods
[HttpPost]
public ActionResult editSubjectSuggestions(List<SubjectSuggestionModel> models)
{
return View("subjectSuggestion", prsubList.getSubjectSuggestionsList(
Convert.ToInt32(Session["subjectID"].ToString())));
}
Using a foreachloop generates duplicate id attributes (invalid html) and duplicate name attributes without indexers which cannot be bound to a collection. You must use a for loop or a custom EditorTemplate for the type.
Using a for loop
<tbody>
#for (int i = 0; i < Model.Count; i++)
{
<tr>
<td>#Html.TextBoxFor(m => m[i].subject_id, new { #readonly = "readonly" })</td>
<td>#Html.TextBoxFor(m => m[i].suggestion_order)</td>
<td>#Html.TextBoxFor(m => m[i].suggested_subject_id)</td>
</tr>
}
</tbody>
Using an EditorTemplate
In /Views/Shared/EditorTemplates/SubjectSuggestionModel.cshtml
#model SubjectSuggestionModel
<tr>
<td>#Html.TextBoxFor(m => m.subject_id, new { #readonly = "readonly" })</td>
<td>#Html.TextBoxFor(m => m.suggestion_order)</td>
<td>#Html.TextBoxFor(m => m.suggested_subject_id)</td>
</tr>
and in the main view
<tbody>
#Html.EditorFor(m => m)
</tbody>
I have a listing table displaying some information from the database in an asp.net mvc website.
What i am trying to do is to check if the item status is 1 and if comments exists to display a little icon where the user will click on it and see the specific comment for that item.
So in the listing table it seems to display fine that icon according to the above criteria but when i click on a specific listing it opens all dialogs with comments for all other listings with the same item status instead of the one i have chosen.
Can you please help me on what am i doing wrong ?
<table id="listTable" style="width:100%;" >
<tr>
<th style="text-align:center">
#
</th>
<th style="padding-left:5px;">
Item Name
</th>
<th>
Start Date
</th>
<th>
End Date
</th>
<th>
Request Date
</th>
<th>
Request Status
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.BookingId)
</td>
<td>
<a href="#Url.Action("ItemDetails", new {id=item.ItemId })" title="#item.Item.ItemDescription">
#Html.DisplayFor(modelItem => item.Item.ItemName)
</a>
</td>
<td>
#Html.DisplayFor(modelItem => item.StartDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.EndDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.RequestDate)
</td>
#if (item.StatusCodeId == 1)
{
<td style="color:#DD7500">
#Html.DisplayFor(modelItem => item.StatusCode.StatusCodeName)
#if (item.Comments != null)
{
<img class="orangeclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" />
<div class="orangedialog" title="Tutor Comments">
<p> #item.Comments</p>
</div>
}
</td>
}
else if (item.StatusCodeId == 2)
{
<td style="color:darkgreen">
#Html.DisplayFor(modelItem => item.StatusCode.StatusCodeName)
#if (item.Comments != null)
{
<img id="greenclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" />
<div id="greendialog" title="Tutor Comments">
<p>#item.Comments</p>
</div>
}
</td>
}
else if (item.StatusCodeId == 3)
{
<td style="color:red">
#Html.DisplayFor(modelItem => item.StatusCode.StatusCodeName)
#if (item.Comments != null)
{
<img id="redclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" />
<div id="reddialog" title="Tutor Comments">
<p>#item.Comments</p>
</div>
}
</td>
}
else if (item.StatusCodeId == 4)
{
<td style="color:black">
#Html.DisplayFor(modelItem => item.StatusCode.StatusCodeName)
#if (item.Comments != null)
{
<img id="blackclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" />
<div id="blackdialog" title="Tutor Comments">
<p>#item.Comments</p>
</div>
}
</td>
}
</tr>
}
</table>
<script>
$(function ()
{
$('.orangedialog, #greendialog, #reddialog, #blackdialog').dialog({
autoOpen: false,
show: { effect: "blind", duration: 1000 },
hide: { effect: "explode", duration: 1000 },
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
$("#greenclicker").live("click", function () {
$("#greendialog").dialog("open");
});
$('.orangeclicker').live("click", function () {
$(".orangedialog").dialog("open");
});
$("#redclicker").live("click", function () {
$("#reddialog").dialog("open");
});
$("#blackclicker").live("click", function () {
$("#blackdialog").dialog("open");
});
});
</script>
html:
<table id="listTable" style="width:100%;" >
<tr>
<th style="text-align:center">
#
</th>
<th style="padding-left:5px;">
Item Name
</th>
<th>
Start Date
</th>
<th>
End Date
</th>
<th>
Request Date
</th>
<th>
Request Status
</th>
</tr>
<tr>
<td>
192
</td>
<td>
<a href="/Home/ItemDetails/42" title="this is a lab computer">
Lab Computer 1
</a>
</td>
<td>
08/04/2014 09:00:00
</td>
<td>
09/04/2014 09:00:00
</td>
<td>
26/03/2014
</td>
<td style="color:#DD7500">
In Progress
<img class="orangeclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="/Images/chat_icon.gif" />
<div class="orangedialog" title="Tutor Comments">
<p> testtttttttttttttt</p>
</div>
</td>
</tr>
<tr>
<td>
191
</td>
<td>
<a href="/Home/ItemDetails/42" title="this is a lab computer">
Lab Computer 1
</a>
</td>
<td>
01/04/2014 17:03:00
</td>
<td>
02/04/2014 09:05:00
</td>
<td>
26/03/2014
</td>
<td style="color:#DD7500">
In Progress
<img class="orangeclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="/Images/chat_icon.gif" />
<div class="orangedialog" title="Tutor Comments">
<p> You won't get such a fast computer !!!</p>
</div>
</td>
</tr>
<tr>
<td>
190
</td>
<td>
<a href="/Home/ItemDetails/44" title="3 ghz / 6gm ram / 1tb drive">
Ibm Laptop
</a>
</td>
<td>
10/04/2014 09:00:00
</td>
<td>
11/04/2014 09:00:00
</td>
<td>
19/03/2014
</td>
Try the code below. I don't think you can use siblings() because all of the .orangedialog classes will be siblings.
HTML
<img class="orangeclicker" commentid="#item.bookingid" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" />
<div class="orangedialog #item.bookingid" title="Tutor Comments">
<p> #item.Comments</p>
</div>
Javascript
$('.orangeclicker').live("click", function () {
$('.'+$(this).attr('commentid')).dialog("open");
});
Update: The dialog plugin changes the dom around. We added a custom id as shown above.
try this way
<script> $(function ()
{
$(" .orangedialog").dialog({
autoOpen: false,
show: { effect: "blind", duration: 1000 },
hide: { effect: "explode", duration: 1000 },
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
$('.orangeclicker').on("click", function () {
$(this).parent().find(".orangedialog").dialog("open"); //this will open only its respective comments dialog
});
});
Note:Always be updated with the latest jQuery lib, .live() is deprecated and as of jQuery 1.7, use .on
Happy Coding :)
I have a MVC Razor page in C# .Net Framework 3.5.
The page calls for the user to be able to add (flight) items dynamically when a "Add Fare" button is clicked. The items are stored in a list in the overall model for the entire page. When the button is clicked, I call some javascript that serializes the form (so I have access to the model), add a new item to the list in the model, and the item is represented in a partial which I then append to a div in the main page.
I have a problem, however, as I am making use of the JQuery datepicker, and whilst this functionally works ok (i.e. when you click into it, a calendar pops up and you can select a date), the actual calendar button is not being rendered next to my inputs?
Here is the form I am trying to add the partial view into..
#using (Html.BeginForm("ManualFlight", "ShoppingBasket", FormMethod.Post, new {#class="manualFlightForm" }))
{
<div id="shoppingBasketManualFlight" class="whiteCanvas">
<div class="ManualFlightDetails">
<div class="ManualFlightFareContainer"></div>
</div>
<div class="buttonPanel">
<div>
<a class="button borderlessButton" onclick="shoppingBasketAddFare(); return false;">Add Fare</a>
</div>
</div>
</div>
}
This is the javascript I am calling from the onclick:
$.ajax({
type: "POST",
data: $('form.manualFlightForm').serialize(),
url: "/ShoppingBasket/ShoppingBasketAddFare",
cache: false,
traditional: true
}).done(function (responseHtml) {
$(".ManualFlightFareContainer").append(responseHtml);
$('.t2Datepicker').datepicker({
minDate: '+1d',
defaultDate: '+1d',
changeMonth: true,
buttonImage: '/App_Themes/Travel2/Images/calendar_icon.png',
changeYear: true,
dateFormat: 'dd/mm/yy',
maxDate: '+3y'
});
});
Note I am calling datepicker after I have rendered the response I receive back from my call to the controller..
This is the partial that is being added (please ignore the use of tables, I am trying to recreate something that already exists in another part of the site..
#model Travel2.WebUI.ViewModels.ShoppingBasket.ShoppingBasketManualFlightViewModel
<div class="shoppingBasketManualFlightFare">
<table id="tblManualFlight">
<thead>
<tr>
<th rowspan="2">Passenger Type</th>
<th colspan="2">Departure Details</th>
<th colspan="2">Arrival Details</th>
<th rowspan="2">Flight No.</th>
<th rowspan="2">Class</th>
<th rowspan="2">Cost</th>
<th rowspan="2">Sale Price</th>
<th rowspan="2">Commission</th>
<th rowspan="2">PEX</th>
</tr>
<tr>
<th>IATA</th>
<th>Date & Time</th>
<th>IATA</th>
<th>Date & Time</th>
</tr>
</thead>
<tr>
<td class="paxType middle">
#Html.DropDownListFor(m => m.Fares[Model.Fares.Count - 1].PassengerType, ViewBag.PassengerTypes as IEnumerable<SelectListItem>)
</td>
<td class="iata">
#Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].DepartureIATA)
</td>
<td class="dateTime">
#Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].DepartureDate, new { Class="t2Datepicker" })
#Html.DropDownListFor(m => m.Fares[Model.Fares.Count - 1].DepartureHour, ViewBag.Hours as IEnumerable<SelectListItem>)
#Html.DropDownListFor(m => m.Fares[Model.Fares.Count - 1].DepartureMinute, ViewBag.Minutes as IEnumerable<SelectListItem>)
</td>
<td class="iata">
#Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].DestinationIATA)
</td>
<td class="dateTime">
#Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].DestinationDate, new { Class = "t2Datepicker" })
#Html.DropDownListFor(m => m.Fares[Model.Fares.Count - 1].DestinationHour, ViewBag.Hours as IEnumerable<SelectListItem>)
#Html.DropDownListFor(m => m.Fares[Model.Fares.Count - 1].DestinationMinute, ViewBag.Minutes as IEnumerable<SelectListItem>)
</td>
<td class="middle">
#Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].FlightNumber)
</td>
<td class="middle">
#Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].FlightClass)
</td>
<td class="middle">
#Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].Cost)
</td>
<td class="middle">
#Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].SalePrice)
</td>
<td class="middle">
#Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].Commission)
</td>
<td class="middle">
#Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].PEX)
</td>
</tr>
</table>
</div>
Just for completion, here is the method in the controller that handles adding a new instance to the model and returning back the partial view.
[HttpPost, STPAuthorize]
public ActionResult ShoppingBasketAddFare(ShoppingBasketManualFlightViewModel model)
{
if (model.Fares == null)
{
model.Fares = new List<ShoppingBasketManualFlightFareViewModel>();
}
ViewBag.PassengerTypes = GetPassengerTypes();
ViewBag.Hours = GetHours();
ViewBag.Minutes = GetMinutes();
model.Fares.Add(new ShoppingBasketManualFlightFareViewModel());
return PartialView("ShoppingBasketAddFare", model);
}
Any ideas as to why the calendar image isn't rendering?
Thanks in advance
Your missing the showOn option.
From buttonImage docs
A URL of an image to use to display the datepicker when the showOn
option is set to "button" or "both".
showOn docs
$('.t2Datepicker').datepicker({
minDate: '+1d',
defaultDate: '+1d',
changeMonth: true,
buttonImage: '/App_Themes/Travel2/Images/calendar_icon.png',
changeYear: true,
dateFormat: 'dd/mm/yy',
maxDate: '+3y',,
showOn:'both'
});