We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

MaskEdit not displaying value

I have the following MaskEdit on a page:

@Html.EJ().MaskEditTextBoxFor(m => m.Phone).MaskFormat("(999)999-9999")

When I post the form that contains this field back to the controller the 'Phone' value gets posted properly and inserted into the database.

I use the same form to provide edit functionality and all of the form fields bind properly to their model values except this MaskEditTextBoxFor, which just displays its Mask '(___)___-____' rather then the Phone value of the the record being edited.

The controller method is filling in the model properly, I used the debugger to verify that the Phone field has a value and is being passed to the view (yet only the mask is visible and not he actual value of the field).  I even tried setting the helpers '.value(Model.Phone)' attribute but it still does not display the value.   How do I get the MaskEditTextBox to display the passed in value?

Thanks,
Steve

7 Replies

AB Ashokkumar Balasubramanian Syncfusion Team January 16, 2017 01:54 PM UTC

Hi Steve, 
 
We have analyzed your query (“How do I get the MaskEditTextBox to display the passed in value?).We suspect that if you want to maintain the model value to the MaskEditFor component fields after performing the form post then we need to return back the model values to MaskEditFor. 
 
Please refer the below code snippet. 
 
        [Controller] 
 
        [HttpPost] 
        public ActionResult TextBoxesFeatures(EditorValue model) 
        { 
            return View(model); 
        } 
 
 
For this requirement, we have prepared simple sample, it can be downloaded from below locations. 
 
 
Please let us know whether the provided sample is helpful in achieving your requirement. If not, kindly get back to us with more information or please revert back the provided sample based on your application along with the replication procedure to reproduce the issue at our end this would be helpful for us to identify the issue and provide a solution at the earliest. 
 
Regards, 
Ashokkumar B. 



SR Steve Rochford January 16, 2017 07:40 PM UTC

The model is being passed to the view:

Model:

public class WidgetDto 
    {
        [MaxLength(10)]
        [Required]
        public string Name { get; set; }
        
       [MaxLength(15)]
        [DataType(DataType.PhoneNumber)]
        [RegularExpression(@"^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$", ErrorMessage = "Not a valid Phone number")]
        public string Phone { get; set; }
       
        [MaxLength(50)]
        [RegularExpression("^[a-zA-Z0-9_\\.-]+@([a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,6}$", ErrorMessage = "E-mail is not valid")]
        public string Email { get; set; }
        
        public bool Switch1 { get; set; }
        public bool Switch2 { get; set; }
        public DateTime MyDate { get; set; }
        public JobType Type { get; set; }
        
        [Range(1, 10)]
        public int MyNumber { get; set; }
}



Controller (id of an existing widget is being passed in, 'output' has been verified to contain a valid Phone string value):

public async Task<PartialViewResult> CreateOrEditModal(int? id)
        {
            var output = await _widgetAppService.GetWidgetForEdit(new NullableIdDto { Id = id });
            return PartialView("_CreateOrEditModal", output);
        } 

View:

@model SmartAgentNZ.SmartAgentNG.Dto.WidgetDto

<form name="WidgetForm" role="form" novalidate class="form-validation">
                    @Html.AntiForgeryToken()
                    <div class="form-horizontal">
                        
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                        @Html.HiddenFor(model => model.Id)

                        ...

                        <div class="form-group">
                            @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EJ().MaskEditTextBoxFor(m => m.Phone).MaskFormat("(999)999-9999")
                                <br />
                                @Html.EJ().MaskEdit("maskedit").MaskFormat("(999)999-9999").InputMode(InputMode.Text).Value("7775551234")
 
                            </div>
                        </div>
...

In the example above both the  MaskEditTextBoxFor and the hard-coded MaskEdit helpers display '(___)____-_____'  instead of the respective values.  In the case of the MaskEdit (which was put in for testing), that helper is not reliant on any model value being passed in, the value is hard  coded on the helper  '.Value("7775551234")'  yet all that I get displayed is an a masked text box without the value.  What would block the helper from placing the value in the outputted web page?   All other Syncfusion helpers on the page are working properly NumericTextbox, checkboxes etc).


Thanks,

Steve                   



PR Piramanayagam Ramakrishnan Syncfusion Team January 17, 2017 12:08 PM UTC

Hi Steve, 
 
Thanks for your update. 
 
We are unable to reproduce the reported issue (“MaskEdit not displaying value”) in MaskEdit control. At our side, MaskEdit is working properly. 
 
For your reference, we have prepared the sample to showcase that MaskEdit control is working properly with given code in the link: Sample 
 
If you are still facing the reported issue, then please share the more information along with below details, 
1.      Product version used in your application 
2.      Any simple sample or revert back the attached sample to reproduce issue in our end. 
 
These information would be helpful for us to identify the issue and provide a solution at the earliest. 
 
Regards, 
Piramanayagam R


BW Bonnie White May 24, 2017 01:25 AM UTC

I am having the exact same issue.  Were you able to get this working ?

Thanks!
Bonnie


PR Piramanayagam Ramakrishnan Syncfusion Team May 24, 2017 12:02 PM UTC

Hi Bonnie, 
 
Thanks for contacting Syncfusion support. 
 
We are unable to reproduce the reported issue (“MaskEdit not displaying value”) in MaskEdit control. At our side, MaskEdit is working properly. 
 
For your reference we have prepared the sample to showcase that MaskEdit control is working properly with given code in the link: Sample 
 
If still you face the same issue kindly get back to us with more information or please revert back the provided sample based on your application along with the replication procedure to reproduce the issue at our end. This would be helpful for us to identify the issue and provide a solution at the earliest.  
 
Regards, 
Piramanayagam R


LA Lakshumaiah July 14, 2017 02:52 AM UTC

Is this issue is resolved, I am asking because i am also getting same error, i am passing model object to view, but in view phone number is not displaying. any help is appreciated in the above image, first one is normal html text box, there i got phone number, but below one is not displaying         @Html.TextBoxFor(c => c.PhoneNumber, new { @class = "form-control CustomerData", @onkeypress = "return PhoneValidation(event)" })                                 @Html.EJ().MaskEditTextBoxFor(m => m.PhoneNumber).WatermarkText("Phone number").MaskFormat("(999)999-9999").Width("280").ShowError(true)


AB Ashokkumar Balasubramanian Syncfusion Team July 14, 2017 11:24 AM UTC

Hi Lakshumaiah, 
 
We have analyzed your reported issue and provided code block. We suspect that, you have render the MaskEdit component in Unobtrusive mode. So, the values are not displayed in MaskEdit Component. This is already a known issue in our version 15.2.0.43. We have fixed this issue and the fix is included in our latest version 15.2.0.46(Vol 2 2017, SP 2 Release). So please upgrade to our latest version and this issue will be resolved. For your reference, we have prepared a sample, and it can be downloaded from the following location: 
 
 
If still the problem persists, please revert back the provided sample based on your application along with replication procedure. This would be more helpful for us to provide better solution at earliest. 
 
Regards, 
Ashokkumar B.     


Loader.
Up arrow icon