PDA

View Full Version : [CLOSED] Custom Control or User Control in razor MVC



matrixwebtech
Aug 04, 2014, 7:57 PM
I found a forum post http://forums.ext.net/showthread.php?27672-Creating-Razor-helper-methods-for-custom-controls
but I need to build a control using 2-3 other controls how do I do this?like a NumberField,DisplayField and a combobox

I tried to do this with partial view .

MODEL


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Ext.Net;
using Ext.Net.MVC;
namespace e.Models
{
public class time
{


public string HH
{
get { return X.GetCmp<NumberField>("hh").Value.ToString(); }
set { X.GetCmp<NumberField>("hh").Value = value; }
}


public string MM
{
get { return X.GetCmp<NumberField>("mm").Value.ToString(); }
set { X.GetCmp<NumberField>("mm").Value = value; }
}


public string TT
{
get { return X.GetCmp<ComboBox>("tt").Value.ToString(); }
set { X.GetCmp<ComboBox>("tt").Value = value; }
}

public string returntime()
{

string strRes = string.Empty;
string strHH = string.Empty;
string strMM = string.Empty;
string strTT = string.Empty;

strHH = HH;
strMM = MM;
strTT = TT;

if (strHH.Length < 2)
{
strHH = "0" + strHH;
}
if (strMM.Length < 2)
{
strMM = "0" + strMM;
}
strRes = strHH + ":" + strMM + " " + strTT;
return strRes;
}

public time settime(string strtime)
{
string[] str1st = strtime.Split(':');
string[] str2nd = str1st[1].Split(' ');
time _time = new time();
_time.HH = str1st[0];
_time.MM = str2nd[0];
_time.TT = str2nd[1];
return _time;
}
}
}

PARTIAL VIEW


@using Ext.Net
@using Ext.Net.MVC

@{
var X = Html.X();
}
<script>
var hhValidation = function () {
if (Ext.getCmp("hh").getValue() > 12) {
Ext.getCmp("hh").setValue(12);
}
// alert("HI")
}

var mmValidation = function () {
if (Ext.getCmp("mm").getValue() > 59) {
Ext.getCmp("mm").setValue(59);
}
// alert("HI")
}



</script>

@(X.Container().LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.StretchMax }).Border(false).Width(200).Padding(10)
.Items
(
X.NumberField().ID("hh").Width(22).LabelWidth(20).MaxLength(2).Text("09")
.AllowBlank(false).HideLabel(true).HideTrigger(tru e).MaxValue(12)
.Listeners(l => { l.Change.Fn = "hhValidation"; }),

X.DisplayField().Text(":"),

X.NumberField().ID("mm").Width(22).LabelWidth(20).MaxLength(2).Text("30")
.AllowBlank(false).AllowDecimals(false).MaxValue(5 9)
.Listeners(l => { l.Change.Fn = "mmValidation"; })
.HideTrigger(true),

X.DisplayField().Text(":"),

X.ComboBox().ID("tt").Width(45).LabelWidth(20).HideLabel(true).Editabl e(false).AllowBlank(false)
.SelectedItems("AM")

.Items(
new ListItem { Text = "AM" },
new ListItem { Text = "PM" }
)



)
)


VIEW


@using Ext.Net
@using Ext.Net.MVC
@{
Layout = null;
var X = Html.X();
}
<script>
var validation = function () {

if (Ext.getCmp("f").isValid() == true) {
return true;
}
else {
return false;
}
}

</script>
<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@X.ResourceManager()

@(X.FormPanel().Border(false).ButtonAlign(Alignmen t.Left).ID("f")
.Items(
X.Container()
.ItemsFromPartial("~/Views/Shared/_Partial.cshtml"),

X.Container()
.ItemsFromPartial("~/Views/Shared/_Partial.cshtml")

)

.Buttons
(
X.Button().DirectClickAction("test")
.Listeners(l => { l.Click.Handler = "return validation()"; })


)
)



</div>
</body>
</html>


CONTROLLER


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ext.Net;
using Ext.Net.MVC;
using e.Models;
namespace e.Controllers
{
public class ucController : Controller
{
//
// GET: /uc/
e.Models.time _time = new time();
public ActionResult Index()
{
_time.settime("10:35 PM");
return View();
}

public DirectResult test()
{

string s = _time.returntime();
return this.Direct();
}

}
}


but its through an error,because I use the same partial view more then one in a view and id conflict ,but I need to use the same partial view more then one in a view.without set any ID to fields its works fine,but I for setting value dynamically I have to set ID.please see Model code.


A Control with an ID of "App.hh" has already been initialized. Please ensure that all Controls have a unique id.
The following Control has the same ID as at least one other Control on the Page. All Controls must have a unique ID.

Please let me know how to do this properly

Vladimir
Aug 05, 2014, 1:34 PM
Hi

What about to use native Razor functionality - templates?
In Shared folder (which is located inside View) you can use Display and Editor folders with templates views

Online examples
http://mvc.ext.net/#/Models/Editor_Template/
http://mvc.ext.net/#/Models/Data_Annotations/
http://mvc.ext.net/#/Models/FormPanelFor/

Articles about Razor templates
http://dineshkumara.blogspot.ru/2011/06/mvc-3-razor-editor-template.html
http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-3-default-templates.html

matrixwebtech
Aug 05, 2014, 1:46 PM
Hi
Not clearly getting your point,please run my sample in your test environment,and it will produced a view like attached image .
this control I am going to use through out my application,may be once in a view or more then once.

Daniil
Aug 05, 2014, 1:52 PM
Hi @matrixwebtech,


please run my sample in your test environment

Well, I don't think Vladimir needs that. He just suggested you an alternative approach.

As for your approach with partial views, it could be OK if you don't use IDs or make them unique for each partial view instance.


I found a forum post http://forums.ext.net/showthread.php?27672
but I need to build a control using 2-3 other controls how do I do this?like a NumberField,DisplayField and a combobox

You could still create a custom control inheriting from, for example, a FieldContainer and put all the fields to its Items.

matrixwebtech
Aug 05, 2014, 2:05 PM
can you please let me know,Is it possible to do this thing using ID property in partial view?
if not please provide me a sample which produce a control like attached image in previous post.if you see my code,you will understand I need this ID for get and set value to fields.

can you please give me some idea to create a custom control arranging some other controls.if you run my sample ,you can understand what type of control I try to create.

Daniil
Aug 06, 2014, 6:55 AM
can you please let me know,Is it possible to do this thing using ID property in partial view?

Maybe, it is possible, but you have to render each partial view with unique IDs.

Besides a partial view's name, you can pass a Model and/or a ViewData to a partial view.

.ItemsFromPartial()

You could pass some unique piece of text to use with IDs inside a partial view.


if not please provide me a sample which produce a control like attached image in previous post.if you see my code,you will understand I need this ID for get and set value to fields.

can you please give me some idea to create a custom control arranging some other controls.if you run my sample ,you can understand what type of control I try to create.

Please clarify have you tried any of our suggestions?

matrixwebtech
Aug 06, 2014, 7:49 AM
I am confused,I go through online example and tutorial links provided by Vladimir and don't understand how I begin.can you please provide me a sample which produce a control as per my need.

matrixwebtech
Aug 06, 2014, 4:42 PM
Hi daniil as per your suggestion I try and produce which I exactly want.I post my sample here Please review once.

PARTIAL


@using Ext.Net
@using Ext.Net.MVC
@model e.Models.time
@{
var X = Html.X();
}
<script>
var hhValidation = function (h) {

if (h.getValue() > 12) {
h.setValue(12);
}

}

var mmValidation = function (m) {
if (m.getValue() > 59) {
m.setValue(59);
}

}



</script>

@(X.Container().LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.StretchMax }).Border(false).Width(200).Padding(10)
.Items
(
X.NumberFieldFor(o=>o.HH).Width(22).LabelWidth(20).MaxLength(2).Text("09")
.AllowBlank(false).HideLabel(true).HideTrigger(tru e).MaxValue(12)
.Listeners(l => { l.Change.Handler = "hhValidation(this)"; })
,

X.DisplayField().Text(":"),

X.NumberFieldFor(o=>o.MM).Width(22).LabelWidth(20).MaxLength(2).Text("30")
.AllowBlank(false).AllowDecimals(false).MaxValue(5 9).HideLabel(true)
.Listeners(l => { l.Change.Handler = "mmValidation(this)"; })
.HideTrigger(true),

X.DisplayField().Text(":"),

X.ComboBoxFor(o=>o.TT).Width(45).LabelWidth(20).HideLabel(true).Edi table(false).AllowBlank(false)
.SelectedItems("AM")

.Items(
new ListItem { Text = "AM" },
new ListItem { Text = "PM" }
)



)
)

MODEL


using System;
using Ext.Net;
namespace e.Models
{
public class time
{
public string s = string.Empty;

public string HH
{
get {return X.GetCmp<NumberField>(s + ".HH").Value.ToString(); }
set { X.GetCmp<NumberField>(s + "_HH").Value = value; }
}


public string MM
{
get { return Convert.ToString(X.GetCmp<NumberField>(s + ".MM").Value); }
set { X.GetCmp<NumberField>(s + "_MM").Value = value; }
}


public string TT
{
get { return Convert.ToString(X.GetCmp<ComboBox>(s + ".TT").Value); }
set { X.GetCmp<ComboBox>(s + "_TT").Value = value; }
}

public string returntime()
{

string strRes = string.Empty;
string strHH = string.Empty;
string strMM = string.Empty;
string strTT = string.Empty;

strHH = HH;
strMM = MM;
strTT = TT;

if (strHH.Length < 2)
{
strHH = "0" + strHH;
}
if (strMM.Length < 2)
{
strMM = "0" + strMM;
}
strRes = strHH + ":" + strMM + " " + strTT;


return strRes;
}

public void settime(string strtime)
{
string[] str1st = strtime.Split(':');
string[] str2nd = str1st[1].Split(' ');

HH = str1st[0];
MM = str2nd[0];
TT = str2nd[1];


}


}


}

VIEW


@using Ext.Net
@using Ext.Net.MVC
@{
Layout = null;
var X = Html.X();
}
<script>
var validation = function () {

if (Ext.getCmp("f").isValid() == true) {
return true;
}
else {
return false;
}
}

</script>
<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@X.ResourceManager()

@(X.FormPanel().Border(false).ButtonAlign(Alignmen t.Left).ID("f")
.Items(

X.Container()
.ItemsFromPartial("~/Views/Shared/_Partial.cshtml",new ViewDataDictionary { TemplateInfo = new System.Web.Mvc.TemplateInfo { HtmlFieldPrefix ="s" } })
,
X.Container()
.ItemsFromPartial("~/Views/Shared/_Partial.cshtml", null, new ViewDataDictionary { TemplateInfo = new System.Web.Mvc.TemplateInfo { HtmlFieldPrefix = "e" } })

)

.Buttons
(
X.Button().DirectClickAction("test")
.Listeners(l => { l.Click.Handler = "return validation()"; })


)
)



</div>
</body>
</html>

CONTROLLER


using System.Web.Mvc;
using Ext.Net.MVC;
using e.Models;
namespace e.Controllers
{
public class ucController : Controller
{
//
// GET: /uc/

public ActionResult Index()
{

e.Models.time _time = new time();
_time.s = "s";
_time.settime("5:35 PM");
_time.s = "e";
_time.settime("1:35 PM");



return View();
}

public DirectResult test()
{
e.Models.time _time = new time();
_time.s = "s";
string s = _time.returntime();

_time.s = "e";
string s1 = _time.returntime();
return this.Direct();
}

}
}


But I don't understand one thing in model


public string HH
{
get {return X.GetCmp<NumberField>(s + ".HH").Value.ToString(); }
set { X.GetCmp<NumberField>(s + "_HH").Value = value; }
}

see the get and set, I get with (s + ".HH")(use a . after prefix), and set with (s + "_HH") (use _ after prefix).I don't understand the exact reason,on time of get a error occurred,and I debug with firefox and found field id not contain any underscore (_) its contain a dot (.).and I change it in model.
can you please know me the reason behind this.

Daniil
Aug 07, 2014, 9:06 AM
Please clarify how do you use that?

new ViewDataDictionary { TemplateInfo = new System.Web.Mvc.TemplateInfo { HtmlFieldPrefix ="s" } }

I don't see there you set unique IDs for the fields in the partial view.

matrixwebtech
Aug 07, 2014, 9:35 AM
I assign
HtmlFieldPrefix ="s" when partial view rendered the fields inside partial view generate a id like s_HH

Daniil
Aug 07, 2014, 10:09 AM
So, I guess it sets a prefix for the ids of HTML elements only, not for the IDs of Ext.NET fields.

In any way, could you, please, clarify why you use

s + ".HH"
in the HH getter if there is an underscore used on client?

matrixwebtech
Aug 07, 2014, 12:10 PM
Ok, I think in that case Ext.net field id in client side generate with (.) prefix.
I did not understand this.I think if you test my code at your end you can better understand then me.

Daniil
Aug 08, 2014, 8:56 AM
It is how an HtmlFieldPrefix option works.
http://thatextramile.be/blog/2011/01/prefixing-input-elements-of-partial-views-with-asp-net-mvc/

It prefixes an HTML id attribute with "prefix_", but it prefixes an HTML name attribute with "prefix.". This behavior doesn't depend on Ext.NET.

matrixwebtech
Aug 08, 2014, 10:21 AM
Thanks for your reply.currently my purpose is solved .please close this.