[CLOSED] Custom Control or User Control in razor MVC

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Custom Control or User Control in razor MVC

    I found a forum post http://forums.ext.net/showthread.php...ustom-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(true).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(59)
         .Listeners(l => { l.Change.Fn = "mmValidation"; })
        .HideTrigger(true),
        
        X.DisplayField().Text(":"),
        
        X.ComboBox().ID("tt").Width(45).LabelWidth(20).HideLabel(true).Editable(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(Alignment.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
    Last edited by Daniil; Aug 08, 2014 at 9:35 AM. Reason: [CLOSED]
  2. #2
    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...-template.html
    http://bradwilson.typepad.com/blog/2...templates.html
  3. #3
    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.
    Attached Thumbnails Click image for larger version. 

Name:	time.png 
Views:	10 
Size:	1.0 KB 
ID:	13961  
  4. #4
    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.
  5. #5
    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.
    Last edited by matrixwebtech; Aug 05, 2014 at 7:55 PM.
  6. #6
    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?
  7. #7
    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.
  8. #8
    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(true).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(59).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).Editable(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(Alignment.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.
  9. #9
    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.
  10. #10
    I assign
    HtmlFieldPrefix ="s"
    when partial view rendered the fields inside partial view generate a id like s_HH
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 2
    Last Post: May 09, 2013, 3:41 PM
  2. Replies: 2
    Last Post: Feb 06, 2012, 9:06 AM
  3. Replies: 3
    Last Post: Oct 12, 2011, 11:31 AM
  4. how to upload user control dynamicaly on user control
    By archana mahadule in forum 1.x Help
    Replies: 1
    Last Post: Jan 13, 2011, 12:05 PM
  5. Replies: 1
    Last Post: Nov 09, 2010, 3:30 PM

Posting Permissions