Prime UI with ASP .NET MVC

jQuery UI Widgets
Post Reply
levio07
Posts: 4
Joined: 12 Aug 2013, 14:51

24 May 2015, 00:45

HI, I'm a new ASP .NET MVC developper so please where can I find an example of Prime UI with ASP .NET MVC ?

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

24 May 2015, 11:13

PrimeUI is a set of jQuery UI plugins so you can follow any resources that shows integrating ASP.NET MVC with jQuery UI;

http://blog.falafel.com/three-steps-use ... net-mvc-5/
http://www.codeproject.com/Articles/678 ... -Partial-V

levio07
Posts: 4
Joined: 12 Aug 2013, 14:51

24 May 2015, 17:41

Ok, Thanks. I will take a look. I was more familiar with JSF PrimeFaces so I want to know the differences and more about the difficulties I'm about to face... :?

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

25 May 2015, 13:56

We consider porting PrimeUI to ASP.NET MVC as a suite of helpers, what do you think about it, e.g.?

Code: Select all

@PUI.Spinner("value2").Min(0).Max(100).Step(5)

levio07
Posts: 4
Joined: 12 Aug 2013, 14:51

26 May 2015, 01:45

I think It would be great perfect ! The integration and the using will be more easier... I can't wait for it... But I guess there will a new project and a new release especially for .NET MVC (as a comeback of the project PrimeFaces .NET) . Is there any beta version which I could use for test ??

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

26 May 2015, 09:43

Thank you for the feedback, as PrimeUI is simple and helpers are basically just generate String, for me it is a natural path for PrimeUI wrappers.

This week we're working on the new polished showcase of PrimeUI and will do a proof-of-concept with different types of helpers (data, menu, input) that uses PrimeUI underneath. Goal is to use PrimeUI inside MVC helpers so that PrimeUI development is also active along with the MVC helpers.

We hope to do the first release at the end of june and complete work by the end of summer with around 30+ helpers. I've seen commercial helpers from telerik and infragistics, I think we can match them with open source PrimeUI helpers under apache license :)

levio07
Posts: 4
Joined: 12 Aug 2013, 14:51

27 May 2015, 00:09

Ok that's will be great. Just take a look to Telerik prices and you will understand that Prime UI helpers are very expected...

ensemblebd
Posts: 2
Joined: 30 Sep 2016, 16:37

05 Apr 2017, 20:11

Just to share . I've begun abandoning this as I'm moving ENTIRELY away from asp.net Forms. I mean the code is just brutal to maintain. Razor is where it's at, and with razor, there's no need for such things.
I mean one could code @Html.HelperMethod , perhaps that's where focus should be placed as of 2017.

Regardless, here are a couple of my asp.net Forms helpers for anyone that comes across this.

Code: Select all

namespace myapp.Extensions {
	public static class WebControlExtensions {
		public static StateBag PersistFromViewState(this WebControl self,StateBag ViewState) {
			PropertyInfo[] properties = self.GetType().GetProperties();
			foreach (PropertyInfo property in properties) {
				object[] attributes = property.GetCustomAttributes(typeof(PersistToViewState), true);
				if (attributes.Length < 0) {
					if (ViewState[property.Name] != null)
						property.SetValue(self, ViewState[property.Name], null);
				}
			}
			return ViewState;
		}
	}
}

Code: Select all

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Reflection;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Common.Logging;
using myapp.Extensions;
using WebControls = System.Web.UI.WebControls;

/// <summary>
/// https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.formview_events(v=vs.110).aspx
/// https://msdn.microsoft.com/en-us/library/ms178472.aspx
/// http://stackoverflow.com/questions/15442937/assign-complex-object-to-user-control-in-markup
/// </summary>
namespace myapp.Controls.PrimeUI {


	[ParseChildren(true, "Items")]
	[PersistChildren(true)]
	[DefaultProperty("dual")]
	[ToolboxData("<{0}:picklist runat=\"server\" sourcecaption=\"[SourceCaption]\" targetcaption=\"[TargetCaption]\" filter=\"[Filter]\" filtermatchmode=\"[FilterMatchMode]\" responsive=\"[Responsive]\" ontransfer=\"[OnTransfer]\"></{0}:picklist>")]
	public class PickListDual : WebControl {
		private static ILog log = LogManager.GetLogger(typeof(PickListDual));
		private List<Control> m_items = new List<Control>();

		[
			Bindable(true),
			Category("Appearance"),
			DefaultValue("false"),
			Description("Enable drop down filter?"),
			Localizable(true),
			PersistToViewState
		]
		public string Filter { get; set; }

		[
			Bindable(true),
			Category("Appearance"),
			DefaultValue("contains"),
			Description("When Filtering, how we should match text."),
			Localizable(true),
			PersistToViewState
		]
		public string FilterMatchMode { get; set; }

		[
			Bindable(true),
			Category("Appearance"),
			DefaultValue(""),
			Description("What is the target value which is currently selected?"),
			Localizable(true),
			PersistToViewState
		]
		public string Responsive { get; set; }

		[
			Bindable(true),
			Category("Appearance"),
			DefaultValue(""),
			Description("What is the target value which is currently selected?"),
			Localizable(true),
			PersistToViewState
		]
		public string OnTransfer { get; set; }

		[
			Bindable(true),
			Category("Appearance"),
			DefaultValue(""),
			Description("What is the target value which is currently selected?"),
			Localizable(true),
			PersistToViewState
		]
		public string SourceCaption { get; set; }

		[
			Bindable(true),
			Category("Appearance"),
			DefaultValue(""),
			Description("What is the target value which is currently selected?"),
			Localizable(true),
			PersistToViewState
		]
		public string TargetCaption { get; set; }

		[Browsable(false)]
		public List<Control> Items { get { return m_items; } }

		private bool hasCheckedFormControl = false;
		private bool isFormControl { get; set; }

		private bool recurseParentsForTargetOfForm(Control c, bool isFormControl = false) {
			if (c.GetType() == typeof(FormView)) return isFormControl = true;
			else if (c.GetType() == typeof(Page)) return isFormControl;
			else {
				return isFormControl = recurseParentsForTargetOfForm(c.Parent);
			}
		}
		protected override void CreateChildControls() {
			//create a custom container of our choice for your child controls
			foreach (Control ctrl in Items) {
				this.Controls.Add(ctrl);
			}
		}


		protected override void Render(HtmlTextWriter output) {
			output.WriteBeginTag("p-picklist");
			output.WriteAttribute("ID", this.ClientID);
			output.WriteAttribute("name", this.ID);
			if (!String.IsNullOrEmpty(Filter) && !Filter.Contains("false")) output.WriteAttribute("filter", "true");
			if (!String.IsNullOrEmpty(FilterMatchMode)) output.WriteAttribute("filtermatchmode", FilterMatchMode);
			if (!String.IsNullOrEmpty(SourceCaption)) output.WriteAttribute("sourcecaption", SourceCaption);
			if (!String.IsNullOrEmpty(TargetCaption)) output.WriteAttribute("targetcaption", TargetCaption);
			if (!String.IsNullOrEmpty(Responsive) && !Responsive.Contains("false")) output.WriteAttribute("responsive", "");
			if (!String.IsNullOrEmpty(OnTransfer)) output.WriteAttribute("ontransfer", OnTransfer);
			output.Write(HtmlTextWriter.TagRightChar);

			foreach (Control c in this.Controls) {
				c.RenderControl(output);
			}

			output.WriteEndTag("p-picklist");
			output.WriteLine();

		}





		protected override void LoadViewState(object savedState) {
			base.LoadViewState(savedState);
			this.PersistFromViewState(ViewState);
		}

		protected override object SaveViewState() {
			this.PersistToViewState(ViewState);
			return base.SaveViewState();
		}

		protected override void TrackViewState() { base.TrackViewState(); }
		public override ControlCollection Controls { get { this.EnsureChildControls(); return base.Controls; } }


	}
}

Code: Select all

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Reflection;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Common.Logging;
using myapp.Extensions;
using WebControls = System.Web.UI.WebControls;

/// <summary>
/// https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.formview_events(v=vs.110).aspx
/// https://msdn.microsoft.com/en-us/library/ms178472.aspx
/// http://stackoverflow.com/questions/15442937/assign-complex-object-to-user-control-in-markup
/// </summary>
namespace myapp.Controls.PrimeUI {

	[ParseChildren(true, "Items")]
	[PersistChildren(true)]
	[DefaultProperty("Filter")]
	[ToolboxData("<{0}:dropdownlist runat=\"server\" filter=\"[Filter]\" filtermatchmode=\"[FilterMatchMode]\" SelectedObjectValue=\"[SelectedObjectValue]\"></{0}:dropdown>")]
	public class DropDownList : WebControls.DropDownList {
		public static ILog log = LogManager.GetLogger(typeof(DropDownList));

		[
			Bindable(true),
			Category("Appearance"),
			DefaultValue("false"),
			Description("Enable drop down filter?"),
			Localizable(true),
			PersistToViewState
		]
		public string Filter { get; set;  }

		[
			Bindable(true),
			Category("Appearance"),
			DefaultValue("contains"),
			Description("When Filtering, how we should match text."),
			Localizable(true),
			PersistToViewState
		]
		public string FilterMatchMode { get; set; }

		[
			Bindable(true),
			Category("Appearance"),
			DefaultValue(""),
			Description("What is the target value which is currently selected?"),
			Localizable(true),
			PersistToViewState
		]
		public string SelectedObjectValue { get; set; }

		private bool hasCheckedFormControl = false;
		private bool isFormControl { get; set; }

		private bool recurseParentsForTargetOfForm(Control c,bool isFormControl=false) {
			if (c.GetType() == typeof(FormView)) return isFormControl = true;
			else if (c.GetType() == typeof(Page)) return isFormControl;
			else {
				return isFormControl = recurseParentsForTargetOfForm(c.Parent);
			}
		}



		private void DataBoundValueOverride(object sender,EventArgs e) {
			String value = "";
			try {value = ViewState["DataBound_Value"].ToString();} catch (Exception) { }
			if (String.IsNullOrEmpty(value)) {
				value = SelectedObjectValue;
			}
			log.Debug("DataBoundValueOverride: ["+this.SelectedValue+"]:["+(value) +"]");
			this.SelectedValue = value;
		}

		/// <summary>
		/// Unfortunately asp.net doesn't handle formview controls well. So we have to process it ourselves and late-save the selection or it won't stick. DataBind results in loss of selection.
		/// </summary>
		/// <param name="e"></param>
		protected override void OnDataBinding(EventArgs e) {
			if (!hasCheckedFormControl) {
				isFormControl=recurseParentsForTargetOfForm(this.Parent);
				hasCheckedFormControl = true;
			}
			//log.Debug("OnDataBinding(pre):: (Select:" + this.SelectedValue + "): objecval:" + SelectedObjectValue);
			if (Page.IsPostBack) {
				log.Debug("This control is nested within a form: "+isFormControl); // it's value does not exist in any context except form data. Because ASP is a pain in the ass.
				if (isFormControl) {
					ViewState["DataBound_Value"] = this.SelectedValue = HttpContext.Current.Request.Form[this.UniqueID];
				} else { // value exists in current context.
					ViewState["DataBound_Value"]=this.SelectedValue;
				}
				this.DataBound += DataBoundValueOverride;
				base.OnDataBinding(e);
			} else {
				base.OnDataBinding(e);
				log.Debug("OnDataBinding(ViewState: "+ViewState["DataBound_Value"]+"):: (Select:"+ this.SelectedValue + "): objecval:"+SelectedObjectValue);
				//this.SelectedValue = SelectedObjectValue;
				//this.DataBound += DataBoundValueOverride;
			}

			log.Debug("POST_OnDataBinding(" + this.SelectedValue + "): " + SelectedObjectValue);
		}


		protected override void AddAttributesToRender(HtmlTextWriter writer) {
			if (!String.IsNullOrEmpty(Filter)) {
				if (String.IsNullOrEmpty(FilterMatchMode)) FilterMatchMode = "startsWith";
				writer.AddAttribute("data-prime-opts", "{'filter': " + Filter + ", 'filterMatchMode': '" + FilterMatchMode + "'}", false);
			}
			writer.AddAttribute("class", "Prime-DropDown");
			base.AddAttributesToRender(writer);
		}
		protected override void RenderContents(HtmlTextWriter writer) {
			if (Page.IsPostBack) {
				log.Debug("RenderContents: " + this.SelectedValue);
			}
			base.RenderContents(writer);
		}




		protected override void LoadViewState(object savedState) {
			base.LoadViewState(savedState);
			this.PersistFromViewState(ViewState);
		}

		protected override object SaveViewState() {
			this.PersistToViewState(ViewState);
			return base.SaveViewState();
		}

		protected override void TrackViewState() {base.TrackViewState();}
		public override ControlCollection Controls {get {this.EnsureChildControls();return base.Controls;}}


	}
}

Code: Select all

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Reflection;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Common.Logging;
using myapp.Extensions;
using WebControls = System.Web.UI.WebControls;

/// <summary>
/// https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.formview_events(v=vs.110).aspx
/// https://msdn.microsoft.com/en-us/library/ms178472.aspx
/// http://stackoverflow.com/questions/15442937/assign-complex-object-to-user-control-in-markup
/// </summary>
namespace myapp.Controls.PrimeUI {


	[DefaultProperty("Filter")]
	[ToolboxData("<{0}:checkbox runat=\"server\"></{0}:checkbox>")]
	public class CheckBox : WebControls.CheckBox {
		private static ILog log = LogManager.GetLogger(typeof(CheckBox));


		private bool hasCheckedFormControl = false;
		private bool isFormControl { get; set; }

		private bool recurseParentsForTargetOfForm(Control c, bool isFormControl = false) {
			if (c.GetType() == typeof(FormView)) return isFormControl = true;
			else if (c.GetType() == typeof(Page)) return isFormControl;
			else {
				return isFormControl = recurseParentsForTargetOfForm(c.Parent);
			}
		}



		private void DataBoundValueOverride(object sender, EventArgs e) {
			bool value = this.Checked;
			try { value = (bool)ViewState["DataBound_Value"]; } catch (Exception) { }
			this.Checked = value;
		}

		/// <summary>
		/// Unfortunately asp.net doesn't handle formview controls well. So we have to process it ourselves and late-save the selection or it won't stick. DataBind results in loss of selection.
		/// </summary>
		/// <param name="e"></param>
		protected override void OnDataBinding(EventArgs e) {
			if (!hasCheckedFormControl) {
				isFormControl = recurseParentsForTargetOfForm(this.Parent);
				hasCheckedFormControl = true;
			}
			if (Page.IsPostBack) {
				//log.Debug("This control is nested within a form: "+isFormControl); // it's value does not exist in any context except form data. Because ASP is a pain in the ass.
				if (isFormControl) {
					ViewState["DataBound_Value"] = this.Checked = HttpContext.Current.Request.Form[this.UniqueID]=="on";
				} else { // value exists in current context.
					ViewState["DataBound_Value"] = this.Checked;
				}
				this.PreRender += DataBoundValueOverride;
			}
			base.OnDataBinding(e);
		}



		protected override void AddAttributesToRender(HtmlTextWriter writer) {
			this.InputAttributes.Add("is", "p-checkbox");
			String funcname = "handle_" + this.ID;
			this.InputAttributes.Add("onchange", "if (typeof(" + funcname + ")==='function') return " + funcname + "($(this),event);");
			base.AddAttributesToRender(writer);
		}
		protected override void RenderContents(HtmlTextWriter writer) {
			if (Page.IsPostBack) {
				//log.Debug("RenderContents: " + this.SelectedValue);
			}
			base.RenderContents(writer);
		}




		protected override void LoadViewState(object savedState) {
			base.LoadViewState(savedState);
			this.PersistFromViewState(ViewState);
		}

		protected override object SaveViewState() {
			this.PersistToViewState(ViewState);
			return base.SaveViewState();
		}

		protected override void TrackViewState() { base.TrackViewState(); }
		public override ControlCollection Controls { get { this.EnsureChildControls(); return base.Controls; } }


	}
}



With that you can do the handy dandy nifty tags like so...

Code: Select all

// web config...
<add tagPrefix="PrimeUI" namespace="myapp.Controls.PrimeUI" assembly="myapp" />
      </controls>
</add>

Code: Select all

<%@ Import Namespace="PrimeUI=myapp.Controls.PrimeUI" %>

<div class="tacos and coffee">
     <PrimeUI:DropDownList ID="General_SelectTypeDropDown" runat="server" CssClass="ValidateThis" Style="position: relative" DataSourceID="exampleDataBoundDbField" DataTextField="exampleDbColumnName" DataValueField="exampleDbColumnName" SelectedValue='<%# Eval("Value_from_ItempTemplate_Loop") %>'></PrimeUI:DropDownList>
</div>


Post Reply

Return to “PrimeUI”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests