CODEWITHSUNDEEP
asp.net-mvcmodel
Abdullah
Abdullah

Reputation: 1021

How can i show DisplayName label before and after editor (English + Arabic ) in MVC?

I want to create multi-language system using MVC (English and Arabic) , I want to use one view for both languages , i created the Login view based on the following model :

public partial class WEBSITE_USERS
    {

        [DisplayName("ID / Iqamam No   -  رقم الهوية او الاقامة")]
        [Required(ErrorMessage ="This field is required يجب ادخال رقم الهوية المسجل في الملف الطبي ")]
        public string ID_NO { get; set; }

        [DisplayName("Mobile No - رقم الجوال")]
        [Required(ErrorMessage = "Mobile No is required - يجب ادخال رقم الجوال المسجل في الملف ")]
        public string MOBILE { get; set; }

        [DisplayName("Medical Record No - رقم الملف")]
        [Required(ErrorMessage = "File No is required يجب ادخال رقم الملف الطبي ")]
        }

Now the DisplayName appeared on left side ,

How can i show the English label on left side and Arabic label on right side of editor to show like this for example :

ID/Iqama No ----------------- رقم الهوية او الاقامة

Now its appear all in left side like this :

ID / Iqamam No - رقم الهوية او الاقامة ---------------------------

this is the view code 

@model kaashtaif.Models.WEBSITE_USERS

@{
    ViewBag.Title = "Login Window - شاشة تسجيل الدخول";

}

<h2>Login</h2>


@using (Html.BeginForm("Authorise","Login",FormMethod.Post)) 
{
    @Html.AntiForgeryToken()

<div class="form-horizontal">

    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.ID_NO, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ID_NO, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ID_NO, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.MOBILE, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.MOBILE, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.MOBILE, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.PATIENT_NO, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.PATIENT_NO, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.PATIENT_NO, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="col-md-10">
        <label>@Html.DisplayFor(model => model.LoginErrorMessage)</label>

    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Login" class="btn btn-default" />
            <input type="reset" name="name" value="Clear" class="btn btn-default" />
        </div>
    </div>
</div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

and this is screen shot of view

enter image description here

Upvotes: 1

Views: 359

Answers (1)

Jerdine Sabio
Jerdine Sabio

Reputation: 6130

Fastest way of doing it is changing your markup and manually using Html.DisplayNameFor() then split that string up.

Repeat this process for the rest of the input fields/ form-group.

<div class="form-group">
        <div class="col-md-3">
           @Html.DisplayNameFor(x => x.ID_NO).ToString().Split('-')[0]
        </div>
        <div class="col-md-6">
            @Html.EditorFor(model => model.ID_NO, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ID_NO, "", new { @class = "text-danger" })
        </div>
        <div class="col-md-3">
           @Html.DisplayNameFor(x => x.ID_NO).ToString().Split('-')[1]
        </div>
</div>

What's happening here is we're getting the value of DisplayName attribute which is [DisplayName("ID / Iqamam No - رقم الهوية او الاقامة")] and since you have a delimiter which is a hyphen, we're splitting the string into two using that - or hyphen then displaying the string by index.

Upvotes: 1

Related Questions