CODEWITHSUNDEEP
c#asp.net-mvcrazor
techietalk
techietalk

Reputation: 119

How to concatenate multiple razor textbox values to single property value

I have the following in my ASP.Net MVC 3 Razor View

                            int ssnformattxtbox1 = int.Parse(Model.ssn.Substring(0, 3));
                            @Html.TextBoxFor(m => m.ssn, new { @type = "number", @class = "hide", id = "Txtboxssn1", maxlength = 3, onkeypress = "return isNumberKey(event);" })
                            <b>-</b>
                            int ssnformattxtbox2 = int.Parse(Model.ssn.Substring(3, 2));
                            @Html.TextBoxFor(m => m.ssn, new { @type = "number", @class = "hide", id = "Txtboxssn2", maxlength = 2, onkeypress = "return isNumberKey(event);" })
                            <b>-</b>
                            int ssnformattxtbox3 = int.Parse(Model.ssn.Substring(5, 4));
                            @Html.TextBoxFor(m => m.ssn, new { @type = "number", @class = "hide", id = "Txtboxssn3", maxlength = 4, onkeypress = "return isNumberKey(event);" })

Here is the model property I would like to concatenate the 3 textbox values to

    public class Student
    {
        public string ssn { get; set; }
}

How can i concatenate the 3 textbox values to my property value on Post?

Upvotes: 1

Views: 1279

Answers (1)

Jerdine Sabio
Jerdine Sabio

Reputation: 6150

An alternative way to do this is create a class property that would concatenate 3 other properties;

public class Student
{
        public string ssn1 { get; set; }
        public string ssn2 { get; set; }
        public string ssn3 { get; set; }
        public string ssn {
           get {
              return this.ssn1+this.ssn2+this.ssn3;
           } 
        }
}

@Html.TextBoxFor(m => m.ssn1, new { @type = "number", @class = "hide", id = "Txtboxssn1", maxlength = 3, onkeypress = "return isNumberKey(event);" })

@Html.TextBoxFor(m => m.ssn2, new { @type = "number", @class = "hide", id = "Txtboxssn2", maxlength = 2, onkeypress = "return isNumberKey(event);" })

@Html.TextBoxFor(m => m.ssn3, new { @type = "number", @class = "hide", id = "Txtboxssn3", maxlength = 4, onkeypress = "return isNumberKey(event);" })

OR if you really need to save the full SSN field in the db you could do;

// have one property only
public class Student
{
        public string ssn {get;set;}
}

// have 3 input fields with same class + 1 hidden SSN input field

<input class="ssnChange" type="number" id="Txtboxssn1" maxlength="3" onkeypress="return isNumberKey(event)">

<input class="ssnChange" type="number" id="Txtboxssn2" maxlength="2" onkeypress="return isNumberKey(event)">

<input class="ssnChange" type="number" id="Txtboxssn3" maxlength="4" onkeypress="return isNumberKey(event)">

@Html.HiddenFor(m => m.ssn3, new { id = "realSSN" })

// then add a script that will add those 3 input fields and will assign to hidden ssn
<script>
   $(document).ready(function(){
      $(".ssnChange").change(function(){
         var ssn1 = $("#Txtboxssn1").val();
         var ssn2 = $("#Txtboxssn2").val();
         var ssn3 = $("#Txtboxssn3").val();
         $("#realSSN").val(ssn1+ssn2+ssn3);
         // or $("#realSSN").val(ssn1.toString()+ssn2.toString()+ssn3.toString());
      });
   });
</script>

Upvotes: 4

Related Questions