Remove From My Forums

EditorFor to display comma on a decimal

Question
0

Sign in to vote
User982203039 posted

Is it possible for a EditorFor to display currency or decimal with comma (10,000) but not post that to the database? Example if a user enters 10000 it display 10,000 but posts 10000?

@Html.EditorFor(model => model.Amount, new { htmlAttributes = new { @class = "form-control", @style = "width:110px" } })
Tuesday, August 13, 2019 1:47 AM

Answers

User665608656 posted

Hi Baze,

Is it possible for a EditorFor to display currency or decimal with comma (10,000) but not post that to the database? Example if a user enters 10000 it display 10,000 but posts 10000?

Yes, it is possible.

To achieve this function, in your Entity Framework model, add the following code to Amount field:

namespace MVC_0723.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;

    public partial class Employee
    {
        public int EmplId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string EmailAddr { get; set; }

        [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:N}")]
        public Nullable<decimal> Amount { get; set; }
    }
}

This can ensure that the data showed in Editor will dispaly like '10,000 ' when page loaded.

To ensure that input data is displayed in 10,000 formats, you need to add JS event to the Editor, then when you save this data to your datatbase ,I suggest you can use ajax to pass the data in Editor and when passed as a parameter to the controller, replace "," in the number with an empty string.

For more details, you can refer to the following code:

I have an table named employee with a column named Amount which type is decimal(8,0).

Here is the data in employee:

Here is the code in controller:

 public class C0813_2158695Controller : Controller
    {
        // GET: C0813_2158695
        public ActionResult Index()
        {
            Entities_0813 entities = new Entities_0813();
            var ReqDetails = (from cust in entities.Employees select cust).FirstOrDefault();
            return View(ReqDetails);
        }
        [HttpPost]
        public JsonResult ChangeData(string amount)
        {
            Entities_0813 entities = new Entities_0813();
            var imgDB = entities.Employees.FirstOrDefault(x => x.EmplId == 2);
            imgDB.Amount = Convert.ToDecimal(amount.Replace(",", ""));
            entities.SaveChanges();
            return Json("", JsonRequestBehavior.AllowGet);
        }
    }

The razor of index view:

@model MVC_0723.Models.Employee
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        function Comma(Num) { //function to add commas to textboxes
        Num += '';
        Num = Num.replace(',', ''); Num = Num.replace(',', ''); Num = Num.replace(',', '');
        Num = Num.replace(',', ''); Num = Num.replace(',', ''); Num = Num.replace(',', '');
        x = Num.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1))
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
        return x1 + x2;
    }

        $(function(){
           $("#Button1").click(function(){
             $.ajax({
                        type: "POST",
                        url: '/C0813_2158695/ChangeData',
                        contentType: "application/json;charset=utf-8",
                        data: '{amount: "' + $("#Amount").val() + '" }',
                        dataType: "json",
                        success: function (result) {
                             alert("change success!");
                        }
                    });
        });
        })
    </script>
</head>
<body>
    <div>

        @Html.EditorFor(model => model.Amount, new { htmlAttributes = new { @class = "form-control", 
@style = "width:110px", @onkeyup = "javascript:this.value=Comma(this.value);" } })
        <input id="Button1" type="button" value="Save"  />
    </div>
</body>
</html>

You can refer to these links : HTML.EditorFor with 3 decimal places

Auto add comma (,) in text-box with numbers

Here is the result of this work demo:

Best Regards,

YongQing.

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Tuesday, August 13, 2019 7:40 AM

All replies