I want to create a custom template for ListView (I show products eShop in ListView). I wrote this code:
<script type="text/x-kendo-tmpl" id="template">
<div class="item">
<div class="image">
<a href='#Url.Action("GetDetails", "Products", routeValues: new {id =${ProductID}} )' target='_blank' class='pimg'>
<img src="${ProductThumbnailImageUrl}" alt=" ${ProductTitle}"/>
</a>
<div class="price"> ${kendo.toString(ProductPrice, "n0")} </div>
<div class="name">
</div>
<div class="description_featured" style="min-height: 110px;">
${ProductDescription}
</div>
</div>
</div>
</script>
#(Html.Kendo().ListView(Model)
.Name("listView")
.TagName("div")
.ClientTemplateId("template")
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("Products_Read", "Products"));
dataSource.PageSize(12);
dataSource.ServerOperation(false);
})
.Pageable()
)
I get an error on new {id = ${ProductTitle}}.
This is how you use templates.
This is one on the template i recently used for my web site.
<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<img src='http://cdn.rbgx.net/images/skybazaar/products/medium/${ImageFileName}' alt="${Name} image" />
<div class="productDeatails">
<h3>#:Name#</h3>
# if (EntityType == 2) { #
Click to see products of this category
# } else if(EntityType == 1) { #
# if(parseFloat(SalePrice) > 0 && parseFloat(SalePrice) < parseFloat(Price)) { #
Sale Price #: kendo.toString(SalePrice, "c")#
# } else { #
Price #: kendo.toString(Price, "c")#
# } #
# } #
</div>
</div>
</script>
in your case for ${ProductTitle}
use #: ProductTitle #
Related
I am using Umbraco (mvc) with bootstrap.My template use partial view to load name and job title of staff in template. How I can add div (new row) after 4 iteration.
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
var selection = Model.Content.Site().FirstChild("aboutUs").Children("staff")
.Where(x => x.IsVisible());
}
#foreach(var item in selection){
<div class="row team">
<div class="col-sm-3">
<div class="thumbnail-style">
<h3><a>#item.GetPropertyValue("fullName")</a> <small>#item.GetPropertyValue("jobTitle")</small></h3>
</div>
</div>
</div>
}
Difficulty:
I want to add
<div class="row team">
</div>
after every 4th
<div class="col-sm-3">
</div>
A more easier solution would be the use of the Umbraco helper method InGroupsOf(columns).
#foreach(var group in selection.InGroupsOf(4))
{
<div class="row team">
#foreach(var item in group)
{
<div class="col-sm-3">
<div class="thumbnail-style">
<h3><a>#item.GetPropertyValue("fullName")</a> <small>#item.GetPropertyValue("jobTitle")</small></h3>
</div>
</div>
}
</div>
}
Try:
#foreach(var obj in selection.Select((item, index) => new {item, index}))
{
if(obj.index==0||obj.index%4==0){
#Html.Raw("<div class='row team'>")
}
<div class="col-sm-3">
<div class="thumbnail-style">
<h3><a>#obj.item.GetPropertyValue("fullName")</a> <small>
#obj.item.GetPropertyValue("jobTitle")</small></h3>
</div>
</div>
#if((obj.index+1)%4==0||obj.index+1==selection.Count()){
#Html.Raw("</div>")
}
}
- It will works, Use for loop instead of foreach loop and then just add logic
#for (int i = 1; i < selection.Count; i++)
{
var item = selection[i];
<div class="row team">
<div class="col-sm-3">
<div class="thumbnail-style">
#if (i % 5 == 0)
{
<div class="col-sm-3">
<h4 >D #item</h4> <!--your actual html code-->
</div>
}
else
{
<h4 style="color:red">D #item</h4> <!--your actual html code-->
}
</div>
</div>
</div>
}
I am trying to apply a style by using bootstrap css but every time i am being un-successful .
What i am trying to do is :
<link href="~/Theme/css/chosen.css" rel="stylesheet" />
<link href="~/Theme/Bootstrap37/css/chosen-bootstrap.css" rel="stylesheet" />
<section id="contact-page" class="EditMode" style="display:none;">
<div class="container">
<div class="row ">
<div class="status alert alert-success" style="display: none"></div>
<div class="col-md-12 col-xs-12">
<h5> Change your information</h5>
<form id="" class="" name="c_signup" method="post" action='#Url.Action("CSignUp","Profile", new { area="CPortal"})'
enctype="multipart/form-data" onSubmit="return validation(this)">
<div class="col-xs-6">
<div class="form-group">
<label>Speciality</label>
<div >
#Html.HiddenFor(m => m.SelectedSpecialityTest)
#Html.ListBoxFor(m => m.SelectedSpecialityIds,
new MultiSelectList(Model.Specialities, "OID", "SpecialityDesc"),
new { #class = "chosen-select form-control", #required = "required" })
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
jQuery(document).ready(function () {
$(".chosen-select").chosen({ no_results_text: "Oops, nothing found!" });
});
Now when i see the view then chosen-select dropdown is not displaying instead just a tiny line.
See the complete working same at here:
https://codepen.io/maifs/pen/VWMwWw
I am buidling a mvc web application with entity framework.
Error:
An exception of type 'System.ObjectDisposedException' occurred in
EntityFramework.dll but was not handled in user code
Additional information: The ObjectContext instance has been disposed
and can no longer be used for operations that require a connection.
This is the entity framework part:
Like you see I already include "Alineas" and do .ToList()
public IList<Kop> Handle(RetrieveKoppenForDocumentQuery query)
{
using (var db = new BmDataContext())
{
var koppen = db.Kop.Where(s => s.Document.Id == query.Id)
.Include(s => s.TegelAfbeelding)
.Include(s => s.CollageAfbeeldingen)
.Include(s => s.FinancieleAfbeeldingen)
.Include(s => s.Alineas)
.ToList();
return _orderKoppenByIndex(koppen);
}
}
This is the view KopListItems.cshtml:
#using PGE.Bestuursmonitor.Contracts.DataTypes
#model IList<Kop>
#* Helper for recursively rendering koppen*#
#helper SortableItem(Kop kop)
{
<div class="sortable-item" data-kopid="#kop.Id">
<div class="row">
<div class="col-md-7 title-column">
<i class="fa fa-arrows"></i> #kop.Titel
</div>
<div class="col-md-5">
<div class="col-md-3">
<span>
#kop.KopType
</span>
</div>
<div class="col-md-3">
<span>
#kop.Status
</span>
</div>
<div class="col-md-6">
<span class="pull-right">
#if (#kop.Alineas != null) // on this line I receive the exception
{
// here I would like to do some logic
}
</span>
</div>
</div>
</div>
<div class="sortable-container">
#foreach (var subKop in kop.Koppen)
{
#SortableItem(subKop);
}
</div>
</div>
}
#* Recursively render all kop items *#
<div id="koppen_sortable" class="sortable-container">
#foreach (Kop kop in Model)
{
#SortableItem(kop);
}
</div>
This is the view KoppenList.cshtml:
#model PGE.Bestuursmonitor.ViewModels.Koppen.IKoppenListViewModel
<h1>#Model.DocumentTitel</h1>
#* Render kop list header *#
<div id="koppen_sortable_header">
<div class="row">
<div class="col-md-7"><strong>Titel</strong></div>
<div class="col-md-5">
<div class="col-md-3">
<strong>Type</strong>
</div>
<div class="col-md-3">
<strong>Status</strong>
</div>
<div class="col-md-6">
<span class="pull-right">
<button type="button" id="btn_add_sub" class="btn btn-success" title="Kop aanmaken" role="button" onclick="BM.Koppen.LoadAddKopView(null);">
<i class="fa fa-plus fa-lg"></i> Kop aanmaken
</button>
</span>
</div>
</div>
</div>
</div>
<div id="koppen_sortable_body">
#{ Html.RenderPartial("~/Views/Koppen/KopListItems.cshtml", #Model.Koppen); }
</div>
#* Store document id in html DOM, so javascript can reach it from multiple places *#
<input type="hidden" id="document_id" value="#Model.DocumentId" />
Action in controller:
[HttpGet]
public ActionResult KoppenList(string id)
{
ViewBag.PageId = id;
Document document = _retrieveStartPcDocumentQueryHandler.Handle(new RetrieveStartPcDocumentQuery());
RetrieveKoppenForDocumentQuery query = new RetrieveKoppenForDocumentQuery
{
Id = document.Id
};
IList<Kop> koppen = _retrieveKoppenForDocumentQueryHandler.Handle(query);
_koppenListViewModel.Koppen = koppen;
_koppenListViewModel.DocumentTitel = document.Titel;
_koppenListViewModel.DocumentId = document.Id;
return View("~/Views/Koppen/KoppenList.cshtml", _koppenListViewModel);
}
Like you see in KopListItems.cshtml there are 2 foreach loops. The outer foreach loop is working fine and can read "Alineas". The inner foreach which shows the sub items gives this strange error. What is going wrong? Im stuck.
This is the solution. You need to get the alineas and content also on sub level:
public IList<Kop> Handle(RetrieveKoppenForDocumentQuery query)
{
using (var db = new BmDataContext())
{
var koppen = db.Kop.Where(s => s.Document.Id == query.Id)
.Include(s => s.TegelAfbeelding)
.Include(s => s.CollageAfbeeldingen)
.Include(s => s.FinancieleAfbeeldingen)
.Include(s => s.Alineas.Select(a => a.Content))
.Include(s => s.Koppen.Select(k => k.Alineas.Select(a => a.Content)))
.Include(s => s.Koppen.Select(k => k.Koppen.Select(x => x.Alineas.Select(a => a.Content))))
.ToList();
return _orderKoppenByIndex(koppen);
}
}
I have created a form and i am using validation on it but whenever i click on submit it not redirect and shows the same page.Even i have set the default values then also no help.
please help me.
Even i have check on varuious form no help.
registration form class
class registrationform extends sfForm {
//put your code here
protected static $option=array('Lab Technician','Lecturur','Assistant Professor','Professor','H.O.D');
public function configure() {
$this->setWidgets(array(
'first_Name'=>new sfWidgetFormInputText(array('default'=>'hello'),array('class' => 'textView'),array('default'=>'hello')),
'middle_Name'=>new sfWidgetFormInputText(array('default'=>'hello'),array('class' => 'textView')),
'last_Name'=>new sfWidgetFormInputText(array('default'=>'hello'),array('class'=>'textView')),
'age'=>new sfWidgetFormInputText(array('default'=>'hello'),array('class'=>'textView')),
));
$this->setValidators(array(
'first_Name' => new sfValidatorString(array('required' => 'The message field is required.')),
'middle_Name' => new sfValidatorString(array('required' => 'The message field is required.')),
'last_Name' => new sfValidatorString(array('required' => 'The message field is required.')),
'age' => new sfValidatorString(array('required' => 'The message field is required.')),
));
$this->widgetSchema->setNameFormat('contact[%s]');
}
****action.class.php****
this is a class i which i am having my action class code.
public function executeIndex(sfWebRequest $request)
{
// $this->forward('default', 'module');
$this->registration_form = new registrationform();
if ($request->isMethod('POST'))
{
$this->registration_form->disableLocalCSRFProtection();
$this->registration_form->bind($request->getParameter('contact'));
if (!($this->registration_form->isValid()))
{
echo"\hiol";
$this->redirect('registration/thankyou?'.http_build_query($this->registration_form->getValues()));
}
}
indexsuccess
<?php echo stylesheet_tag('form');?>
<div class="page">
<div class="form" >
<form action="<?php echo url_for('registration/index') ?>" method="POST">
<div class="row" id="head">
REGISTRATION FORM
</div>
<div class="row">
<div class="columnLabel"><?php echo $registration_form['first_Name']->renderLabel()?></div>
<div class="columnView"><?php echo $registration_form['first_Name']->render()?></div>
</div>
<div class="row">
<div ><?php echo $registration_form['first_Name']->renderError()?></div>
</div>
<div class="row">
<div class="columnLabel" ><?php echo $registration_form['middle_Name']->renderLabel()?></div>
<div class="columnView" ><?php echo $registration_form['middle_Name']->render()?></div>
</div>
<div class="row">
<div class="columnLabel"><?php echo $registration_form['last_Name']->renderLabel()?></div>
<div class="columnView"><?php echo $registration_form['last_Name']->render()?></div>
</div>
<div class="row">
<div class="columnLabel"><?php echo $registration_form['age']->renderLabel()?></div>
<div class="columnView"><?php echo $registration_form['age']->render()?></div>
</div>
<div class="row">
<div class="columnLabel"><input class="button" type="submit" value="submit" name="submit"></div>
</div>
</form>
</div>
<!-- </div>
</div>
</div>
</div>
</div>-->
Your action class is not saving the form if it's valid. You should save and redirect if the form is valid:
if ($this->registration_form->isValid())
{
$this->registration_form->save();
$this->redirect('registration/thankyou');
}
If you need the form value on the next page, don't pass them in url, but flash instead:
$this->getUser()->setFlash('registration_form', $this->registration_form->getValues());
I have searched multiple examples and have tried several things to get this to work properly. Currently I am trying to get a div to be replaced by using an Ajax.HtmlLink pointing to a PartialViewResult method.
I have tried
Checking network and javascript consoles to make sure my .js are all being loaded
Unbundling the stock jqueryval bundle and including the scripts manually
Double checked I didn't have another DOM element with the same update target Id
Checked my ajaxoptions to ensure everything was correct
I know unobtrusive is working because my Email duplicate remote validation check is working.
I will now show some screen shots of my debugging process
Here is what the page looks like prior to ajax load
My goal is to replace the container on the right that is currently holding email, name, and zipcode values
Here is the result##
This is what my view code looks like
<div class="container">
<br />
<br />
<div class="row">
<div class="col-sm-3">
<div class="sidebar-account">
<div class="row ">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">My Account</div>
<div class="panel-body">
<ul class="nav">
<li>
<a class="active" href="account_dashboard.html">Me</a>
</li>
<li>
#Ajax.ActionLink("Alerts", "ManageAlerts", null, new AjaxOptions
{
HttpMethod = "GET",
UpdateTargetId = "ajax-update",
InsertionMode = InsertionMode.Replace,
OnBegin = "ajaxBegin",
OnFailure = "ajaxFail",
OnComplete = "ajaxComplete",
OnSuccess = "ajaxSuccess"
}, new { #class = "active" })
</li>
<li>
<a class="active" href="account_account.html">Linked Accounts</a>
</li>
<li>
<a class="active" href="account_ads.html">Manage ads</a>
</li>
<li>
<a class="active" href="account_ad_create.html">Create new ad</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row hidden-xs">
<div class="col-lg-12">
<div class="well">
<div class="row ">
<div class="col-lg-3">
<img src="css/images/icons/Crest.png" width="45" />
</div>
<div class="col-lg-9">
<h4 style="margin-top: 0">Increase visibility</h4>
<p>Don't forget to 'bump' your listing to gain more visibility</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-9">
<div id="ajax-update">
#Html.Partial("_ManageUserAccount", Model)
</div>
</div>
<br />
</div>
Partial View Code##
<div id="fadein-div">
<div class="panel panel-default">
<div class="panel-heading">#Model.Username : Alerts</div>
<div class="panel-body">
<br />
<div class="row">
<div class="col-sm-12">
<p><span style="font-weight:bold">Change your alerts!</span></p>
</div>
</div>
<br />
#using (Html.BeginForm("ManageAlerts", "Account", FormMethod.Post, new { #class = "form-vertical", role = "form" }))
{
#Html.AntiForgeryToken()
<fieldset>
<div class="row">
<div class="col-sm-12 ">
<div class="form-group">
<div class="row">
<div class="col-sm-2">
<div class="checkbox">
#Html.CheckBoxFor(P => P.EmailAlertsOn) #Html.LabelFor(P => P.EmailAlertsOn)
</div>
</div>
</div>
</div>
<div id="control-div">
<div class="form-group">
<h3>Email alert options</h3>
</div>
<div class="form-group">
<div class="checkbox">
#Html.CheckBoxFor(P => P.EmailOnNewMessageOn) #Html.LabelFor(P => P.EmailOnNewMessageOn)
</div>
<div class="text-danger">
#Html.ValidationMessageFor(P => P.EmailOnNewMessageOn)
</div>
</div>
<div class="form-group">
<div class="checkbox">
#Html.CheckBoxFor(P => P.EmailOnReplyOn) #Html.LabelFor(P => P.EmailOnReplyOn)
</div>
<div class="text-danger">
#Html.ValidationMessageFor(P => P.EmailOnReplyOn)
</div>
</div>
<div class="form-group">
<div class="checkbox">
#Html.CheckBoxFor(P => P.EmailOnAccountUpdateOn) #Html.LabelFor(P => P.EmailOnAccountUpdateOn)
</div>
<div class="text-danger">
#Html.ValidationMessageFor(P => P.EmailOnAccountUpdateOn)
</div>
</div>
</div>
<br />
<button type="submit" class="btn btn-primary">Save details</button>
</div>
</div>
</fieldset>
}
</div>
</div>
And finally, controller code##
[HttpGet]
public PartialViewResult ManageAlerts()
{
var user = UserManager.FindById(Guid.Parse(User.Identity.GetUserId()));
Models.Account.ManageAlertsViewModel vm = new ManageAlertsViewModel();
vm.Username = user.UserName;
vm.EmailAlertsOn = user.EmailAlertsOn;
vm.EmailOnAccountUpdateOn = user.EmailOnAccountUpdateOn;
vm.EmailOnNewMessageOn = user.EmailOnNewMessageOn;
vm.EmailOnReplyOn = user.EmailOnReplyOn;
return PartialView("_ManageAlerts", vm);
}
<!-- js library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script src="~/Themes/Authenticity%20Forms/Authenty/js/bootstrap.min.js"></script>
<script src="~/Themes/Authenticity%20Forms/Authenty/js/jquery.icheck.min.js"></script>
<script src="~/Themes/Authenticity%20Forms/Authenty/js/waypoints.min.js"></script>
<!-- authenty js -->
<script src="~/Themes/Authenticity%20Forms/Authenty/js/authenty.js"></script>
<!-- preview scripts -->
<script src="~/Themes/Authenticity%20Forms/Authenty/js/preview/jquery.malihu.PageScroll2id.js"></script>
<script src="~/Themes/Authenticity%20Forms/Authenty/js/preview/jquery.address-1.6.min.js"></script>
<script src="~/Themes/Authenticity%20Forms/Authenty/js/preview/scrollTo.min.js"></script>
<script src="~/Themes/Authenticity%20Forms/Authenty/js/preview/init.js"></script>
#Scripts.Render("~/bundles/jqueryval")